CONCEPTS
What Primitiv is
Primitiv is four things that share one name, built on one set of design tokens. Most people only ever need two of them.
The four parts
Primitiv — the design system.
The components themselves, and the tokens underneath them. When someone says "we use Primitiv", this is what they mean.
Harmoni — the colour engine.
It generates every colour in the system. Give it one colour and it builds a full scale around it, choosing the text colour for each step and checking the contrast as it goes. It is also a Figma plugin you can buy separately, but you do not need it: Primitiv ships the palettes it produced.
The registry and the CLI — how you get the code.
primitiv add button copies a component into your project. Not a dependency, a file. The registry is the catalogue it copies from.
The Figma library — the same components, to design with.
Built from the same tokens as the code, so a mockup and a build cannot quietly disagree about a colour or a spacing value.
@primitiv-ui/react (headless)
behaviour and accessibility
The registry (styled, copied to you)
behaviour, accessibility and the design
The Figma library
the design, to work with
Design tokens: colour, spacing, type, density
Harmoni
generates the colour
What you actually need
Most teams use two parts: the Figma library to design with, and the registry to build with. Everything else is optional.
You do not need Harmoni to use Primitiv. The palette it generated already ships with the system. You would only want the plugin if you intend to generate your own palettes from your own brand colour.