AI token editor
Edit Clerk 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": "#6c47ff",
"$type": "color",
"$description": "Primary brand color for CTAs and accents"
},
"primary-hover": {
"$value": "#5b38e6",
"$type": "color",
"$description": "Hover state for primary brand color"
},
"primary-dark": {
"$value": "#7c3aed",
"$type": "color",
"$description": "Primary brand color for dark mode"
}
},
"background": {
"base": {
"$value": "#ffffff",
"$type": "color",
"$description": "Main background color (light mode)"
},
"subtle": {
"$value": "#fafafa",
"$type": "color",
"$description": "Subtle background variation (light mode)"
},
"muted": {
"$value": "#f5f5f5",
"$type": "color",
"$description": "Muted background for disabled states (light mode)"
},
"card": {
"$value": "#ffffff",
"$type": "color",
"$description": "Card background (light mode)"
},
"base-dark": {
"$value": "#0a0a0a",
"$type": "color",
"$description": "Main background color (dark mode)"
},
"subtle-dark": {
"$value": "#0f0f0f",
"$type": "color",
"$description": "Subtle background variation (dark mode)"
},
"muted-dark": {
"$value": "#18181b",
"$type": "color",
"$description": "Muted background (dark mode)"
},
"card-dark": {
"$value": "#1e293b",
"$type": "color",
"$description": "Card background (dark mode)"
},
"announcement": {
"$value": "#000000",
"$type": "color",
"$description": "Announcement bar background"
}
},
"text": {
"primary": {
"$value": "#0a0a0a",
"$type": "color",
"$description": "Primary text color (light mode)"
},
"secondary": {
"$value": "#6b7280",
"$type": "color",
"$description": "Secondary text color (light mode)"
},
"tertiary": {
"$value": "#9ca3af",
"$type": "color",
"$description": "Tertiary text color (light mode)"
},
"inverse": {
"$value": "#ffffff",
"$type": "color",
"$description": "Inverse text color for dark backgrounds"
},
"primary-dark": {
"$value": "#ffffff",
"$type": "color",
"$description": "Primary text color (dark mode)"
},
"secondary-dark": {
"$value": "#9ca3af",
"$type": "color",
"$description": "Secondary text color (dark mode)"
},
"tertiary-dark": {
"$value": "#6b7280",
"$type": "color",
"$description": "Tertiary text color (dark mode)"
}
},
"border": {
"subtle": {
"$value": "#e5e7eb",
"$type": "color",
"$description": "Subtle border color (light mode)"
},
"default": {
"$value": "#d1d5db",
"$type": "color",
"$description": "Default border color (light mode)"
},
"strong": {
"$value": "#9ca3af",
"$type": "color",
"$description": "Strong border color (light mode)"
},
"subtle-dark": {
"$value": "#27272a",
"$type": "color",
"$description": "Subtle border color (dark mode)"
},
"default-dark": {
"$value": "#3f3f46",
"$type": "color",
"$description": "Default border color (dark mode)"
},
"strong-dark": {
"$value": "#52525b",
"$type": "color",
"$description": "Strong border color (dark mode)"
}
},
"interactive": {
"link": {
"$value": "#3b82f6",
"$type": "color",
"$description": "Link color (light mode)"
},
"link-hover": {
"$value": "#2563eb",
"$type": "color",
"$description": "Link hover color (light mode)"
},
"link-dark": {
"$value": "#60a5fa",
"$type": "color",
"$description": "Link color (dark mode)"
}
}
},
"font": {
"family": {
"sans": {
"$value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "\"JetBrains Mono\", \"Fira Code\", Consolas, monospace",
"$type": "fontFamily",
"$description": "Monospace font stack for code"
}
},
"size": {
"display-xl": {
"$value": "96px",
"$type": "dimension",
"$description": "Extra large display text"
},
"display-lg": {
"$value": "72px",
"$type": "dimension",
"$description": "Large display text for heroes"
},
"heading-1": {
"$value": "56px",
"$type": "dimension",
"$description": "H1 heading size"
},
"heading-2": {
"$value": "40px",
"$type": "dimension",
"$description": "H2 heading size"
},
"heading-3": {
"$value": "28px",
"$type": "dimension",
"$description": "H3 heading size"
},
"heading-4": {
"$value": "24px",
"$type": "dimension",
"$description": "H4 heading size"
},
"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 body text"
},
"caption": {
"$value": "12px",
"$type": "dimension",
"$description": "Caption and fine print"
}
},
"weight": {
"black": {
"$value": "900",
"$type": "number",
"$description": "Black weight for hero text"
},
"extrabold": {
"$value": "800",
"$type": "number",
"$description": "Extra bold weight"
},
"bold": {
"$value": "700",
"$type": "number",
"$description": "Bold weight for headings"
},
"semibold": {
"$value": "600",
"$type": "number",
"$description": "Semibold weight"
},
"medium": {
"$value": "500",
"$type": "number",
"$description": "Medium weight"
},
"normal": {
"$value": "400",
"$type": "number",
"$description": "Normal weight for body text"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for large 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": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Tight spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Compact spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Small spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default spacing"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Comfortable spacing"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Large spacing"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "Extra large spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Section spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Major section spacing"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero spacing"
}
},
"radius": {
"sm": {
"$value": "6px",
"$type": "dimension",
"$description": "Small radius for buttons and inputs"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Medium radius"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large radius for cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large radius"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full radius for pills and avatars"
}
},
"shadow": {
"xs": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Extra small shadow for subtle elevation"
},
"sm": {
"$value": "0 1px 3px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Small shadow for cards"
},
"md": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Medium shadow for dropdowns"
},
"lg": {
"$value": "0 10px 15px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Large shadow for modals"
},
"xl": {
"$value": "0 20px 25px rgba(0, 0, 0, 0.15)",
"$type": "shadow",
"$description": "Extra large shadow"
}
},
"borderWidth": {
"1": {
"$value": "1px",
"$type": "dimension",
"$description": "Default border width"
},
"2": {
"$value": "2px",
"$type": "dimension",
"$description": "Emphasized border width"
},
"4": {
"$value": "4px",
"$type": "dimension",
"$description": "Strong border width"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Clerk is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.