Browse

A method for building interfaces by starting with the tiniest pieces and combining them into bigger ones — atoms (a label or input) form molecules (a search field), which form organisms (a header), then templates and full pages. It keeps large systems organized and consistent.

A single, self-contained interface piece — such as a button, checkbox or navigation bar — that is designed once and reused wherever it's needed. Updating the original updates every place it appears.

A ready-made set of reusable interface pieces — buttons, form fields, cards, menus — that designers and developers drop into their work instead of rebuilding each one. Every copy stays consistent because they all come from the same source.

A single, shared collection of reusable design pieces — colors, fonts, buttons, spacing rules and the guidelines for using them — that keeps everything a company makes looking and working the same way. It is the master rulebook and parts kit for building products and marketing.

The agreed rules and process for how a design system is maintained — who can add or change components, how proposals are reviewed, and how updates roll out — so it stays consistent and trustworthy as many people use it.

Named, reusable values that store the smallest design decisions — like a specific color, font size or amount of spacing — so they can be updated in one place and applied everywhere. Instead of writing '#5B2AE0' many times, you use a name like 'color-brand-primary'.

A placed copy of a reusable component that stays linked to its original. It automatically picks up changes made to the source, but you can tweak certain details on it — like the text — without breaking that link.

The original, source version of a reusable design piece from which all copies are made. Change the master and every copy across the project updates automatically to match.

A collection of proven, reusable solutions to common design problems — like how to lay out a search bar, a checkout form or an error message — so teams solve the same problem the same way every time. It captures 'the way we do this here'.

A design token named for its purpose rather than its raw value — for example 'color-text-error' instead of 'red-500'. Because it describes a role, it can point to different raw colors in different themes while the meaning stays the same.

The idea that every shared design decision lives in exactly one authoritative place, so everyone pulls from the same source instead of keeping their own slightly different copies. When that one source changes, everything downstream updates.

A reference document that spells out the rules for a brand or product's look — which colors, fonts, logos, tone of voice and spacing to use and how. It keeps everyone making things that feel like they come from the same place.

Swapping out a set of design values — mainly colors — so the same interface can wear different looks, such as a light and a dark mode, or a client's own brand colors, without redesigning the layout. The structure stays; the appearance changes.

A version of a component that shares its core design but differs in a specific way — such as a button that comes in primary, secondary, disabled and hover states. Variants are grouped together so people can swap between them easily.