css
Primer CSS is the SCSS/Sass implementation of GitHub's Primer Design System, providing utility classes and component styles distributed via npm. It's now in maintenance ("KTLO") mode, with GitHub steering new work toward primer/react and primer/view_components.
Embed badge
[](https://opensources.dev/resource/css)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
Primer CSS is the Sass-based stylesheet layer of GitHub's Primer Design System, shipping a curated set of utility classes, components, and design tokens that power GitHub's own UI.
When to use css
Use it when you want GitHub-flavored styling and utility classes for a project, or you're already working within GitHub's ecosystem and need consistent base CSS. It's a reasonable choice if you want a battle-tested, real-product design system's raw CSS without committing to a JS component layer.
When not to
Avoid it for greenfield projects expecting active development — it's explicitly in maintenance mode. For full component patterns with markup and behavior, primer/react or primer/view_components are recommended instead. If you want a general-purpose, widely-supported utility framework, Tailwind is a more active and flexible option.
Strengths
- Backed by and used in production at GitHub, so the styles are heavily exercised at scale
- Modular SCSS imports let you pull in only core, product, or marketing layers
- Mature, well-documented design tokens and utilities
- Permissive MIT license
Trade-offs
- Officially in KTLO (keep-the-lights-on) maintenance mode — minimal new features
- Opinionated and tightly aligned to GitHub's visual identity, not a neutral framework
- CSS-only: no component markup or JS behavior, requiring you to wire up structure yourself
- Sass build pipeline dependency adds tooling overhead vs utility-first JIT frameworks
Maturity
Very mature and proven in GitHub's production UI, but no longer the recommended path for new work — GitHub directs users to primer/react and primer/view_components. Expect bug fixes and stability rather than feature growth.
Primer CSS
The CSS implementation of GitHub's Primer Design System
:warning: This project is in KTLO mode! Use existing utility classes from this project where needed. For more complete patterns that include styling and markup, please use primer/react or, if necessary, primer/view_components.
Documentation
Our documentation site lives at primer.style/css. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
Install
This repository is distributed with npm. After installing npm, you can install @primer/css with this command:
npm install --save @primer/css
Usage
The included source files are written in Sass using SCSS syntax. Once installed, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:
@import "@primer/css/index.scss";
You can import individual Primer modules directly from the @primer/css package:
@import "@primer/css/core/index.scss";
@import "@primer/css/product/index.scss";
@import "@primer/css/marketing/index.scss";
Development
See DEVELOP.md for development docs.
Releasing (for GitHub staff)
You can find docs about our release process in RELEASING.md.