Primitive
The smallest reusable building blocks of an interface—atoms like text, icon, button, and spacing—that compose into patterns and design systems.
A primitive is the smallest reusable piece of an interface: text, icon, button, input, spacing, color token—the atoms you combine before you have a “component library” story. In design and product talk, this is not a programming-language primitive; it is the floor of the UI stack.
Primitives sit below patterns and systems. A button is a primitive; a “confirm delete” dialog is a pattern; the tokens, components, and rules that keep both consistent are a design system.
Why it matters
Designers and newbies often jump to screens and flows. Primitives force a smaller question: what are the shared atoms everyone will reuse? If those atoms are inconsistent—three button sizes, four spacing scales—every higher layer inherits the mess.
Clear primitives also make collaboration cheaper. Engineers, designers, and AI tools can compose from the same short list instead of inventing one-off controls per feature.
Design systems and generative UI
A design system usually starts with primitives (and tokens), then documents how they assemble into components and patterns. Generative UI depends on that foundation even more: when layouts are composed at runtime, the model or rules engine needs a bounded set of atoms with predictable props and states. Without solid primitives, generated UI drifts off-brand and hard to maintain.
Beginner tip
Before naming a new “component,” ask whether it is really a new primitive—or just a composition of ones you already have. Prefer extending text, icon, button, and spacing over inventing a parallel control set.