AI token editor
Edit Duolingo 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": {
"green": {
"$value": "#58cc02",
"$type": "color",
"$description": "Primary brand color, used for CTA buttons, logo, and primary actions"
},
"blue": {
"$value": "#1cb0f6",
"$type": "color",
"$description": "Secondary brand color, used for links and active states"
},
"purple": {
"$value": "#7b4dff",
"$type": "color",
"$description": "Tertiary brand color, used for schools section and special accents"
}
},
"text": {
"primary": {
"$value": "#3c3c3c",
"$type": "color",
"$description": "Primary text color (Eel)"
},
"secondary": {
"$value": "#777777",
"$type": "color",
"$description": "Secondary text color (Wolf)"
},
"tertiary": {
"$value": "#afafaf",
"$type": "color",
"$description": "Tertiary text color, disabled states (Hare)"
}
},
"background": {
"primary": {
"$value": "#ffffff",
"$type": "color",
"$description": "Primary background (Swan)"
},
"secondary": {
"$value": "#f7f7f7",
"$type": "color",
"$description": "Secondary background (Snow)"
}
},
"accent": {
"orange": {
"$value": "#ff9600",
"$type": "color",
"$description": "Accent color for illustrations"
},
"pink": {
"$value": "#ff86d0",
"$type": "color",
"$description": "Accent color for illustrations"
},
"yellow": {
"$value": "#ffc800",
"$type": "color",
"$description": "Accent color for illustrations"
}
},
"utility": {
"green-dark": {
"$value": "#46a302",
"$type": "color",
"$description": "Dark green for button shadows and hover states"
},
"blue-dark": {
"$value": "#1899d6",
"$type": "color",
"$description": "Dark blue for link hover states"
},
"border": {
"$value": "#e5e5e5",
"$type": "color",
"$description": "Default border color"
},
"border-dark": {
"$value": "#cecece",
"$type": "color",
"$description": "Darker border color"
}
}
},
"font": {
"family": {
"sans": {
"$value": "DIN Round, din-round, -apple-system, BlinkMacSystemFont, sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text - captions, labels"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text - secondary information"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base body text size"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Subheadings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Card headings"
},
"3xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Section headings"
},
"4xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Hero headings"
},
"5xl": {
"$value": "64px",
"$type": "dimension",
"$description": "Marketing headers"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Normal font weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold font weight for headings"
},
"extrabold": {
"$value": "800",
"$type": "fontWeight",
"$description": "Extra bold for brand headers"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for large headings"
},
"snug": {
"$value": "1.25",
"$type": "number",
"$description": "Snug line height for headings"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Normal line height for body text"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Tight spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Small gaps"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Default gap"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Medium spacing"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Large spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Section gaps"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Large sections"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "Extra large spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Hero spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Major sections"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Page sections"
}
},
"radius": {
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Small border radius"
},
"md": {
"$value": "12px",
"$type": "dimension",
"$description": "Medium border radius for cards"
},
"lg": {
"$value": "16px",
"$type": "dimension",
"$description": "Large border radius for buttons"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Extra large border radius"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full border radius for circles"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Subtle elevation shadow"
},
"md": {
"$value": "0 2px 8px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Card shadow"
},
"lg": {
"$value": "0 4px 16px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Modal shadow"
},
"button": {
"$value": "0 4px 0 #46a302",
"$type": "shadow",
"$description": "Button bottom shadow"
},
"button-hover": {
"$value": "0 2px 0 #46a302",
"$type": "shadow",
"$description": "Button pressed state shadow"
}
},
"border": {
"width": {
"thin": {
"$value": "1px",
"$type": "dimension",
"$description": "Thin border"
},
"medium": {
"$value": "2px",
"$type": "dimension",
"$description": "Medium border"
},
"thick": {
"$value": "3px",
"$type": "dimension",
"$description": "Thick border for active states"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Duolingo is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.