Design Tokens
Centralized values for color, radius, spacing, and motion.
Color System
HSL variables with dark-first contrast. Override via CSS variables.
tokens.css
:root{ --foreground: 220 14% 96%; --background: 220 14% 6%; --border: 220 10% 20%; --primary: 260 90% 64%; }Radius Scale
Smoothed corners aligned to density: sm, md, lg.
tokens.ts
export const radius = { sm: '8px', md: '12px', lg: '20px' }Spacing Scale
Balanced steps mapped to CSS variables for consistency.
tokens.css
:root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px }tokens.ts
export const tokens = { spacing: { 1:'var(--space-1)', 2:'var(--space-2)', 3:'var(--space-3)', 4:'var(--space-4)', 5:'var(--space-5)', 6:'var(--space-6)', 7:'var(--space-7)', 8:'var(--space-8)' } }Motion Durations
Motion-aware defaults exposed via variables.
tokens.css
:root{ --duration-hover:120ms; --duration-press:200ms; --duration-enter:260ms; --duration-exit:220ms }Elevation Levels
Shadow tokens for consistent depth across components.
tokens.css
:root{ --elevation-1:0 1px 2px hsl(var(--foreground)/0.06); --elevation-2:0 4px 12px hsl(var(--foreground)/0.08), 0 2px 6px hsl(var(--foreground)/0.06); --elevation-3:0 10px 24px hsl(var(--foreground)/0.10), 0 4px 14px hsl(var(--foreground)/0.08) }Figma Export
JSON tokens mirroring CSS variables for Figma import.
figma.tokens.json
{ "spacing": { "1": "4", "2": "8", "3": "12", "4": "16", "5": "24", "6": "32", "7": "40", "8": "56" }, "motion": { "hover": "120", "press": "200", "enter": "260", "exit": "220" }, "elevation": { "1": "0 1 2", "2": "0 4 12", "3": "0 10 24" } }Override Safely
Use CSS variables to override tokens; avoid hardcoded colors in components.