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

Appearance preset

Studio takes its neutral palette from PostLens. Use Manual to customize a preset's action colors. Glass stays an explicit component choice.

Corner radius multiplier

Spacing multiplier

Border width in pixels

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

Photo workspace

Illustrative example

Try selection, ordering, comparison and inspection. Adjustments apply a local illustrative treatment; preview preparation uploads no media.

Loading the interactive Studio workspace…

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);
  --ui-border-width: 1px;
  --ui-space-zero: 0rem;
  --ui-space-xs: 0.25rem;
  --ui-space-sm: 0.5rem;
  --ui-space-md: 0.75rem;
  --ui-space-lg: 1rem;
  --ui-space-xl: 1.5rem;
  --ui-space-2xl: 2rem;
  --ui-space-3xl: 3rem;
}

Search Lumen