kit/tokens

Colors

The semantic palette, authored in OKLCH in kit/src/tokens/tokens.ts and generated into the shared token CSS (edit the TS source, run the build script — never the CSS). Each row shows the literal light and dark values; the runtime theme presets override these per-user in the product app.

Surfaces

--backgroundoklch(0.9459 0.0029 264.5417)

--cardoklch(0.9903 0.0011 197.1409)

--popoveroklch(0.9903 0.0011 197.1409)

--mutedoklch(0.93 0.0035 247.8605)

--secondaryoklch(0.9179 0.0035 247.8611)

--sidebaroklch(0.924 0.0035 247.8608)

Content

--foregroundoklch(0.2295 0.0049 248.0421)

--card-foregroundoklch(0.2295 0.0049 248.0421)

--muted-foregroundoklch(0.4964 0.0155 251.6869)

--secondary-foregroundoklch(0.2672 0.0086 255.5801)

--sidebar-foregroundoklch(0.2672 0.0086 255.5801)

Brand & state

--primaryoklch(0.572 0.1561 254.537)

--primary-foregroundoklch(1 0 0)

--accentoklch(0.9005 0.0342 253.7151)

--accent-foregroundoklch(0.3213 0.0746 253.397)

--destructiveoklch(0.5433 0.174 29.6967)

--destructive-foregroundoklch(1 0 0)

--ringoklch(0.572 0.1561 254.537)

Lines & inputs

--borderoklch(0.8347 0.0065 255.4813)

--inputoklch(1 0 0)

--sidebar-borderoklch(0.8347 0.0065 255.4813)

Charts

--chart-1oklch(0.572 0.1561 254.537)

--chart-2oklch(0.4859 0.1347 254.8308)

--chart-3oklch(0.4964 0.0155 251.6869)

--chart-4oklch(0.67 0.0143 251.6172)

--chart-5oklch(0.5692 0.1377 38.1752)

kit/tokens

Derived tokens

Interaction tokens computed once with color-mix(in oklch, …) — they re-resolve under .dark and under any runtime preset because they reference the base variables. Prefer these over ad-hoc opacity suffixes (bg-primary/90) for hover and emphasis states.

--primary-hovercolor-mix(in oklch, var(--primary) 85%, white)

--primary-activecolor-mix(in oklch, var(--primary) 85%, black)

--border-strongcolor-mix(in oklch, var(--border), var(--foreground) 25%)

kit/tokens

Foil

The metallic 'chrome' surface language: gradient, border, and raised-shadow recipes shared by web's zo-foil.css (foil button/badges) and www's zo.css (foil banner, editorial metallic headers, mockup chrome). Mode-aware — each token flips to its dark recipe under .dark, so consumers never author their own dark overrides for these properties.

--foil-metal

--foil-metal-soft

--foil-gold

kit/tokens

Radius

One multiplicative scale off --radius (0.2rem). Pills use rounded-pill — never rounded-full — so sharp-corner themes (--radius: 0) stay sharp; corner variants (rounded-t-pill, …) come from the same scale.

sm

radius × 0.5

md

radius × 0.75

lg

radius × 1

xl

radius × 1.5

2xl

radius × 2

pill

radius × 4

kit/tokens

Shadows

The elevation scale. Static values live in the token source; the product app's theme editor recomputes them from shadow knobs at runtime.

--shadow-2xs

--shadow-xs

--shadow-sm

--shadow

--shadow-md

--shadow-lg

--shadow-xl

--shadow-2xl