Edit a theme and validate it against real product surfaces.
Start from a preset, tune core tokens for light and dark mode, then use the preview and export flow as the handoff point for production projects.
Theme controls
Edit core tokens, preview them on product surfaces, and keep the active theme ready for export.
Base theme
Local theme snapshots
Save the current light/dark draft and reload it later for export or more editing.
Mode
Linked generation
Generate related surface, foreground, ring, sidebar, and chart tokens from the active mode.
Utility Neutral
Ship a polished product surface without starting from blank UI.
Use this preview to test whether color, typography, density, and component hierarchy work together before exporting the theme.
AI app
Prompt workspace
Input, generation controls, and result hierarchy.
Dashboard
Launch readiness
Signals, scores, and checklist states.
Visual consistency82%
x
3 component states need contrast review before export.
Contrast checks
Basic WCAG-style checks for foreground and background token pairs in the active `light` mode.
Page textPass
Aa Product surface
background / foreground17.94:1
Card textPass
Aa Product surface
card / card-foreground18.45:1
Primary buttonReview
Aa Product surface
primary / primary-foreground4.36:1
Suggested foreground4.62:1
oklch(1 0 0)Secondary surfacePass
Aa Product surface
secondary / secondary-foreground14.97:1
Muted copyPass
Aa Product surface
muted / muted-foreground5.64:1
Accent surfacePass
Aa Product surface
accent / accent-foreground14.02:1
Sidebar textPass
Aa Product surface
sidebar / sidebar-foreground17.43:1
Current mode variables
These are the active `light` tokens. Copy mode CSS is useful when you only need the current preview surface.
:root {
--background: oklch(0.99 0.006 95);
--foreground: oklch(0.19 0.02 250);
--card: oklch(1 0 0);
--card-foreground: oklch(0.19 0.02 250);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.19 0.02 250);
--primary: oklch(0.52 0.16 190);
--primary-foreground: oklch(0.98 0.01 95);
--secondary: oklch(0.95 0.03 95);
--secondary-foreground: oklch(0.22 0.03 250);
--muted: oklch(0.95 0.02 95);
--muted-foreground: oklch(0.48 0.03 250);
--accent: oklch(0.91 0.07 160);
--accent-foreground: oklch(0.2 0.04 190);
--destructive: oklch(0.58 0.22 25);
--border: oklch(0.88 0.02 95);
--input: oklch(0.88 0.02 95);
--ring: oklch(0.52 0.16 190);
--chart-1: oklch(0.72 0.14 190);
--chart-2: oklch(0.62 0.1 155);
--chart-3: oklch(0.68 0.12 85);
--chart-4: oklch(0.56 0.12 250);
--chart-5: oklch(0.58 0.16 25);
--radius: 0.5rem;
--sidebar: oklch(0.98 0.01 95);
--sidebar-foreground: oklch(0.19 0.02 250);
--sidebar-primary: oklch(0.52 0.16 190);
--sidebar-primary-foreground: oklch(0.98 0.01 95);
--sidebar-accent: oklch(0.95 0.03 95);
--sidebar-accent-foreground: oklch(0.22 0.03 250);
--sidebar-border: oklch(0.88 0.02 95);
--sidebar-ring: oklch(0.52 0.16 190);
--font-ui: var(--font-inter), Arial, Helvetica, sans-serif;
--font-heading: var(--font-inter), Arial, Helvetica, sans-serif;
--font-code: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
--font-number: var(--font-geist-mono), "SFMono-Regular", Consolas, monospace;
--type-heading-weight: 650;
--type-body-leading: 1.5;
--type-label-transform: none;
--type-label-weight: 500;
}