Live Visual Design Token Customizer & CSS Exporter
Customize palettes, typography, spacing, and density with instantaneous CSS token generation.
Brand Color PaletteINDIGO
Layout DensityCOMFY
Corner RadiusSMOOTH (12px)
Color EngineOKLCH 1-Seed
Brand Color & OKLCH 1-Seed Palette
Select primary accent hue automatically expanded to wide-gamut P3 shades
Native light-dark() CSS variablesZero CSS-in-JS Runtime OverheadDeterministic Contrast Ratio (WCAG AAA)
Density Scale & Geometry
Adjust component sizing, row height, and spacing tokens for compact vs airy views
Instant CSS :root Token Export
Copy-paste these tokens directly into your app.css or layout stylesheet
Generated CSS Variables
:root {
--brand: #4f46e5;
--brand-glow: rgba(79, 70, 229, 0.35);
--density: 1.0;
--radius: 12px;
--card-bg: light-dark(#ffffff, #0d1527);
--card-border: light-dark(#e2e8f0, rgba(255, 255, 255, 0.08));
}