About Primer
Overview
Primer is the design system for GitHub. It brings together the components, icons, design tokens, and accessibility guidelines teams use to build interfaces that match GitHub's brand. The system spans product interfaces, digital marketing experiences, and brand assets.
GitHub's Design Infrastructure and Design Engineering teams build and maintain Primer, including its CSS framework, style guide documentation, Octicons, and component libraries. The team formed in early 2016 with two members and continues to grow, with opportunities for apprenticeships and internships.
Key Benefits
- Product UI supplies React components for building GitHub product interfaces
- Brand UI provides components for designing digital marketing experiences
- Brand toolkit creates assets for GitHub branding
- Octicons offers a set of SVG icons built by GitHub
- Primitives provides design tokens for color, spacing, and typography
- Accessibility guidelines support creating accessible interfaces for GitHub
How It Works
Primer splits its tools by the type of work. Teams building GitHub product interfaces start with Product UI, while those creating marketing experiences use Brand UI and the Brand toolkit. Shared foundations, including Accessibility, Octicons, and Primitives, support all of these products.
Use Cases
- Front-end engineers build GitHub product interfaces with Product UI
- Marketing designers craft digital marketing experiences with Brand UI
- Developers use Octicons for a consistent set of SVG icons
- Product teams apply design tokens through Primitives
- Accessibility specialists follow guidelines to create accessible interfaces
Why Choose This Product
GitHub's Design Infrastructure and Design Engineering teams build and maintain Primer, giving it direct roots in the products it serves. The system has grown since its formation in early 2016 and remains open source.
Key Features
Product UI
Provides React components for building GitHub product interfaces.
Brand UI
Provides components for designing digital marketing experiences.
Brand toolkit
Creates assets and tools for GitHub branding.
Octicons
Offers a set of SVG icons built by GitHub for GitHub.
Primitives
Provides design tokens for color, spacing, and typography.
Accessibility
Publishes guidelines for creating accessible interfaces for GitHub.
Design blog
Posts updates on what's new with design at GitHub.
Primer Pricing
Pricing extracted from the product website and may change. Check the source for current details.