How to get started

Choose your role

• For designers

  Find your way around the Figma file, use its colours and sizes, and design a new part the way the system expects.

  arrow_forward

• For developers

  Run the project, use the components, colours and grid in code, and keep the code in step with Figma.

  arrow_forward

• For product owners

  See what the system gives your team, how to read these pages and how to ask for a change.

  arrow_forward

What is in the system

• Principles

  How the system is designed and why.

• Foundations

  Colours, spacing, layout, type and shape.

• Components

  Atoms, molecules, organisms and templates.

• Pages

  Example screens built from the components.

Words used in these pages

Token

A named value, such as a colour or a size. Using the name instead of the value means one change updates everything.

Raw value (primitive)

The actual value, such as the colour #f28b30. Components do not use raw values directly.

Role (semantic token)

A name that says what a value is for, such as “text colour” or “button background”. Components use roles.

Atoms, molecules, organisms

Three sizes of component. Atoms are the smallest parts (a button). Molecules are small groups of atoms (a field with its label). Organisms are bigger sections (a table).

Template and page

A template is a page layout without real content. A page is a template filled with real content.

Grid

Invisible columns that line things up. It has 4 columns on a phone, 8 on a tablet and 12 on a desktop.