Tool

Palette

Tune a theme in OKLCH — perceptually uniform, so a lightness slider actually moves lightness. The preview renders real Crucible components with your tokens. Export as CSS, Tailwind v4 tokens, or an installable registry theme.

Tokens

Background

L16.0%C0.008H285°

Foreground

L93.0%C0.012H85°

Primary (molten)

L70.0%C0.190H41°

Accent (ember)

L50.0%C0.190H25°

Tertiary (tempered)

L38.0%C0.180H305°

Shape

R12px

Type

Sans font stackMono font stack

Forged to order

Your tokens, live on real Crucible components.

Filament card

The traveling border cools through your primary, accent, and tertiary stops.

bgfgprimaryaccenttertiary

/* Crucible theme: forge */
:root {
  --background: oklch(97.5% 0.006 85);
  --foreground: oklch(20.0% 0.012 285);
  --primary: oklch(62.0% 0.190 41);
  --accent: oklch(46.0% 0.190 25);
  --tertiary: oklch(42.0% 0.180 305);
  --radius: 12px;
}

.dark {
  --background: oklch(16.0% 0.008 285);
  --foreground: oklch(93.0% 0.012 85);
  --primary: oklch(70.0% 0.190 41);
  --accent: oklch(50.0% 0.190 25);
  --tertiary: oklch(38.0% 0.180 305);
  --radius: 12px;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-accent: var(--accent);
  --color-tertiary: var(--tertiary);
  --radius-lg: var(--radius);
  --font-sans: Geist, sans-serif;
  --font-mono: Geist Mono, monospace;
}