Foundations · Color

Color

OKLCH tokens. The primary pair is sourced from vois-tokens; every other swatch fills a documented gap and is illustrative, not canonical (see design-previews/README.md).

60 / 30 / 10 distribution (DS-COLOR-004)

Neutral surfaces carry the screen (60%), a muted secondary tone provides structure (30%), primary is reserved for the one or two things that matter (10%).

Neutrals

--color-background

oklch(1 0 0)

--color-surface

oklch(0.985 0 0)

--color-muted

oklch(0.97 0 0)

--color-border

oklch(0.922 0 0)

--color-foreground

oklch(0.145 0 0)

--color-muted-foreground

oklch(0.556 0 0)

Secondary

--color-secondary

--color-secondary-foreground

Primary / accent (sourced)

--color-primary

oklch(0.637 0.237 259.4)

--color-accent

--color-ring

Semantic

--color-destructive

--color-success

--color-warning

On a card (--shadow-border, not a stroke)

Vois uses a layered box-shadow instead of a solid 1px border for surface edges — softer separation at low elevation.

Example surface

Quiet, correct default

This card uses --shadow-border, not border-color.