Foundations

Design tokens and primitives that everything else builds on.

• Border radius

  The radius scale from sharp to circle.

• Breakpoints

  The two breakpoints used to switch between mobile, tablet and desktop layouts.

• Colours

  Brand, foreground, background, neutrals, grays and accent palettes.

• Colour scheme

  How light and dark modes are handled via light-dark() and prefers-color-scheme.

• Elevation

  Shadow scale and when to lift surfaces.

• Focus and outline

  Focus rings, outline tokens and keyboard accessibility.

• Sizing and spacing

  The pad scale, borders, radii, outlines and shadows.

• Layout

  The named grid regions — content, popout, full-width — plus layout primitives.

• Motion

  Transitions, scroll-driven animations and reduced-motion handling.

• Typography

  Typefaces, font-size scale, headings, text formatting, code and keyboard input.

• Z-index

  The named z-index scale used across the site.