AI token editor
Edit Modal 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": {
"primary": {
"$value": "#8FFF00",
"$type": "color",
"$description": "Primary brand color - bright green for CTAs and accents"
},
"primary-dark": {
"$value": "#7AE600",
"$type": "color",
"$description": "Darker shade of primary for hover states"
},
"bg": {
"primary": {
"$value": "#000000",
"$type": "color",
"$description": "Primary background - pure black"
},
"surface": {
"$value": "#1A1A1A",
"$type": "color",
"$description": "Elevated surface color for cards and panels"
},
"elevated": {
"$value": "#242424",
"$type": "color",
"$description": "Higher elevation for hover states"
},
"banner": {
"$value": "#8FFF00",
"$type": "color",
"$description": "Banner background color"
}
},
"text": {
"primary": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Primary text color - white"
},
"secondary": {
"$value": "#999999",
"$type": "color",
"$description": "Secondary text color - medium gray"
},
"muted": {
"$value": "#666666",
"$type": "color",
"$description": "Muted text for less important content"
},
"on-primary": {
"$value": "#000000",
"$type": "color",
"$description": "Text color on primary green background"
}
},
"border": {
"default": {
"$value": "#333333",
"$type": "color",
"$description": "Default border color"
},
"subtle": {
"$value": "#1F1F1F",
"$type": "color",
"$description": "Subtle border for minimal contrast"
}
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Inter\", sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "\"Consolas\", \"Monaco\", monospace",
"$type": "fontFamily",
"$description": "Monospace font for code"
}
},
"size": {
"hero": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero headline size"
},
"display": {
"$value": "64px",
"$type": "dimension",
"$description": "Display heading size"
},
"h1": {
"$value": "48px",
"$type": "dimension",
"$description": "H1 heading size"
},
"h2": {
"$value": "32px",
"$type": "dimension",
"$description": "H2 heading size"
},
"h3": {
"$value": "24px",
"$type": "dimension",
"$description": "H3 heading size"
},
"body-lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"body": {
"$value": "16px",
"$type": "dimension",
"$description": "Base body text size"
},
"body-sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small body text"
},
"caption": {
"$value": "12px",
"$type": "dimension",
"$description": "Caption and label text"
}
},
"weight": {
"regular": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular font weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium font weight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semibold font weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold font weight for headings"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for large headings"
},
"snug": {
"$value": "1.3",
"$type": "number",
"$description": "Snug line height for headings"
},
"normal": {
"$value": "1.6",
"$type": "number",
"$description": "Normal line height for body text"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Extra small spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Small spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Medium-small spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Base spacing unit"
},
"5": {
"$value": "24px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "32px",
"$type": "dimension",
"$description": "Large spacing"
},
"8": {
"$value": "48px",
"$type": "dimension",
"$description": "Extra large spacing"
},
"10": {
"$value": "64px",
"$type": "dimension",
"$description": "2XL spacing"
},
"12": {
"$value": "96px",
"$type": "dimension",
"$description": "3XL spacing for sections"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small border radius"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Medium border radius for buttons"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large border radius for cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large border radius"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Fully rounded for pills and badges"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.3)",
"$type": "shadow",
"$description": "Small shadow for subtle elevation"
},
"md": {
"$value": "0 4px 8px rgba(0, 0, 0, 0.4)",
"$type": "shadow",
"$description": "Medium shadow for cards"
},
"lg": {
"$value": "0 8px 16px rgba(0, 0, 0, 0.5)",
"$type": "shadow",
"$description": "Large shadow for modals"
}
},
"border": {
"width": {
"default": {
"$value": "1px",
"$type": "dimension",
"$description": "Standard border width"
},
"thick": {
"$value": "2px",
"$type": "dimension",
"$description": "Thick border for emphasis"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Modal is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.