Skip to content
aiarabicdev
Design systems

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.

FreeMITTypeScriptSelf hostable

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.

Reach for it 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
NEXT TO IT ON THE SHELF

Compare with these

@arabic_Intelligence

New entries, as they land

One channel. New tools when they are added, with the caveat included. No daily digest, no course, nothing to buy.

Join the Telegram

Free. No email required.