AI token editor
Edit Wise tokens
Describe what you want to change in plain English. Claude rewrites only the tokens you mention and leaves the rest alone. Download the modified CSS / JSON when you're happy.
Try:
Anonymous: 3/hr · Members: 30/hr.
Current
{
"color": {
"brand": {
"primary": {
"$value": "#9FE870",
"$type": "color",
"$description": "Primary brand green (lime) for CTAs and key accents"
},
"primary-dark": {
"$value": "#8BD65C",
"$type": "color",
"$description": "Darker shade for hover states"
},
"dark-green": {
"$value": "#0D2B0D",
"$type": "color",
"$description": "Dark green for alternative hero backgrounds"
},
"pale-green": {
"$value": "#D7F2A8",
"$type": "color",
"$description": "Light green for banners and promotional sections"
}
},
"neutral": {
"black": {
"$value": "#000000",
"$type": "color",
"$description": "Pure black for headlines and primary text"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "White for backgrounds and inverse text"
},
"gray-50": {
"$value": "#F5F5F5",
"$type": "color",
"$description": "Lightest gray for subtle backgrounds"
},
"gray-200": {
"$value": "#E0E0E0",
"$type": "color",
"$description": "Light gray for borders"
},
"gray-500": {
"$value": "#707070",
"$type": "color",
"$description": "Medium gray for tertiary text"
},
"gray-700": {
"$value": "#505050",
"$type": "color",
"$description": "Dark gray for secondary text"
}
}
},
"font": {
"family": {
"display": {
"$value": "'GT America Expanded', ui-sans-serif, system-ui, sans-serif",
"$type": "fontFamily",
"$description": "Bold condensed font for headlines and hero text"
},
"body": {
"$value": "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
"$type": "fontFamily",
"$description": "Sans-serif font for body text and UI"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text for labels and metadata"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text for captions"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base body text size"
},
"lg": {
"$value": "20px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "H4 headings"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "H3 headings"
},
"3xl": {
"$value": "48px",
"$type": "dimension",
"$description": "H2 headings"
},
"4xl": {
"$value": "64px",
"$type": "dimension",
"$description": "H1 headings"
},
"5xl": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero headlines"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Normal weight for body text"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium weight for emphasis"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold for subheadings"
},
"extrabold": {
"$value": "800",
"$type": "fontWeight",
"$description": "Extra bold for large headings"
},
"black": {
"$value": "900",
"$type": "fontWeight",
"$description": "Black for hero headlines"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Base spacing unit"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Small gaps between elements"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Default element spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Large spacing"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Section padding"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Large section gaps"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Hero section padding"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Extra large spacing between sections"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small radius for subtle rounding"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Medium radius for cards and inputs"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large radius for prominent cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large radius for hero elements"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full radius for pills and circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.04)",
"$type": "shadow",
"$description": "Subtle elevation for small elements"
},
"md": {
"$value": "0 2px 8px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Medium shadow for cards"
},
"lg": {
"$value": "0 4px 16px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Large shadow for modals and dropdowns"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Wise is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.