Colors

Semantic tokens say what a color is for; palettes say what it is. Components only use semantic tokens, so switching preset or mode recolors everything.

Semantic tokens

Live values for the preset and mode picked in the header. Names match shadcn/ui, so shadcn components use them as-is.

Surfaces

Actions

Status

Lines & brand

Charts

usage

/* CSS */           color: var(--muted-foreground);
/* Tailwind */      <p class="text-muted-foreground bg-card border-border">
/* With opacity */  bg-primary/10   or   color-mix(in oklab, var(--primary) 10%, transparent)

Eleven 11-step ramps generated in OKLCH, so a given step has the same perceived lightness in every hue. Steps 600+ carry white text and 400 and below carry dark text at AA. Click a step to copy its hex.

Ash

ashTrue gray. The quietest neutral.

Ink

inkCool, slightly blue neutral. Crisp product UIs.

Sand

sandWarm neutral with a paper feel. Editorial and lifestyle.

Bloom

bloomWallflower pink. The signature brand hue.

Ember

emberRed-orange. Destructive states and warm accents.

Marigold

marigoldAmber-gold. Warnings, highlights, sunsets.

Moss

mossNatural green. Success states and earthy brands.

Lagoon

lagoonTeal-cyan. Calm, technical, fresh.

Azure

azureClear blue. Links, info states, trust.

Iris

irisViolet. Creative tools and night modes.

Plum

plumMagenta-purple. Bold, playful accents.