Primer
GitHub's design system, documented for developers rather than designers
Primer is the design system behind GitHub: tokens, React and Rails components, guidelines and accessibility documentation. It is unusually useful to read because it is written for the people implementing it, so the guidance is concrete rather than aspirational.
Best for when
- you want token architecture documented by people who maintain it
- you need concrete accessibility guidance rather than a checklist
- the audience is developers, so GitHub's conventions are already familiar
Watch out for
- adopting the components means adopting GitHub's visual identity
- it is scaled for a very large product, so much of it is not your problem
- the React and Rails implementations do not move in lockstep
Why it reads better than most
The documentation answers implementation questions. When to use which button variant, what a specific token is for, how a component behaves at a small viewport. Those are the questions that actually arise, and most published systems answer none of them.
The accessibility documentation is a genuine reference in its own right, particularly the guidance on focus management and live regions.
Borrow the structure, not the look
Primer looks like GitHub, which is correct and is not what you want. What transfers is the token architecture: functional names layered over primitives, so a colour means a purpose rather than a hue.
Getting that layering right early is the difference between a theme you can change in an afternoon and one you cannot change at all.
