AI token editor
Edit Lemonade 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": "#FF0090",
"$type": "color",
"$description": "Primary brand color for CTAs and accent elements"
},
"background": {
"$value": "#FAFAF8",
"$type": "color",
"$description": "Main page background color"
},
"surface": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Card and surface backgrounds"
},
"text": {
"primary": {
"$value": "#333333",
"$type": "color",
"$description": "Primary text and headings"
},
"secondary": {
"$value": "#5A5A5A",
"$type": "color",
"$description": "Secondary body text"
},
"tertiary": {
"$value": "#999999",
"$type": "color",
"$description": "Tertiary text, inactive navigation"
}
},
"pink": {
"400": {
"$value": "#FF1FA0",
"$type": "color",
"$description": "Lighter pink shade"
},
"500": {
"$value": "#FF0090",
"$type": "color",
"$description": "Primary pink"
},
"600": {
"$value": "#E0007A",
"$type": "color",
"$description": "Darker pink shade for hover states"
}
},
"gray": {
"50": {
"$value": "#FAFAF8",
"$type": "color",
"$description": "Lightest gray"
},
"100": {
"$value": "#F5F5F3",
"$type": "color",
"$description": "Very light gray"
},
"200": {
"$value": "#E5E5E5",
"$type": "color",
"$description": "Light gray, borders"
},
"400": {
"$value": "#999999",
"$type": "color",
"$description": "Medium gray"
},
"600": {
"$value": "#5A5A5A",
"$type": "color",
"$description": "Dark gray"
},
"900": {
"$value": "#333333",
"$type": "color",
"$description": "Darkest gray, text"
}
},
"border": {
"$value": "#E5E5E5",
"$type": "color",
"$description": "Default border color"
},
"line-art": {
"$value": "#333333",
"$type": "color",
"$description": "Illustration stroke color"
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
"$type": "fontFamily",
"$description": "Sans-serif font stack for body and UI"
},
"serif": {
"$value": "Merriweather, Georgia, serif",
"$type": "fontFamily",
"$description": "Serif font for headings"
},
"script": {
"$value": "\"Lemonade Script\", cursive",
"$type": "fontFamily",
"$description": "Custom script font for logo"
}
},
"size": {
"hero": {
"$value": "4rem",
"$type": "dimension",
"$description": "Hero heading size (64px)"
},
"h1": {
"$value": "3rem",
"$type": "dimension",
"$description": "H1 heading size (48px)"
},
"h2": {
"$value": "2rem",
"$type": "dimension",
"$description": "H2 heading size (32px)"
},
"subheading": {
"$value": "1.25rem",
"$type": "dimension",
"$description": "Subheading size (20px)"
},
"base": {
"$value": "1rem",
"$type": "dimension",
"$description": "Base body text (16px)"
},
"nav": {
"$value": "0.9375rem",
"$type": "dimension",
"$description": "Navigation text (15px)"
},
"button": {
"$value": "0.875rem",
"$type": "dimension",
"$description": "Button text (14px)"
},
"small": {
"$value": "0.875rem",
"$type": "dimension",
"$description": "Small text (14px)"
}
},
"lineHeight": {
"tight": {
"$value": "1.15",
"$type": "number",
"$description": "Tight line height for hero text"
},
"heading": {
"$value": "1.2",
"$type": "number",
"$description": "Line height for headings"
},
"subheading": {
"$value": "1.3",
"$type": "number",
"$description": "Line height for subheadings"
},
"relaxed": {
"$value": "1.5",
"$type": "number",
"$description": "Relaxed line height"
},
"loose": {
"$value": "1.6",
"$type": "number",
"$description": "Loose line height for body text"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Normal weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium weight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semi-bold weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold weight for buttons"
}
}
},
"spacing": {
"1": {
"$value": "0.25rem",
"$type": "dimension",
"$description": "4px - micro spacing"
},
"2": {
"$value": "0.5rem",
"$type": "dimension",
"$description": "8px - tight spacing"
},
"3": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "12px - small spacing"
},
"4": {
"$value": "1rem",
"$type": "dimension",
"$description": "16px - base spacing"
},
"5": {
"$value": "1.25rem",
"$type": "dimension",
"$description": "20px - medium spacing"
},
"6": {
"$value": "1.5rem",
"$type": "dimension",
"$description": "24px - navigation spacing"
},
"8": {
"$value": "2rem",
"$type": "dimension",
"$description": "32px - section spacing"
},
"12": {
"$value": "3rem",
"$type": "dimension",
"$description": "48px - large spacing"
},
"16": {
"$value": "4rem",
"$type": "dimension",
"$description": "64px - extra large spacing"
},
"20": {
"$value": "5rem",
"$type": "dimension",
"$description": "80px - hero vertical padding"
},
"24": {
"$value": "6rem",
"$type": "dimension",
"$description": "96px - hero section spacing"
},
"32": {
"$value": "8rem",
"$type": "dimension",
"$description": "128px - maximum vertical spacing"
}
},
"radius": {
"sm": {
"$value": "0.25rem",
"$type": "dimension",
"$description": "4px - small radius"
},
"md": {
"$value": "0.5rem",
"$type": "dimension",
"$description": "8px - medium radius for buttons"
},
"lg": {
"$value": "1rem",
"$type": "dimension",
"$description": "16px - large radius"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full radius for pills"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation"
},
"md": {
"$value": "0 4px 12px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Card elevation"
},
"lg": {
"$value": "0 8px 24px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Modal elevation"
},
"button": {
"$value": "0 4px 16px rgba(255, 0, 144, 0.25)",
"$type": "shadow",
"$description": "Primary button hover shadow"
}
},
"border": {
"width": {
"default": {
"$value": "1px",
"$type": "dimension",
"$description": "Default border width"
},
"thick": {
"$value": "2px",
"$type": "dimension",
"$description": "Thick border"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Lemonade is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.