Foundations

Color

Never reference the palette directly in product code. Use a semantic role — roles can be re-pointed when a surface changes; raw hex values cannot. Each swatch says which value its role points at. For which role a job needs, see Which token do I use?

Surfaces

Text on every surface it can land on

The lightest permitted text color on a light surface is text-secondary. It clears 4.5:1 even on the sunken surface.

Actions

Label contrast is measured against the button's own fill. For the boundary, what matters is the fill against the page — except for warning, whose fill is only 2.44:1 against the page, so its border carries the boundary and has to clear 3:1 on its own.

Status

Each status also has a tint and an edge, for messages and banners. Message text stays primary on every tint.

Selected and hover

One selected look in two tiers — strong where the state is the content, soft where one option is chosen among neutral controls — and one translucent hover that works on any surface, sunken included.

Borders

Dark chrome

Wrap a subtree in .ia-inverse and the text, border and focus tokens re-point themselves.

Palette

The raw ramp, for reference.

Legacy

Live values no role points at, kept so a live name can still be traced. Never in new code; each is deleted once nothing on the live site declares it.

Typography

html { font-size: 62.5% }, so 1rem = 10px. Every value below assumes that.

Type roles

Heading level is document structure. Heading appearance is a role class. Deciding them separately is what fixes the page with 32 <h1> elements.

Scale

Weights

Line heights

Spacing

5px base — the scale the live CSS already clusters on.

--ia-space-page-block, above and below the page content, is 80px and halves itself below md.

Radius

Five values replace the fourteen measured live. A flush edge is 0, not a token.

Elevation

Four translucent shadows, all straight down, each named for its job. Opaque offset shadows are retired.

Motion

Hover a swatch to see it move. Everything here is disabled under prefers-reduced-motion: reduce.

Press

Press and hold. The scale is tiered by width, so each edge travels about the same distance.

Layout

Breakpoints

Four replace the 30 distinct pixel breakpoints measured live. Media queries can't read custom properties, so write the literal and cite the token in a comment.

Containers

Layering

Sizing

Every token

All custom properties defined by tokens/tokens.json, as declared and as resolved. Inside an element they are read as private aliases, e.g. var(--ia-color-text-primary--), and the --ia-theme-* hooks in src/themes/theme-styles.ts still override them, so existing consumers keep working (D-01).