System

Marketing · Web

Color tokens

Six surfaces and the roles each one hands down. Components consume surfaces; they never reach past them to a palette color. Brand · Color owns the primitives underneath.

Three tiers, one direction

Values only ever flow downward. A component reading a primitive directly has skipped a tier, and that is the bug the tiering exists to catch.

Tier 1 · brand.cssPrimitives

Six colors and five per-surface muted tokens. The only literal hex values in the system.

→

Tier 2 · marketing.cssSurfaces

Each surface binds a ground to the text, muted, accent, and line that clear AA on it.

→

Tier 3 · componentsComponents

Read --on-ground* only. No component names a palette color for text.

The six surfaces

Applying a surface class is the whole action. Everything inside inherits a set of AA-verified roles.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-navy --navy

The default band. Hero, practice grid, footer.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-deep blue 11% over navy

Trust strip and any band that must sit next to navy without a hard edge.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-blue blue 84% over navy

One band per page at most. Quotes and emphasis.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-cream --cream

The light break. Service lists, forms, long reading.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-yellow --yellow

Rare. A single band that must stop the scroll.

Section label Heading with an accent

Secondary copy at the muted role for this ground.

.surface-white --white

Documentation and utility pages.

Choosing a surface

Bands alternate to give the page rhythm, but the sequence is not decorative — it tracks how hard the visitor is being asked to read.

The section asks the visitor to…	Surface
Arrive and orient	Navy
Scan a few facts	Deep
Read at length	Cream
Absorb one statement	Blue
Act right now	Yellow

Two hard limits. No more than one yellow band per page — scarcity is what makes yellow read as a call. And never place two light surfaces back to back; the rhythm collapses and the page reads as one undifferentiated block.

Documentation-viewer roles

These pages need chrome the marketing site does not have. They map onto the same primitives, and swap under [data-theme="dark"].

Token	Light	Dark
`--bg`	White	Navy
`--surface`	Cream	Deep
`--text`	Navy	White
`--text-muted`	`--muted-on-white`	`--muted-on-navy`
`--accent`	Blue	Yellow

The app bar does not swap. It is navy in both modes, so its roles are fixed rather than mode-dependent — and its accent is yellow, because blue on navy would fail AA. That is why --appbar-accent exists as its own token instead of reusing --accent.