Foundation

Color — five-layer + on-color

Meaning without relying on hue alone

RequiredVisual system
ContractColor — five-layer + on-color
Job
Meaning without relying on hue alone
Requirement
must specify
States / rules
Primary, secondary, accent, neutral scale (5–11 stops, temperature locked), semantic feedback (success / warning / error / info as their own family), on-color (text/icon on accent). Contrast AA as a design input. Color never the only state signal.
Specified means
Named roles exist; each has light and dark; on-color is specified for every accent surface
Hardest context
White serif on ocher card; color-blind check for status
Example

color.text.on-accent on article cards

Counter-example

“Some greys”; brand green used as success

Shared guidance

Building Blocks role

Building Blocks can provide semantic guidance, examples, and reusable hooks.

Product obligation

The product still maps roles to its own theme and documents exceptions.

How this lives in Building Blocks

Representation: Shared foundation / token / behavior guidance.

Building Blocks should provide shared guidance, semantic roles, examples, and reusable implementation hooks where appropriate. Each product maps those roles to its own theme and documents any justified exceptions.

Stress the semantic layers, not a palette strip.

Neutral scale

Lock 5–11 stops and a temperature; avoid “some greys.”

Semantic feedback

Success, warning, error, and info are their own families; brand accent is not success by default.

On-color

Specify text/icon roles for every accent surface.

Light + dark

Named roles must exist in both appearances.

State independence

Color cannot be the only state signal.

Exercise these contexts
  • White serif on ocher card
  • Color-blind check for status
  • Interactive accent with visible focus on dark

Do not specify the easy case only.

The source checklist’s hardest-context test is part of what “specified” means: White serif on ocher card; color-blind check for status.

On-spec signal

color.text.on-accent on article cards

Failure signal

“Some greys”; brand green used as success

Catalog connection

The product-local Catalog should show this row’s actual state for that product using the Catalog contract. Building Blocks documentation can define the baseline, but it does not make a product’s row Specified, Designed, or In code by itself.

See the Catalog contract →