Tokens

Machine-readable exports of the design values, and how to consume them.

The token files are the machine-readable form of the foundations. They are MIT-licensed — the values are free to use, the marks are not. See Licensing.

Downloads

File	Format	Use
`variables.css`	CSS custom properties	Any web project
`tokens.json`	JSON	Build pipelines, Style Dictionary
`tailwind.config.js`	JS	Tailwind CSS projects

Source: brand/tokens/.

CSS

<link rel="stylesheet" href="variables.css">

.button--primary {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: background var(--duration-standard) var(--ease-out);
}

What the tokens cover

Colour — the seven named aliases. The full 12-step scales are documented on the Colour page; the token file exports the named entry points.
Typography — the three font stacks.
Spacing — the nine-step 4px scale.
Radius — five steps.
Elevation — four shadow levels.
Motion — four durations, two easing curves.

Consuming them in SCSS

This site maps the tokens onto Bootstrap and Docsy variables in src/assets/scss/_variables_project.scss. That file is a worked example of wiring the brand into an existing component framework — including the full 12-step scales in both modes, which the CSS export does not carry.

The site is the test

This documentation is styled by those same SCSS files. If a token is wrong, this page renders wrong — which is the point. There is no separate brand-site theme that can drift away from the system it documents.