Getting Started
How to use
This documentation covers everything available in the design system — from visual foundations to ready-to-use components. Use this page as your starting point.
How the content is organised
The design system is divided into three areas, accessible from the sidebar navigation.
Foundation
The building blocks of the visual language — colour, typography, spacing, border, elevation, and design tokens. These inform every decision made at the component level.
Components
Individual UI elements such as buttons, inputs, and badges. Each component page includes usage guidance, variants, and properties. The Assets section — accessible from the sidebar — provides downloadable PNG files such as illustrations and UI imagery.
Modules
Larger, opinionated compositions built from components — things like navigation bars, hero sections, or cards. Modules address a specific layout or interaction pattern.
Foundation
Start here before working with components. Understanding the foundation ensures your work stays consistent with the rest of the system.
Browse the full colour palette including primitives and semantic tokens. Semantic tokens carry intent — for example, a surface token describes where something sits in the visual hierarchy, not just what colour it is. Use semantic tokens in your implementations wherever possible.
Test any two colour tokens against the WCAG 2.2 AA standard (4.5:1 minimum contrast ratio). If a combination fails, the tool suggests the closest passing alternatives from the same token family — preserving either the background or the text colour depending on what you lock.
Type styles used across the system, covering font size, line height, weight, and letter spacing. Applying these styles directly — rather than setting raw values — keeps text hierarchy coherent across the product.
The spacing scale defines consistent gaps, padding, and layout rhythm. Spacing values are derived from the token system and should be referenced by name rather than hard-coded pixel values.
Border widths and corner radius values used throughout the system. Consistent corner radius reinforces the visual character of the design language.
Shadow and elevation levels that communicate depth and layering. Higher elevation values are reserved for elements that appear above the page surface, such as modals and dropdown menus.
The icon library available in the system. Icons can be searched by name. Use the size and colour guidance provided to ensure icons remain legible and consistent across contexts.
The full token file exported from the design system source. Tokens are structured by collection and mode, allowing values to adapt across themes or platforms. Reference tokens by name in code rather than raw values.
Reading a component or module page
Each component and module page follows a consistent structure.
A visual preview of the component pulled directly from Figma, along with a short description of what it is, when to use it, and any important constraints.
Additional guidance added by the design system team — usage rules, dos and don'ts, accessibility considerations, or context specific to your product. This tab only appears when notes have been provided.
For modules that accept a slot, this tab shows the content types that can be placed inside it — grouped by category, each with a thumbnail and name. This tab only appears on modules that have documented content blocks.
Visual previews of the key variants of the component, each with a short description. This tab only appears when the component has documented variants.
Metadata about the component: its group, status, a direct link to open it in Figma, and any external documentation link provided by the team.
A button that appears inline with the tab bar — only on components or modules with a Testing status that have documented experiment details. Clicking it opens a modal with information about the ongoing experiment provided by the design system team.
Component status labels
Status labels appear in the sidebar and on component pages. They communicate the current state of each element.
Stable and ready for use in production. Live is the default, so it carries no tag — anything without a status label is live. The component has been reviewed, documented, and is actively maintained.
Recently added and available for use, but still in the early stages of adoption. Feedback is welcome and the API may evolve.
Under active evaluation. The component exists and can be used, but may change before reaching a stable state. Check with the design system team before adopting it broadly. When experiment details are available, a Testing details button appears next to the tabs — click it to read a summary of what is being tested and why.
No longer recommended for new work. Archived components remain visible for reference but are not actively maintained. Migrate to the suggested replacement where one exists.
Finding things
The sidebar search filters components, modules, and foundation items by name as you type. This is the fastest way to navigate when you know what you are looking for.
Start typing any part of a component or module name — the sidebar narrows in real time. The grid view on the Components and Modules pages filters to match.
Type a category name such as "Actions" or "Navigation" to reveal all components in that group at once. The category heading and every item beneath it are shown.
Type "New", "Testing", or "Archived" to find components by their status tag. Partial matches work — typing "test" surfaces all components currently under evaluation.
Archived items are collapsed by default and can be expanded from the sidebar if you need to reference legacy work.
Assets
The Assets section lives under Components in the sidebar. It provides downloadable PNG files — illustrations, UI imagery, or other raster assets provided by the design system team.
Downloading an asset
Each asset card has a download button. Clicking it saves the file as a PNG at 2× resolution — suitable for retina displays and high-DPI screens.
Background preview
Use the light, dark, and transparent background toggles at the top of each set to check how an asset looks in different contexts before downloading.
For developers
Design tokens are the primary contract between design and code. When implementing components, reference tokens by their semantic name rather than raw values. This ensures your implementation responds correctly to theming and any future token updates.
The token file is available under Foundation → Design Tokens and can be downloaded or accessed programmatically. Token names follow a structured naming convention — consult the token page for the full reference.
For designers
Component documentation here reflects the source of truth in Figma. If you notice a discrepancy between what is documented and what exists in the Figma library, raise it with the design system team.
Before introducing new colour pairings, use the Colour Accessibility checker to confirm the combination meets WCAG 2.2 AA. This is especially important for text on coloured backgrounds.