Tokens

Our design tokens are the foundation of our design system. They are the building blocks of our components and are used to create a consistent look and feel across all of our products.

• Border

  Guidelines for using borders across the Design System.

• Breakpoints

  Breakpoints are a set of predefined viewport widths that can be used to change the layout of a webpage to ensure it accommodates different devices.

• Colour

  How to use colour to design consistent, purposeful, and accessible products.

• Elevation

  A set of predefined tokens which are used to establish a sense of depth and perspective.

• Max width

  Used to set the maximum width of elements and containers in a page layout.

• Spacing

  Space is the distance between interface elements. It can affect grouping, visual hierarchy, and aesthetics.

• Typography

  A set of predefined text styles to ensure text is consistent and legible.