Page Loading

Design system foundations

These elements cross the whole design system and define how we build pages.

Explore our design system foundations

  • Typography

    Explore fonts, font sizes, line heights and more.

  • Colours

    Each site uses a different colour palette, which defines the colours we use for things like headers, buttons, panel backgrounds and more. 

  • Using modifiers

    Modifiers help to drive the design system's flexibility by helping content editors adjust and improve layouts. 

  • Using content headers and footers

    Content headers and footers help content editors add components outside the main page content.