Theme playground

Drag sliders and pick colors — every preview updates in real time. Copy the generated :root block when you're done.

Tokens map to the same CSS variables documented in the theming guide. Presets give you a starting point; Reset restores Yami defaults for this session.

Brand & badges

yami-primaryyami-secondary

Revenue

$12.4k

+12%

Users

2,847

+3%

Churn

1.2%

-0.4%

Glow utilities

yami-glow

Pulsing box-shadow between glow tokens.

yami-glow-soft

Softer pulse — adjust speed with Glow pulse speed.

Chat input spotlight border — rotate speed controls the sweep.

Surface & radius

Card

Corner radius updates live via --radius.

Motion

Design

Build

Ship

Iterate

Polish

Generated CSS

:root {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
  --color-yami-primary: #22c55e;
  --color-yami-secondary: #3b82f6;
  --brand-glow-primary-mix: 14%;
  --brand-glow-secondary-mix: 8%;
  --brand-glow-blur: 5rem;
  --font-sans: "Yami Sans", system-ui, -apple-system, sans-serif;
  --font-heading: "Yami Heading", system-ui, -apple-system, sans-serif;
  --font-mono: "Yami Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --label-font-size: 0.75rem;
  --kicker-font-size: 0.6875rem;
  --body-font-size: 1rem;
  --display-hero: clamp(2.8rem, 8vw, 6.5rem);
  --display-section: clamp(2rem, 4vw, 3.2rem);
  --stat-value: clamp(1.75rem, 4vw, 3rem);
  --label-weight: 500;
  --label-tracking: normal;
  --label-transform: none;
  --radius: 0.625rem;
  --ring-width: 3px;
  --overlay-scrim: oklch(0.141 0.005 285.823 / 60%);
  --text-2xs: 0.625rem;
  --btn-radius: 0.625rem;
  --btn-height: 2.25rem;
  --card-radius: 0.875rem;
  --card-padding-y: 1.5rem;
  --input-height: 2.25rem;
  --badge-radius: pill;
  --yami-glow-from: #10b981;
  --void-glow-from: #10b981;
  --yami-glow-to: #3b82f6;
  --void-glow-to: #3b82f6;
  --yami-glow-pulse-speed: 3s;
  --yami-glow-speed: 4s;
  --void-duration-fast: 0.25;
  --void-duration-md: 0.6;
  --void-duration-slow: 0.8;
  --void-stagger-tight: 0.04;
  --void-stagger-md: 0.08;
  --void-offset-sm: 8px;
  --void-offset-md: 24px;
  --void-offset-lg: 48px;
  --void-lane-height: 180vh;
  --void-lane-sticky-top: 12vh;
  --void-marquee-duration: 30s;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  font-size: 1rem;
}