Colors

Neutral surfaces with color reserved for status and data.

The palette is shadcn/ui neutral in OKLCH. Each swatch shows the light value on the left and the dark value on the right. Click a swatch to copy its var().

Surfaces

The canvas and the layers that sit on it.

Interactive

Primary actions, secondary actions, and quiet hover states.

Lines

Borders, input outlines, and focus rings. --border-strong is for rules that need to hold up next to a --muted fill.

Status

The only hues in the interface. Use them for meaning, never decoration.

Charts

A five-step neutral ramp, darkest first in light mode and lightest first in dark mode, so the first series always has the most contrast. See Charts.

Pairings

Every surface token has a matching foreground. Use them together.

Aa — The quick brown fox--background / --foreground
Aa — The quick brown fox--card / --card-foreground
Aa — The quick brown fox--primary / --primary-foreground
Aa — The quick brown fox--secondary / --secondary-foreground
Aa — The quick brown fox--muted / --muted-foreground
Aa — The quick brown fox--accent / --accent-foreground

Usage

<div className="rounded-xl border bg-card text-card-foreground">
  <p className="text-muted-foreground">Secondary text</p>
  <span className="text-success">Shipped</span>
</div>
  • Do use the semantic utilities (bg-card, text-muted-foreground), not raw palette classes like bg-neutral-900.
  • Do pair every surface with its foreground token.
  • Don't use status colors for emphasis or decoration.
  • Don't add gradients.

Foundations

A monochrome workshop. Neutral surfaces, hairline rules, tight geometric type.

Typography

DM Sans for display, SF Pro for everything else, Menlo for numbers.

On this page

SurfacesInteractiveLinesStatusChartsSidebarPairingsUsage