Global

Border tokens are limited to a small set of T-shirt sized tokens that span from 0 - 8px. They are deliberately kept to a minimum of sizes to drive consistency across the ecosystem.

Global Border Width Documentation

Global font tokens reference core font tokens and are consumed across all components and headings.

• Tokens with a suffix of {...heading.M} are consumed within H1, H2, H3 and modals.
• Tokens with a suffix of {...subheading.M} are consumed within H4, H5s.
• Tokens with a suffix of {...section.heading.M} are consumed with data visualisations and some container headings such as tiles.
• Tokens with a suffix of {body.M} are consumed within standard paragraphs. 3 t-shirt sizes and 2 weights are supported.
• Tokens with a suffix of {...comp.M} are consumed directly within componentry. {global.font.static.comp.S} for example is consumed within small inputs, buttons etc.

Documented below are the static (fixed sized) font values. However, fluid tokens that consume clamp values can also be consumed by development teams in order to deliver a more legible experience for both small and large screen contexts.

_global font

Our global size tokens are used to specify generic sizes across many components. Where possible these are applied to all components in order to deliver a consistent visual rhythm to the page. However, some components are unique enough that they need raw values applying instead.

_global size

Our global spacing tokens are split into 2 categories:

• {...layout} spacing tokens are used on vertical and horizontal stacks of components as well as within large containers.
• {...comp} spacing tokens are applied directly within componentry such as inputs and buttons.

_global space

Our global radius tokens are split into 2 categories:

• {...container} radius tokens are used on standard containers such as tiles, cards, dialogs etc.
• {...action} radius tokens are applied to interactive components such as inputs, buttons etc.

_global radius

Our depth tokens are applied to interactive and non interactive components:

• Interactive components such as cards consume lvl 1 depth tokens by default. On hover, these then jump to lvl 2 and lvl 3 on dragging.
• Non interactive components such as sticky footers, sticky table columns etc consume the depth tokens that are suffixed with the word {...sticky}.

_global depth