Colors

Two layers, like Material 3. Tonal scales are the raw paint. Semantic roles say what a color is for. Components only ever use roles, so you can retheme by remapping roles without touching a single component.

Semantic roles

Every role ships as four tokens: the color, on- (text on it), -container (a soft tint) and on-*-container.

Status

Surfaces

Clay is about depth, so surfaces are defined by elevation, not by color alone. In dark mode raised surfaces get lighter and wells get darker, so depth still reads.

Usage

Pick a role with color, and an emphasis with variant.

<Button color="primary">Save</Button>
<Button variant="soft" color="danger">Delete</Button>
<Badge variant="soft" color="success">Live</Badge>

{/* Or straight from Tailwind */}
<div className="bg-primary-container text-on-primary-container" />

Tonal scales

Generated in OKLCH by scripts/palette.mjs. The brand hex is pinned to its step (marked ●) and the rest is interpolated, so scales stay perceptually even. Use them as bg-coral-200 etc.

Contrast

Every pair is checked by scripts/contrast.mjs against WCAG 2. Light and dark themes are both audited. One deliberate call: text on coral is dark clay, because white on our coral is only 2.95:1.