Primer Design System
An implementation of GitHub's Primer Design System using React observed · 2026-10-14
Health v2 · maintenance only
95/100
- Activity 99
- Release rhythm 86
- Longevity 100
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-10-21. Adoption (stars, forks) is never an input.
- gap_med: 6.0
- age_days: 3168
- days_rel: 19
- days_push: 7
- n_releases_24m: 101
Adoption not part of the score
3916 stars · 700 forks observed · 2026-10-14
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded
Primer is GitHub's design system, and this repository is its CSS implementation written in SCSS and distributed via npm as @primer/css. It provides utility classes, theming, and design tokens matching GitHub's UI, though the project is now in KTLO (keep-the-lights-on) mode with Primer React recommended for complete styled patterns.
Use cases
- style a web app to look like GitHub's UI
- use GitHub's design tokens and color themes in CSS
- apply GitHub-style markdown formatting with markdown-body
- import Sass modules for core, product, or marketing styles
- build accessible, responsive interfaces with GitHub's design language
- find GitHub's Octicons icon library
When to choose
- you want GitHub's exact look and feel in a web project
- you need a mature, accessible CSS framework with light/dark theming
- you're already using Primer React and need base styles or markdown styling
- you want design tokens as CSS variables across nine color themes
When to avoid
- you need actively developed new components - the CSS package is in KTLO mode
- you want a fully componentized workflow - prefer @primer/react or primer/view_components
- you need a design system unrelated to GitHub's visual language
- you don't use Sass or a bundler that can handle SCSS imports
Facets
framework · maturity maintenance
ui-components css-framework theme accessibility web-development frontend web-design developer-tools browser cross-platform design-system sass scss github octicons design-tokens figma react-components ktlo web-server nodejs
10 sources
- readme: https://github.com/primer/react · fetched 2026-10-14 · 1c14fe579bde
- homepage: https://primer.style/product/getting-started/react/ · fetched 2026-08-29 · abba4c8ea93d
- site_page: https://primer.style/product/getting-started · fetched 2026-08-29 · 70603eac2447
- site_page: https://primer.style/product/getting-started/component-status · fetched 2026-08-29 · 9c87d1f55520
- site_page: https://primer.style/product/getting-started/figma · fetched 2026-08-29 · 152b89432a67
- site_page: https://primer.style/product/getting-started/foundations · fetched 2026-08-29 · f7615a4b8463
- site_page: https://primer.style/product/getting-started/foundations/mcp · fetched 2026-08-29 · 819286cc59d6
- site_page: https://primer.style/product/getting-started/foundations/color-usage · fetched 2026-08-29 · 1cb5213bb127
- site_page: https://primer.style/product/getting-started/foundations/content · fetched 2026-08-29 · 059589b7a149
- site_page: https://primer.style/product/getting-started/foundations/icons · fetched 2026-08-29 · 2bfd2ba64896
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| primer/react | main | 95 |
| primer/css | backend | 87 |
| primer/octicons | plugin | 96 |
| primer/view_components | plugin | 96 |
For agents
Data as of 2026-10-19T08:05:51.212177+00:00 · Report a problem