Algorithmic Design Tokens with Zero CSS-in-JS
Color math, typography scale, and responsive spacing derived directly from semantic tokens with strict @layer priority.
OKLCH Relative Color Tokens & Palettes
Derive full WCAG AA/AAA-compliant semantic tokens from a single seed hue
Stepless OKLCH Color Wheel
Real-time token derivation across all surfaces
Stepless Hue Rotation (0° - 360°):Select Semantic Seed Palette:
accent · oklch(0.42 0.12 25)light · 25°dark · oklch(0.74 0.10 25)
WCAG AA Normal: 4.8:1 (Pass ✓)WCAG AAA High: 7.2:1 (Pass ✓)Midnight Contrast: 12.8:1 (Pass ✓)
Theme Modes
Zero Flash of Unstyled Content
Instant base surface switching:
Inter & JetBrains Mono Proportional Hierarchy
Strict optical sizing scale ensuring mathematical vertical rhythm and legibility
Display2.25rem (36px) · Line Height 1.2 · Optical Kerning -0.03em
Heading1.50rem (24px) · Line Height 1.3 · Weight 600
Lead1.15rem (18.4px) · Line Height 1.5 · Weight 400
Body0.95rem (15.2px) · Line Height 1.6 · Weight 400
Monospace0.85rem (13.6px) · JetBrains Mono · Tabular Numbers 1
Spacing Units & Elevation Tokens
4px baseline grid tokens with four distinct surface elevation levels
Elevation Tokens
Surface Depth Levels
Surface::Flat (0px shadow)Surface::Elevated (4px shadow)Surface::Glass (Backdrop blur)Surface::Sunken (Inset shadow)
Spacing Scale
4px Multiplier System
--space-1: 0.25rem (4px)--space-2: 0.50rem (8px)--space-3: 0.75rem (12px)--space-4: 1.00rem (16px)--space-6: 1.50rem (24px)