Theme studio

Shape a theme. See it live.

Generate a complete semantic theme from a pair of colors, preview it against real Lumen primitives, and export production-ready CSS, Figma variables, or JSON.

Start building Read theme guide

Interactive workbench

Build, preview, and export

Adjust generated or manual colors on the left. The preview and export stay in sync as you refine the system.

Inputs

Build tokens

Brand hue

Accent hue

Preview scheme

Live preview

Representative primitives

The preview reads generated tokens from this scoped container.

Workspace owner

Accessibility checksToken sync

Readiness86%

canvassurfacesurface-mutedsurface-stronglineinkink-softink-mutedbrandbrand-solidbrand-softon-brandaccentsuccesswarningdangeron-dangerglass-bgglass-bg-subtleglass-bg-strongglass-borderglass-highlightglass-edgeglass-edge-softglass-shadeglass-refraction

Export

Copy tokens

Format

:root {
  color-scheme: light;
  --canvas: 264 20% 99%;
  --surface: 264 20% 100%;
  --surface-muted: 264 16% 96%;
  --surface-strong: 264 14% 91%;
  --line: 264 14% 86%;
  --ink: 264 40% 11%;
  --ink-soft: 264 14% 32%;
  --ink-muted: 264 10% 48%;
  --brand: 264 85% 53%;
  --brand-solid: 264 85% 45%;
  --brand-soft: 264 90% 96%;
  --on-brand: 0 0% 100%;
  --accent: 54 70% 40%;
  --success: 142 71% 36%;
  --warning: 38 92% 50%;
  --danger: 0 84% 60%;
  --on-danger: 0 0% 0%;
  --glass-bg: 0 0% 100% / 0.55;
  --glass-bg-subtle: 0 0% 100% / 0.38;
  --glass-bg-strong: 0 0% 100% / 0.72;
  --glass-border: 264 30% 100% / 0.55;
  --glass-highlight: 0 0% 100% / 0.85;
  --glass-blur: 22px;
  --glass-saturate: 1.7;
  --glass-brightness: 1.05;
  --glass-edge: 0 0% 100% / 0.9;
  --glass-edge-soft: 0 0% 100% / 0.34;
  --glass-shade: 264 47% 11% / 0.07;
  --glass-refraction: 264 83% 53% / 0.08;
  --glass-shadow: 0 1px 2px hsl(264 47% 11% / 0.08), 0 12px 32px hsl(264 47% 11% / 0.12), 0 32px 80px hsl(264 47% 11% / 0.14);
  --ui-radius-sm: 0.375rem;
  --ui-radius: 0.625rem;
  --ui-radius-lg: 0.75rem;
  --ui-shadow-sm: 0 1px 2px hsl(264 47% 11% / 0.06);
  --ui-shadow-md: 0 8px 24px hsl(264 47% 11% / 0.08);
  --ui-shadow-lg: 0 24px 64px hsl(264 47% 11% / 0.14);
  --ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --ui-duration-fast: 120ms;
  --ui-duration: 160ms;
  --ui-duration-slow: 300ms;
  --ui-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
}

Search Lumen