Color

Interfaces stay neutral: white and soft gray surfaces, hairline borders and black actions. Color is saved for data, where it carries meaning. Every value is OKLCH.

Neutral scale

Cards sit on neutral-100 surfaces with white inner tiles. Dark mode swaps to neutral-900.

neutral-50
neutral-100· Surfaces
neutral-200· Tracks
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900· Dark surfaces
neutral-950

Semantic tokens

shadcn-compatible CSS variables. Components only reference these, so a theme is a handful of overrides.

--background

Light
Dark

--foreground

Light
Dark

--card

Light
Dark

--primary

Light
Dark

--primary-foreground

Light
Dark

--secondary

Light
Dark

--muted

Light
Dark

--muted-foreground

Light
Dark

--accent

Light
Dark

--border

Light
Dark

--input

Light
Dark

--ring

Light
Dark

--destructive

Light
Dark

Chart palette

Charts and badges use a small set of saturated hues so series stay distinct against gray surfaces.

teal-400
violet-500
pink-400
blue-500
purple-400
lime-200
red-100

Chart tokens

--chart-1 to --chart-5 for shadcn chart compatibility. They change between light and dark.

--chart-1

Light
Dark

--chart-2

Light
Dark

--chart-3

Light
Dark

--chart-4

Light
Dark

--chart-5

Light
Dark