primer/css

★ 12,943SCSSAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((primer/css))
    What it does
      GitHub visual styles
      SCSS utility classes
      Sub-module imports
    Use Cases
      Style web projects
      Match GitHub look
      Reference design
    Tech Stack
      SCSS
      CSS
      npm
    Audience
      Web developers
      GitHub builders

mindmap root((primer/css)) What it does GitHub visual styles SCSS utility classes Sub-module imports Use Cases Style web projects Match GitHub look Reference design Tech Stack SCSS CSS npm Audience Web developers GitHub builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Apply GitHub's exact visual styling to your own web project by importing Primer CSS into your SCSS files.

USE CASE 2

Include only the styles you need by importing sub-modules for core, product, or marketing styles separately.

USE CASE 3

Inspect how GitHub.com's design system is structured in CSS for learning or reference.

Tech stack

SCSSCSSnpm

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial projects, just keep the copyright notice. MIT license.

In plain English

Primer CSS is the CSS stylesheet implementation of GitHub's Primer design system. GitHub uses Primer to build the visual appearance of GitHub.com itself, and this package makes those same styles available for anyone to use in their own projects. It is written in SCSS, which is a version of CSS that adds variables, nesting, and other features before compiling down to regular CSS that browsers understand. The README includes an important notice: this project is currently in what GitHub calls KTLO mode, meaning Keep the Lights On. In practice, this means the project receives only minimal maintenance to stay functional, with no active feature development. Users who need complete, fully styled components including both the HTML markup and the CSS are directed to two other projects: primer/react (a React component library) and primer/view_components (a Ruby on Rails component library). Both of those are under active development and include more complete patterns. For projects already using Primer CSS, the package is installed via npm and imported into your SCSS files with a single import statement. You can import the entire package at once or bring in smaller sub-modules for core styles, product styles, or marketing styles separately, which allows you to include only what a specific page needs. Full documentation including all available utility classes, the design theme, and usage guidance lives at primer.style/css. The package is released under the MIT license and was created by GitHub.

Copy-paste prompts

Prompt 1

I'm building a web app and want it to look like GitHub. Show me how to install primer/css via npm and import only the core styles into my SCSS file.

Prompt 2

Using primer/css, write a sample HTML page that uses Primer utility classes for layout and typography.

Prompt 3

I'm migrating from primer/css to primer/react. What are the equivalent React components for the Primer CSS utility classes I've been using?

Prompt 4

Show me how to import just the marketing sub-module from primer/css without pulling in the full stylesheet.

Open on GitHub → Explain another repo

← primer on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.