Tokens

Mon, 01 Jan 0001 00:00:00 +0000

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.

Documentation on projectious.work brand

Tokens

Downloads

CSS

What the tokens cover

Consuming them in SCSS