systems

Design token

A named variable for one design decision – a colour, a spacing value, a radius – stored in one place and referenced by name everywhere it's used.

The same idea as a spreadsheet formula pointing at a cell instead of hard-coding the number: instead of a button’s blue being #0D5EFF typed into fifty files, it’s a name like color-interactive-primary that fifty files reference, and the value lives in exactly one place. Change the one place, every reference updates – which is what turns a full rebrand from a find-and-replace across thousands of component instances into a token-file change.

Tokens also close the classic designer–developer gap (“brand blue” vs a guessed hex code – both sides reference the same name), and they make theming nearly free: light and dark mode become “swap the token values”, not “redesign every screen”. Since October 2025 there’s even a stable, vendor-neutral file format for them – the Design Tokens Community Group’s v2025.10 specification – so tokens can travel between design tools and code pipelines. This site runs on exactly this mechanism: every colour, space and radius on this page resolves from the live token set.