tokens

A spacing convention where every size and gap is a multiple of eight, so values stay whole numbers at every common screen density.

How much content a system packs into a given area, tuned as a named setting so the same components can run comfortable or compact.

A spacing ramp whose every step interpolates between a minimum and a maximum viewport, so gaps grow smoothly with the screen instead of jumping at breakpoints.

The fixed, named set of spacing values a system allows, so gaps come from a shortlist instead of being invented per screen.

A named duration or easing value published by a design system, so timings are chosen from a set rather than typed per component.

A type scale generated by multiplying a base size by a fixed ratio, so every step is proportionally related to the one before it.

The fixed set of text sizes a design allows, chosen so sizes relate to each other rather than being picked one at a time.

A named bundle of type values (family, size, weight, line height, tracking) that a design system hands out instead of raw numbers.

The one saturated colour an interface spends sparingly on the things it wants clicked, so its rarity is what makes it read as important.

The colour an organisation owns in a customer's memory, carried into a product as the seed for its palette rather than used directly on every surface.

A second name pointing at an existing scale so one palette can answer to several meanings, letting yellow serve as both warning and pending without duplication.

One hue rendered at a fixed series of lightness steps, numbered so that the same step means the same job in every hue.

A named job in the interface, such as surface or outline or on-primary, that components style themselves against instead of reaching for a palette value.

A named colour decision stored once and referenced everywhere, so retheming is a change to the value rather than an edit at every place it is used.

A muted companion to an accent, light enough to fill a chip or a card behind ordinary text, so an accent can shade a region without shouting.

The convention that hover, active and selected are the next steps along the same scale rather than separate colours, so states are derived from one ramp.

A colour defined by what it sits on, such as on-primary or on-surface, so every fill ships with the foreground guaranteed to be readable against it.

The role that draws boundaries, split into a stronger value for edges that must be seen and a weaker one for dividers that only need to hint at structure.

A raw palette value named for what it is, like blue-500, sitting under the semantic layer that names colours for what they do.

A colour named for the job it does rather than the colour it is, so that "danger" or "surface" can be repointed without renaming anything that uses it.

A translucent sheet of the content colour laid over a control at a fixed opacity per state, so hover, focus and pressed are one rule instead of three palettes.

The small fixed set of colours a product reserves for outcome, typically success, warning, danger and info, so meaning is consistent wherever it appears.

The colour of a plane that content sits on, defined as a set of stacked levels so a card on a page and a sheet on a card are told apart by value.