Browse

A design token that points to another token instead of holding a raw value — for example, 'button-background' set to equal 'color-primary'. Change the underlying token once and everything aliased to it updates.

A deliberately open area inside a reusable component where you can drop in your own content or another component, so one flexible component can serve many needs.

One of several preset versions of the same component that share a purpose but differ in style — like a button's primary, secondary, and destructive versions.

The defined way that people outside the core team can propose, build, and get new components or changes accepted into a shared design system.

How tightly a design packs its information — the amount of spacing and sizing around elements. A 'comfortable' density leaves more breathing room, while a 'compact' density fits more on screen for power users.

In a design system, deprecation is officially marking a component, token, or pattern as outdated and no longer recommended. It still works for now, but teams should stop using it and move to the replacement before it is eventually removed.

The consistent visual and interaction 'vocabulary' of a product — the recognizable style, shapes, motion, and behavior that make all its screens feel like they belong to the same family.

How widely and consistently the teams in an organization actually use the design system in their real products, rather than building things their own way.

A named, reusable value for a single design decision — like a specific color, font size, or spacing amount — stored once and referenced everywhere. Change the token and every place that uses it updates.

In a design system, elevation is how far a surface appears raised above the ones behind it, shown mainly with shadows so the interface reads as stacked layers. A higher elevation makes an element look closer to the user.

The base layer of a design system — the core styles like color, typography, spacing, and elevation — that every component is built on top of.

The complete, consistent set of icons a product uses, plus the rules that keep them cohesive — same size, stroke weight, corner style, and visual metaphors — so every icon looks like it belongs to one family.

The different looks a component takes on as a user interacts with it — such as default, hover, focus, active/pressed, selected, and disabled. A design system defines each so the same control looks and behaves consistently everywhere.

A style guide generated from the real product code, so its examples are the actual components. Because it is wired to the codebase, the documentation stays in sync with the shipping interface instead of drifting out of date.

The most basic design token — it holds a raw value like an exact color, number, or font, with no assigned purpose. Other, purpose-named tokens reference these as their foundation.

A fixed set of spacing values (such as 4, 8, 12, 16, 24 px) used for margins, padding, and gaps, so the space between things stays consistent across screens instead of being eyeballed each time.

A preset set of font sizes (often with matching line heights) that step up in a consistent ratio, so every heading, body, and caption uses a size from the same tuned list instead of arbitrary numbers.

A downloadable pack of pre-designed interface elements — usually as design files — that gives you buttons, icons, and layouts to assemble mockups quickly.