Primer by GitHub

Primer is the rare house system whose production proof is public and enormous: it is the system GitHub.com itself runs on, maintained in the open, with the documentation, the components, and the tokens all published. The interesting question for an outside team is not whether it works, but what adopting it commits you to.

Three implementations, one token source Most systems in this directory are one library with guidelines around it. Primer is three implementations of one language: Primer React for React applications, Primer CSS for framework-free use, and Primer ViewComponents for Rails, which exists because GitHub's own stack needed components in Ruby and the ViewComponent framework was extracted from GitHub.com to provide them. What holds the three together is @primer/primitives, the token package the project calls its single source of truth for color, typography, and spacing. The same tokens are exposed as CSS variables in code and as Figma variables in the Primer Web Figma library, so the design-to-code token story is one artefact, not two synchronised ones. The React setup shows the shape plainly: primitives is a peer dependency with a floor version, the theme arrives as an imported stylesheet from that package, and ThemeProvider plus BaseStyles sit at the root.

Nine themes is the accessibility story Primer's color system ships light and dark modes across nine themes, and the list is the point: alongside the standard light and dark there are colorblind themes for protanopia and deuteranopia and for tritanopia, high-contrast variants, and a dark dimmed theme. A team adopting Primer gets accessible color modes as shipped configuration, where most systems leave dark mode as an exercise and colorblind support as a wish. The same seriousness shows in the details: component documentation carries per-component accessibility notes (the Pagination page, for example, specifies focus management, accessible names, and target sizes), and the Octicons guidelines are rules rather than vibes: use the predefined icon pairs, give meaningful icons an accessible name or they are treated as decorative, and keep meaningful icons at 3:1 contrast or better.

The honest costs Three of them. First, identity: Primer looks like GitHub because it is GitHub, and an unrelated product built on it will be read as a GitHub lookalike unless the team invests in re-theming at the token level. Second, the GitHub look is opt-in in layers: the documented minimal React setup deliberately does not include the full GitHub.com base styling, which is a separate @primer/css import, and markdown needs the markdown-body class, so "make it look exactly like GitHub" is a decision to make on purpose, not the default outcome. Third, the reach is web-only in the documented paths: React, CSS, and Rails cover most developer-tool surfaces, but a team that also ships native mobile applications will run a second system beside Primer, because there is no native library in its getting-started paths.

For a developer-facing product whose users already spend their day in GitHub, those costs are close to free and the theme and token story is a strong fit. For a consumer brand, the same facts argue the other way. That clarity about who it is for is itself a sign of a mature system.