Primer

Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework.

Introduction

Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.

This style guide is living documentation that will be updated as we continue to improve and evolve our design system.


Highly reusable, flexible styles

Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into three categories:

  • utilities

    Utilities

    Single purpose, immutable styles, that do one thing well.

  • objects

    Objects

    Scaffolding for common page and content layouts.

  • styles

    Components

    Abstracted patterns for frequently used visual styles.

Systematically designed for GitHub

Primer is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.

Group Created using Figma

Highly composable spacing scale

The base-8 spacing scale is highly composable and works with the density of GitHub’s content. Margin and padding spacers bring consistency to vertical and horizontal rhythm, while remaining flexible so you can tweak layouts to work for every context.

Customizable typography

Font size and line-height options work together to result in more sensible numbers. Font styles come in a range of weights and sizes so that we can style appropriately for content and readability. Type utilities allow us to change the visual styles while keeping markup semantic.

Group Created using Figma

Meaningful color

The color system allows us to add meaningful signals to content and interactions. Color variables and utilities offer thematic styling options without being tied to structure. Text and background colors come in a range of accessible combinations to ensure we build inclusive interfaces.


Primer packages

Each component or group of styles is packaged up and distributed via npm. Primer includes 23 packages that are grouped into useful meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.

Primer

10.8.0 Build Status

This package includes all 31 Primer modules.

Use Primer in your project

Pick and choose what you need. Install the entire Primer bundle or individual packages via npm.

Installation instructions