Part 14 of 14 · 4 November 2026 · 5 min read

A glossary of design system terms

Plain definitions of the terms used across this series: tokens, modes, variants, governance, semver, easing, container queries, design QA, HEART and STAR.

Design system work has its own vocabulary, and most of it is simpler than it sounds. This glossary collects the terms used across the series, grouped by topic, each with a short plain definition. Use it as a reference when a word in a job description, a design review or an interview isn’t quite clear.

Foundations and tokens

Term	Meaning
Design system	The shared tokens, components, patterns, guidelines and governance a team uses to build its interface, kept in sync between design and code.
Design token	A named value that stores one design decision, such as a colour, a spacing step or a radius. Design and code both refer to the name instead of the raw value.
Primitive token	A raw value with a descriptive name, such as `blue-600` or `space-4`. It says what the value is, not where to use it.
Semantic token	An alias that points to a primitive and names its purpose, such as `color.bg.brand` or `color.text.danger`. Themes change by remapping this tier.
Component token	A token scoped to one component, such as `button.primary.bg`, usually pointing to a semantic token.
Atomic Design	Brad Frost’s model for building interfaces from small parts up: atoms, molecules, organisms, templates and pages.

Figma

Term	Meaning
Variable	Figma’s way of storing a reusable value, such as a colour or a number, that layers can be bound to. It is how tokens live in Figma.
Mode	A set of alternative values for the same variables, such as Light and Dark. Switching the mode switches every bound value at once.
Main component	The source definition of a component. Changes to it flow to every copy.
Instance	A linked copy of a main component placed in a design. It updates when the main component changes.
Detach	Breaking an instance’s link to its main component. The layer stops receiving updates and becomes a one-off.
Variant	One version of a component within a set, such as a primary or secondary button, or a hover state.
Component property	A setting on a component that changes content without a new variant, such as a text label, a boolean that shows an icon, or an instance swap.
Slot	A placeholder inside a component where other content can be placed, like children in code.
Auto Layout	Figma’s layout system for stacking and spacing layers automatically. It works much like CSS Flexbox.
Code Connect	A Figma feature that links a design component to its real code component, so developers see the actual code snippet.

Governance

Term	Meaning
Governance	The rules for how the system is run, changed and maintained: who decides, how changes are proposed and how they ship.
Contribution model	The process that lets people outside the core team propose and add new components or changes to the system.
Semver	Semantic versioning: version numbers in the form MAJOR.MINOR.PATCH. A major bump means breaking changes, a minor bump adds features, a patch fixes bugs.
Breaking change	A change that forces teams using the system to update their own work, such as renaming a prop or removing a variant.
Deprecation	Marking something as on its way out, with a warning and a replacement, before removing it in a later version.
Changelog	A dated list of what changed in each release, written for the people who use the system.
Adoption	How widely the system is used across products and screens.
Detach rate	How often instances of a component are detached and customised. A high rate suggests the component doesn’t meet real needs.

UX and interaction

Term	Meaning
User flow	The path a person takes through screens and decisions to complete one task.
Wireframe	A low-detail layout of a screen that shows structure and content without visual styling.
Wireflow	Wireframes joined by arrows, showing both the screens and how a person moves between them.
Heuristic evaluation	An expert review of an interface against a set of established usability principles, rather than testing with users.
Micro-interaction	A small, single-purpose moment in an interface, such as a toggle, a like or copying to the clipboard. Dan Saffer describes it in four parts: trigger, rules, feedback, and loops and modes.
Transition	A change from one state to another, such as a colour change on hover.
Easing	The curve that describes how speed changes during a movement, such as ease-out for something entering the screen.
Reduced motion	A user setting, exposed in CSS as `prefers-reduced-motion`, asking interfaces to minimise movement.

Accessibility and code

Term	Meaning
WCAG	The Web Content Accessibility Guidelines from the W3C. Level AA is the target most teams and accessibility policies use.
Contrast ratio	A measure of the difference in brightness between text and its background, used by WCAG to judge readability.
Focus-visible	The focus outline shown when someone navigates with the keyboard. In CSS, `:focus-visible` shows it for keyboard users without showing it on every mouse click.
Semantic HTML	Using the element that matches what something is, such as `<button>` for actions and `<a>` for navigation, so browsers and assistive technology understand it.
Custom property	A CSS variable, such as `--radius-md`, and the usual home for design tokens in code.
Container query	A CSS rule that styles a component based on the size of its container rather than the whole viewport.
Logical properties	CSS properties such as `margin-inline-start` that follow the reading direction, so layouts work in right-to-left languages.
Props	The inputs a code component accepts, such as `variant` or `size`. They match Figma’s variants and component properties.

Quality, research and the job

Term	Meaning
Design QA	Checking a built feature against its design for spacing, colour, type, states and behaviour, and logging the differences.
Inconsistency audit	Collecting every instance of one kind of element across a product, such as all buttons, to see how many versions exist.
Usability testing	Watching real people try to complete tasks with a product, often while thinking aloud, to find where it confuses them.
Think-aloud	A testing method where participants say what they are thinking as they work.
SUS	The System Usability Scale: a short, standard ten-question survey that gives a usability score.
NPS	Net Promoter Score: a survey question asking how likely someone is to recommend the product.
HEART	Google’s framework for user-centred metrics: Happiness, Engagement, Adoption, Retention and Task success.
Insight	An observation plus the reason behind it. The reason is what points to a design change.
STAR	A structure for answering behavioural interview questions: Situation, Task, Action, Result.

Sources and further reading

See a design system in practice: the AppsCode Design System case study