AI token editor
Edit Linear 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": {
"primary": {
"$type": "color",
"$value": "#09090B",
"$description": "Main app background, darkest surface"
},
"secondary": {
"$type": "color",
"$value": "#18181B",
"$description": "Elevated surfaces, cards, modals"
},
"tertiary": {
"$type": "color",
"$value": "#27272A",
"$description": "Subtle backgrounds, hover states"
},
"hover": {
"$type": "color",
"$value": "#3F3F46",
"$description": "Hover state background"
}
},
"border": {
"primary": {
"$type": "color",
"$value": "#27272A",
"$description": "Default borders and dividers"
},
"secondary": {
"$type": "color",
"$value": "#3F3F46",
"$description": "Hover borders, focus rings"
},
"tertiary": {
"$type": "color",
"$value": "#52525B",
"$description": "Subtle borders"
}
},
"text": {
"primary": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "Primary text, headings"
},
"secondary": {
"$type": "color",
"$value": "#A1A1AA",
"$description": "Secondary text, descriptions"
},
"tertiary": {
"$type": "color",
"$value": "#71717A",
"$description": "Tertiary text, muted content"
},
"quaternary": {
"$type": "color",
"$value": "#52525B",
"$description": "Disabled text, placeholders"
}
},
"accent": {
"primary": {
"$type": "color",
"$value": "#5E6AD2",
"$description": "Primary accent color for interactive elements"
},
"hover": {
"$type": "color",
"$value": "#6E7AE2",
"$description": "Accent hover state"
},
"active": {
"$type": "color",
"$value": "#4E5AC2",
"$description": "Accent active/pressed state"
}
},
"semantic": {
"success": {
"$type": "color",
"$value": "#10B981",
"$description": "Success states, positive actions"
},
"warning": {
"$type": "color",
"$value": "#F59E0B",
"$description": "Warning states, caution"
},
"error": {
"$type": "color",
"$value": "#EF4444",
"$description": "Error states, destructive actions"
},
"info": {
"$type": "color",
"$value": "#3B82F6",
"$description": "Informational states"
}
}
},
"font": {
"family": {
"sans": {
"$type": "fontFamily",
"$value": "\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif",
"$description": "Primary sans-serif font for UI"
},
"serif": {
"$type": "fontFamily",
"$value": "\"ABC Favorit\", \"Times New Roman\", serif",
"$description": "Serif font for large display headings"
},
"mono": {
"$type": "fontFamily",
"$value": "\"SF Mono\", \"Monaco\", \"Cascadia Code\", monospace",
"$description": "Monospace font for code"
}
},
"size": {
"xs": {
"$type": "dimension",
"$value": "12px",
"$description": "Extra small text"
},
"sm": {
"$type": "dimension",
"$value": "14px",
"$description": "Small text, most UI elements"
},
"base": {
"$type": "dimension",
"$value": "16px",
"$description": "Base body text"
},
"lg": {
"$type": "dimension",
"$value": "18px",
"$description": "Large body text"
},
"xl": {
"$type": "dimension",
"$value": "20px",
"$description": "Extra large, small headings"
},
"2xl": {
"$type": "dimension",
"$value": "24px",
"$description": "Section headings"
},
"3xl": {
"$type": "dimension",
"$value": "30px",
"$description": "Page headings"
},
"4xl": {
"$type": "dimension",
"$value": "36px",
"$description": "Large headings"
},
"5xl": {
"$type": "dimension",
"$value": "48px",
"$description": "Hero headings"
},
"6xl": {
"$type": "dimension",
"$value": "60px",
"$description": "Display headings"
},
"7xl": {
"$type": "dimension",
"$value": "72px",
"$description": "Large display headings"
},
"8xl": {
"$type": "dimension",
"$value": "96px",
"$description": "Extra large display"
}
},
"weight": {
"normal": {
"$type": "number",
"$value": 400,
"$description": "Normal weight"
},
"medium": {
"$type": "number",
"$value": 500,
"$description": "Medium weight"
},
"semibold": {
"$type": "number",
"$value": 600,
"$description": "Semibold weight"
},
"bold": {
"$type": "number",
"$value": 700,
"$description": "Bold weight"
}
},
"lineHeight": {
"xs": {
"$type": "dimension",
"$value": "16px",
"$description": "Line height for extra small text"
},
"sm": {
"$type": "dimension",
"$value": "20px",
"$description": "Line height for small text"
},
"base": {
"$type": "dimension",
"$value": "24px",
"$description": "Line height for base text"
},
"lg": {
"$type": "dimension",
"$value": "28px",
"$description": "Line height for large text"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "4px",
"$description": "Base spacing unit"
},
"2": {
"$type": "dimension",
"$value": "8px",
"$description": "2x base unit"
},
"3": {
"$type": "dimension",
"$value": "12px",
"$description": "3x base unit"
},
"4": {
"$type": "dimension",
"$value": "16px",
"$description": "4x base unit"
},
"6": {
"$type": "dimension",
"$value": "24px",
"$description": "6x base unit"
},
"8": {
"$type": "dimension",
"$value": "32px",
"$description": "8x base unit"
},
"12": {
"$type": "dimension",
"$value": "48px",
"$description": "12x base unit"
},
"16": {
"$type": "dimension",
"$value": "64px",
"$description": "16x base unit"
},
"24": {
"$type": "dimension",
"$value": "96px",
"$description": "24x base unit"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "4px",
"$description": "Small border radius"
},
"md": {
"$type": "dimension",
"$value": "6px",
"$description": "Medium border radius"
},
"lg": {
"$type": "dimension",
"$value": "8px",
"$description": "Large border radius"
},
"xl": {
"$type": "dimension",
"$value": "12px",
"$description": "Extra large border radius"
},
"2xl": {
"$type": "dimension",
"$value": "16px",
"$description": "2XL border radius"
},
"full": {
"$type": "dimension",
"$value": "9999px",
"$description": "Fully rounded"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
"$description": "Small shadow"
},
"md": {
"$type": "shadow",
"$value": "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
"$description": "Medium shadow"
},
"lg": {
"$type": "shadow",
"$value": "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
"$description": "Large shadow"
},
"xl": {
"$type": "shadow",
"$value": "0 20px 25px -5px rgba(0, 0, 0, 0.6)",
"$description": "Extra large shadow"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Linear is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.