Primer Design System
Primer Design System: GitHub’s Official Toolkit for UI
The Primer Design System is GitHub’s official, open-source collection of design principles, standards, and reusable components. GitHub’s Design Infrastructure team actively builds and maintains this system. Primer provides a common language for designers and developers. Ultimately, it ensures that every interface within GitHub and its related projects feels cohesive, accessible, and on-brand. The system provides multiple libraries to support various teams, including Product UI for the main GitHub application and Brand UI for marketing experiences.
Codebase and Core Technology
Primer’s foundation is built on a modular approach using CSS. The team originally implemented the core styling as Primer CSS. This is a free, open-source CSS framework. It utilizes Object-Oriented CSS and functional CSS principles for high reusability. However, for modern application development, the recommended solution is component libraries. The team provides two key repositories:
- Primer React: A robust implementation of components using React and TypeScript. This is the standard for building GitHub product features.
- Primer ViewComponents: A library that offers reusable components for Ruby on Rails applications.
This multi-faceted approach allows developers to choose the right tool while maintaining visual consistency. All Primer code is open-source and available on GitHub.
Theming, Tokens, and Design Parity
The system ensures complete visual consistency through powerful abstraction layers. Specifically, it uses Primer Primitives—a package containing core Design Tokens for color, spacing, and typography. These tokens are implemented as CSS variables in code and variables/styles in Figma. Crucially, Primer fully supports GitHub’s theming. It offers nine color themes, including multiple Light Mode and Dark Mode options (Default, High Contrast, and Dimmed). Every component automatically adjusts to work across all supported color modes, simplifying dark-mode implementation for developers. Designers access the component library and styles via the public Primer Web Figma Community page. This guarantees design assets remain perfectly in sync with the live code components.
Implement GitHub’s design language in your projects using the official Primer Design System.
Access the Official Primer Design System Documentation | Explore the Primer Design System GitHub Organization