Color

Prism color is built in layers, so a product can change its entire look by touching one of them.

Interactive explorer

The swatch grid below reads its values directly from tokens/colors.css — both the oklch source and a computed hex — so nothing here is hand-typed or able to drift. Click a tile to copy the token name; shift-click to copy the value. The semantic-role swatches re-resolve live as you change the theme and signature in the control bar, and each carries an AA contrast badge.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

Ramps

The base layer is a set of perceptually even ramps defined in oklch, each running from 50 (lightest) to 900 (darkest). Cobalt is the default brand hue; its 500 step (oklch(0.470 0.320 264), roughly #0022ee) is the primary action color. Working in oklch keeps steps visually consistent across hues — a 600 reads as the same "weight" whether it is cobalt or green.

Brand layer

--brand-50 through --brand-900 are aliases that point at a ramp. By default they map to cobalt. Remap them — at :root or any scope — and every component that references brand re-skins at once. This single indirection is what lets six products share one component library.

Semantic roles

Components never reference a ramp step directly. They reference a role:

--accent, --accent-hover, --accent-active — the primary action.
--text-primary, --text-secondary, --text-tertiary, --text-disabled — text on surfaces.
--surface-page, --surface-card, --surface-inverse — backgrounds.
--border-subtle, --border-default, --border-strong — separators.
--positive, --notice, --negative — semantic status. Reserve these for genuine confirm, caution and destructive meaning; they are not decoration.
--focus-ring — the single most important affordance; never restyle it away.

Because roles sit between components and ramps, dark mode and product signatures only have to redefine roles, not rewrite components.

Dark mode

[data-theme="dark"] re-declares the full role set against a near-black base, with surfaces lifted a few lightness points off the background so elevation and shadows still read. Components do nothing special for dark mode — they inherit the redefined roles. Toggle the theme in the explorer above to see it.

Contrast

Role pairings are chosen to clear WCAG AA at the sizes they are used. When you compose your own pairing, check it. The accent-on-surface and text-on-surface combinations that ship are safe; novel combinations are your responsibility.