AI token editor
Edit Anthropic 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": {
"background": {
"cream": {
"$value": "#F5F3EE",
"$type": "color",
"$description": "Primary background color for Anthropic.com pages"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Primary background for Claude.ai and card backgrounds"
},
"dark": {
"$value": "#1A1A1A",
"$type": "color",
"$description": "Dark sections, hero cards, footer backgrounds"
}
},
"text": {
"primary": {
"$value": "#000000",
"$type": "color",
"$description": "Primary text color for headings and body"
},
"secondary": {
"$value": "#2A2A2A",
"$type": "color",
"$description": "Secondary text for less emphasis"
}
},
"brand": {
"coral": {
"$value": "#D97757",
"$type": "color",
"$description": "Primary brand color, CTAs, illustrations"
},
"coral-dark": {
"$value": "#CC785C",
"$type": "color",
"$description": "Darker coral for hover states and emphasis"
},
"coral-light": {
"$value": "#E07A5F",
"$type": "color",
"$description": "Light coral for backgrounds and accents"
}
},
"accent": {
"mint": {
"$value": "#B8D4CE",
"$type": "color",
"$description": "Secondary accent color, card backgrounds"
},
"mint-dark": {
"$value": "#A8C9C3",
"$type": "color",
"$description": "Darker mint for contrast"
},
"yellow": {
"$value": "#FFE66D",
"$type": "color",
"$description": "Highlight color for emphasis"
},
"yellow-dark": {
"$value": "#F4E04D",
"$type": "color",
"$description": "Darker yellow for better contrast"
}
},
"border": {
"light": {
"$value": "#E5E3DE",
"$type": "color",
"$description": "Subtle borders and dividers"
}
}
},
"font": {
"family": {
"serif": {
"$value": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
"$type": "fontFamily",
"$description": "Serif font for headlines and body text"
},
"sans": {
"$value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"$type": "fontFamily",
"$description": "Sans-serif font for UI elements and navigation"
}
},
"size": {
"display-xl": {
"$value": "72px",
"$type": "dimension",
"$description": "Extra large display text for hero headlines"
},
"display-lg": {
"$value": "64px",
"$type": "dimension",
"$description": "Large display text"
},
"heading-1": {
"$value": "56px",
"$type": "dimension",
"$description": "Page titles"
},
"heading-2": {
"$value": "40px",
"$type": "dimension",
"$description": "Section headings"
},
"heading-3": {
"$value": "28px",
"$type": "dimension",
"$description": "Subsection headings"
},
"heading-4": {
"$value": "24px",
"$type": "dimension",
"$description": "Card titles"
},
"body-lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"body": {
"$value": "16px",
"$type": "dimension",
"$description": "Default body text"
},
"body-sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text and captions"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "number",
"$description": "Regular weight for body text"
},
"medium": {
"$value": "500",
"$type": "number",
"$description": "Medium weight for emphasis"
},
"semibold": {
"$value": "600",
"$type": "number",
"$description": "Semi-bold for headings"
},
"bold": {
"$value": "700",
"$type": "number",
"$description": "Bold for strong emphasis"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for display text"
},
"snug": {
"$value": "1.2",
"$type": "number",
"$description": "Snug line height for headings"
},
"normal": {
"$value": "1.4",
"$type": "number",
"$description": "Normal line height"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Relaxed line height for body text"
}
}
},
"spacing": {
"xs": {
"$value": "4px",
"$type": "dimension",
"$description": "Extra small spacing"
},
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Small spacing"
},
"md": {
"$value": "12px",
"$type": "dimension",
"$description": "Medium spacing"
},
"lg": {
"$value": "16px",
"$type": "dimension",
"$description": "Large spacing"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Extra large spacing"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "2x extra large spacing"
},
"3xl": {
"$value": "48px",
"$type": "dimension",
"$description": "3x extra large spacing"
},
"4xl": {
"$value": "64px",
"$type": "dimension",
"$description": "4x extra large spacing"
},
"5xl": {
"$value": "96px",
"$type": "dimension",
"$description": "5x extra large spacing"
},
"6xl": {
"$value": "128px",
"$type": "dimension",
"$description": "6x extra large spacing"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small border radius"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Medium border radius for buttons and inputs"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large border radius for cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large border radius for hero cards"
},
"full": {
"$value": "999px",
"$type": "dimension",
"$description": "Full border radius for pills and circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle shadow for slight lift"
},
"md": {
"$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Medium shadow for cards"
},
"lg": {
"$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Large shadow for elevated elements"
},
"button": {
"$value": "0 2px 4px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Button shadow for depth"
}
},
"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.
Anthropic is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.