Foundations

Colour, elevation, type, space and icons. Everything a component is made of, and the measurements that decided each value — light and dark, side by side.

In this section

  • Colour

    Ten families of eleven stops, one lightness per stop, and the semantic layer over them.

  • Data visualisation

    Six categories, a sequential ramp and a diverging one, each step measured on the canvas and on a card.

  • Elevation and states

    Three surface levels in dark, shadows that stop working, and the wash that replaced the fill.

  • AaInter

    Typography

    13 text styles in one family, from the page title down to 11px.

  • Space and shape

    Spacing on an 8px base, ten radii, and the capsule that every button takes.

  • Density

    Five tokens, comfortable and compact, chosen with data-density on any element.

  • Breakpoints and layout

    Tailwind's five and xs, and a margin and gap that step up at lg and xl.

  • Icons

    IBM Carbon, installed by the consumer, plus fifteen drawn for this system.