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/.

All three are generated from src/data/brand.yaml by scripts/build-tokens.mjs — the same file this documentation renders from, so a page and a download cannot disagree about a value. scripts/check-tokens.sh fails the build if the committed files drift from a fresh generation, or if brand.yaml drifts from the SCSS that actually styles the site.

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

Everything the foundations define, in all three files:

	Covers
Colour — named	The eight aliases: primary, accent (with `accent-solid`), secondary, and their light and dark variants
Colour — scales	All three 12-step scales, in both modes — 72 values
Colour — semantic	Success, warning, danger, info: the solid value, its tint, and the foreground to use on that tint, per mode
Surfaces	Page canvas, elevated surface, three text levels, border — per mode
Typography	Three font stacks, and the eleven-style type scale with size, weight, and line height
Spacing	The nine-step 4px scale
Radius	Five steps
Elevation	Four shadow levels
Motion	Four durations, two easing curves
Breakpoints	`sm` 640, `md` 768, `lg` 1024, `xl` 1280
Terminal	The sixteen ANSI slots plus thirteen chrome values

Two things the exports cannot do for you

Breakpoints are exported as values, not as queries. A custom property cannot be used in a @media condition, so --breakpoint-md is available to calc() and to JavaScript, but the query itself still has to be written out.

Tailwind has no notion of a colour mode, so the dark scales are exported as their own midnightDark / orangeDark / slateDark keys rather than swapped in behind dark:. Wire them to whatever dark strategy your project already uses.

Modes

variables.css declares the dark values twice: once under @media (prefers-color-scheme: dark), and once under [data-theme="dark"]. A theme toggle that only works when the operating system already agrees is not a toggle, so both routes are present and the explicit attribute wins.

Consuming them in SCSS

This site maps the tokens onto Bootstrap and Docsy variables in src/assets/scss/_variables_project.scss, which is a worked example of wiring the brand into an existing component framework.

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.