# Primer Design System

An implementation of GitHub's Primer Design System using React

Repository: https://github.com/primer/react
Canonical: https://ross.abutalabs.com/products/primer-design-system
Homepage: https://primer.style/product/getting-started/react/
Language: TypeScript
License: MIT
License Family: permissive
Topics: primer, react, component-library, design-system
Last push: 2026-08-26T19:10:33+00:00
Link (homepage): https://primer.style/product/getting-started/react/
Link (site_page): https://primer.style/product/getting-started
Link (site_page): https://primer.style/product/getting-started/component-status
Link (site_page): https://primer.style/product/getting-started/figma
Link (site_page): https://primer.style/product/getting-started/foundations

## Health v2 (maintenance only)
Score: 95/100 (v2, computed 2026-09-03T02:39:23.370411+00:00)
- activity 99, release rhythm 86, longevity 100
- inputs: {"age_days": 3120, "days_push": 7, "days_rel": 14, "gap_med": 6.0, "n_releases_24m": 95}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 3892, forks 673 (observed 2026-08-28T04:08:28.415250+00:00)

## What it is
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
- artifact type: framework
- maturity: maintenance
- function: ui-components, css-framework, theme, accessibility
- domain: web-development, frontend, web-design, developer-tools
- platform: browser, cross-platform
- tags: design-system, sass, scss, github, octicons, design-tokens, figma, react-components, ktlo, web-server, nodejs

## Member repositories
- primer/react (main) score 95
- primer/css (plugin) score 92
- primer/octicons (plugin) score 97

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:08:28.415250+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:13:36.265781+00:00, confidence not recorded.
  - readme: https://github.com/primer/react (fetched 2026-08-28T04:08:28.415250+00:00, sha 1c14fe579bde)
  - homepage: https://primer.style/product/getting-started/react/ (fetched 2026-08-29T08:10:28.205497+00:00, sha abba4c8ea93d)
  - site_page: https://primer.style/product/getting-started (fetched 2026-08-29T08:10:28.214895+00:00, sha 70603eac2447)
  - site_page: https://primer.style/product/getting-started/component-status (fetched 2026-08-29T08:10:28.216675+00:00, sha 9c87d1f55520)
  - site_page: https://primer.style/product/getting-started/figma (fetched 2026-08-29T08:10:28.218436+00:00, sha 152b89432a67)
  - site_page: https://primer.style/product/getting-started/foundations (fetched 2026-08-29T08:10:28.220311+00:00, sha f7615a4b8463)
  - site_page: https://primer.style/product/getting-started/foundations/mcp (fetched 2026-08-29T08:10:28.221977+00:00, sha 819286cc59d6)
  - site_page: https://primer.style/product/getting-started/foundations/color-usage (fetched 2026-08-29T08:10:28.223683+00:00, sha 1cb5213bb127)
  - site_page: https://primer.style/product/getting-started/foundations/content (fetched 2026-08-29T08:10:28.225421+00:00, sha 059589b7a149)
  - site_page: https://primer.style/product/getting-started/foundations/icons (fetched 2026-08-29T08:10:28.227226+00:00, sha 2bfd2ba64896)
- Data as of 2026-08-30T08:39:29.467469+00:00.