# Primer

> GitHub's design system, documented for developers rather than designers

Category: Design systems and tokens (https://aiarabicdev.com/design-systems)
Canonical page: https://aiarabicdev.com/design-systems/primer
Tags: design-systems, github, tokens, react, accessibility

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.

## Facts

- Licence: MIT
- Language: TypeScript
- Cost: Free and open source
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Website: https://primer.style
- Source: https://github.com/primer/react

## 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

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence