Foundations

The primitives — colour, typography, spacing, shape, and motion. Everything else composes from these.

Foundations are the values the rest of the system is built from. They are deliberately small in number and fixed: a component may choose which token to use, but it does not invent new ones.


Colour

Three 12-step scales in two modes, their step roles, and the contrast rules that govern them.

Typography

Three typefaces, three jobs, and a fixed type ramp.

Space, shape, and motion

The 4px spacing base, the radius and elevation ladders, and the motion tokens.

Responsive

The four breakpoints, how the 12-column grid collapses, touch-target sizes, and the mobile navigation pattern.