Design tokens

Design tokens are the named values a design system is built from. These notes cover how to name and structure them, the W3C format, and the themes and brands drawn from one set of primitives.

4 articles

Start here

Three stacked isometric planes: a dense grid of colour swatches at the bottom, a few tiles in the middle, one component card on top, joined by a lit line

Design

Design token naming conventions: a 3-tier system that scales

A three-tier scheme (primitive, semantic, component) keeps token names stable as a system grows. Here is how to structure and name each layer.

Design

Multi-brand design tokens: 6 steps from one primitive layer

One primitive layer, one alias-only file per brand, components that read only semantic names: six steps built on the DTCG 2025.10 spec and Figma variables.

Thirteen black tiles on a white ground, one showing colour stripes and twelve showing size, weight, timing, easing, shadow and other token types

Design

Design tokens beyond color: behavior and context in 2026

The stable DTCG format has 13 token types. One is color. The other 12 carry size, time, easing and state, and most systems never define them.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Design

Design tokens vs CSS variables vs Tailwind, explained (2026)

Design tokens, CSS variables, and Tailwind sit at three layers: meaning, runtime values, and utility classes. How to pick, and how they stack together.

Back to Field notes