Glossary

The share of the product and teams that actually use the system. It is the measure that matters: a design system with low adoption costs without paying back.

A method by Brad Frost for organising an interface in levels: atoms, molecules, organisms, templates, pages. Useful for thinking about composition, less so for naming components day to day.

Designing a brand’s identity: what it says and how it is recognised. Logo, colours, typefaces, tone and usage rules, designed to hold across every medium.

The document that describes the visual identity and its usage rules. Designed for communication, it needs translating into roles and tokens to serve a digital product.

A change that forces teams to update their code or files: a renamed component, a removed property. It is announced, documented and shipped in a major version.

One person per team or business unit who brings needs up and news down. A network of champions is often what turns a system from a tool into a shared practice.

The dated list of what changed in each version. It is a design system’s first trust tool: teams know what is moving and when.

The system’s reusable components, in Figma and in code: button, field, card, menu. It is only one part of a design system; without rules and governance it remains a collection.

The third tier: values specific to one component, such as the primary button background. They point to system tokens and let you adjust one component without touching the rest.

The written process through which a team proposes a new component or a change: request, review, build, release. It turns informal requests into improvements to the system.

The proportion of a product’s screens or components built with the design system. Tracked every quarter, it shows whether adoption is progressing.

The set of decisions, components and rules that lets several teams build consistent interfaces. It brings together foundations (tokens), a component library in design and code, documentation and governance.

How structured, governed and adopted a system is. It is usually assessed on several axes: foundations, components, governance, adoption.

The smallest design decisions, named and stored once: a colour, a size, a radius, a duration. The same token feeds Figma and code, which keeps the two aligned.

The work that lets designers do their work: tools, processes and community organised so design moves fast, consistently, and gets adopted by the rest of the company.

The standard JSON format for design tokens, published by the W3C Design Tokens Community Group. It describes each token with its value and type, so tokens can move between tools.

The rules that say who decides what goes into the system, how people contribute and how it evolves without breaking. Without it, a design system fragments as soon as the team grows.

Documentation generated or maintained from the system itself, with real, up-to-date examples. It says when to use a component, when not to, and how it behaves.

A colour space (lightness, chroma, hue) where equal numeric steps look like equal perceived steps. It is used to generate even colour scales and is supported in CSS.

The first tier of tokens, also called primitives: the raw palette (blue 600, grey 100, 16 px). They say what a value is, not what it is for, and components do not use them directly.

A three-number versioning convention, major.minor.patch. The first changes for a breaking change, the second for an addition, the third for a fix.

The one place that is authoritative for a decision: a token file, a library, a documentation page. When there are two, they end up drifting apart.

The second tier, also called semantic: roles such as “default background” or “action colour” that point to reference tokens. This is where a dark theme or a second brand changes values.

A set of values for system tokens: light, dark, high contrast or another brand. Components stay the same; only the mapping between roles and values changes.

The short list of allowed text sizes, with their line height and weight, from heading to caption. Five to seven levels are enough for most products.

A planned version of a component: size, style (primary, secondary), state (hover, disabled). Variants limit the available choices to the ones that were decided.

The visible part of a brand: logo, palette, typefaces, imagery, shapes. It becomes a system when its rules are written down and translated into tokens.

The luminance ratio between text and its background, defined by the WCAG accessibility guidelines. Level AA requires 4.5:1 for body text and 3:1 for large text.