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.

Google's personalization layer where the system derives an app's entire color scheme from the user's wallpaper, so every app shifts together.

How long a transition takes from start to finish, measured separately from the shape of its easing.

The rate of change across an animation, deciding how it accelerates and settles rather than how long it takes.

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.

Nudging an outside colour's hue toward the current scheme so a fixed brand or status colour sits inside a generated palette without looking imported.

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 complete named set of colour values a product can swap in whole, so light, dark, high contrast and per-tenant branding are the same mechanism.

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 CSS function that blends two colours by a chosen percentage in a chosen colour space, so hover and disabled variants are derived rather than hand-picked.

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.

A CSS keyword meaning the element's own text colour, letting borders, icons and fills inherit whatever colour the surrounding text happens to be.

A three-rung text hierarchy, high, medium and disabled, ranked by stepping the opacity of one foreground colour instead of naming a separate colour for each rung.

Material's colour space of hue, chroma and tone, which borrows hue and chroma from CAM16 and lightness from CIELAB so tone alone predicts contrast.

Rotating hue deliberately along a ramp, warmer at the light end and cooler at the dark end, so a scale looks alive instead of like one colour fading out.

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 surface and text pair deliberately flipped against the current theme, so a snackbar or tooltip reads as a foreign object that arrived from outside the page.

The greys an interface is mostly made of, ramped from page background to body text, which carry the structure while the accent carries the attention.

A colour notation of lightness, chroma and hue built on Oklab, where changing the hue leaves the perceived lightness alone and equal steps look equal.

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.

CSS notation that builds a new colour from an existing one by naming an origin colour with from and then adjusting individual channels.

The single input colour an algorithm expands into a whole scheme, so a palette becomes something derived from one decision rather than picked swatch by swatch.

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 colour with black mixed in, darker than the original hue and typically used for pressed states, borders and dark theme surfaces.

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.

A colour deliberately excluded from theming because it sits on something that never changes, such as a label over a photo or a fixed brand mark.

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.

A colour with white mixed in, lighter than the original hue and used for faint fills, hover washes and subtle backgrounds.

A grey with a trace of the brand hue mixed in, so backgrounds and borders belong to the palette instead of reading as a separate, colder system.

Sizing a nested shape's corners so its curve shares a centre with the one outside it, the inner radius being the outer radius less the padding between them.

How far a shape's corners are rounded off, measured as the radius of the circle that replaces the square angle, and the one number that decides how soft a UI reads.

How high a surface sits above the one behind it, expressed as a shadow, a tint, or both, and held to a few named steps so that height means something.

A rounded square whose corners curve continuously into the sides instead of meeting a circular arc, the shape behind iOS app icons.