What is Primer?
Primer is an open-source design system developed by GitHub. It provides a set of guidelines, principles, and patterns for designing user interfaces (UIs). As a design language, Primer provides common grammar and vocabulary to create inclusive, responsive, and efficient experiences for a diverse range of users.
The Evolution and Versions
In an insightful article by Diana, the Design Systems Manager at GitHub, the evolution of GitHub's design system, Primer, has changed over time. This shows GitHub's commitment to enhancing user experience and simplifying design processes.
In 2012, CSS and other assets were packaged into a Ruby Gem for use on GitHub websites. This package was named Primer.
Primer continued to be used internally for years before eventually having its CSS and accompanying documentation open-sourced as Primer CSS. By the end of 2016, GitHub had a new internal documentation site with a lot more coverage.
In 2016, the design systems team was formed with its first full-time employees. From then on, more reusable components were added to the Primer library. These components met different design needs for GitHub products.
While primarily used internally at GitHub, Primer's design principles and components are increasingly shared with the wider developer community, encouraging best practices in design system development.
What Products Built with Primer
The Primer offers a set of open-source guidelines, standards, and suggestions for GitHub design.
GitHub: The entire GitHub platform, including GitHub.com, GitHub Desktop and the mobile apps for iOS and Android use Primer. This helps create a consistent user experience on all devices.
OpenProject (V13.1): This version of OpenProject includes a new Meetings module built using Primer components.
Applicable industries for reference
While Primer has applications in various industries, its features are most optimally aligned with the needs of the tech and software development industry as well as the Education and E-Learning industry.
Tech and Software Development:
Frameworks and Libraries: Development tools, frameworks, and libraries often benefit from Primer's consistent and user-friendly UI components.
Developer Tools: Platforms like IDEs, code editors, and version control systems can adopt Primer to offer a seamless interface.
Education and E-Learning:
Educational Platforms: Online learning platforms can adopt Primer to provide an easy-to-navigate and cohesive learning environment.
Course Management Systems: Tools for managing courses and student data can benefit from Primer’s standardized design.
Platform Support and Use Cases of Primer
Supported Platforms
Primer design system supports web-based applications, as well as desktop and mobile apps. Primer offers extensive support across a variety of platforms, ensuring a consistent and cohesive user experience.
React: Primer offers a React implementation called Primer React, which allows users to use Primer components in the React application easily.
Rails: Primer integrates smoothly with Rails applications through Primer ViewComponents.
Styled System: Styled System allows for the implementation of design tokens and makes it easier to build consistent, themeable UI components with Primer.
Vue (through community efforts): While not officially supported by GitHub, there are community-maintained libraries and efforts to integrate Primer with Vue.js, helping developers use Primer’s design principles in Vue applications.
Use Case Scenarios
A Guide for Primer
Effective Use of the Color System
At Primer’s foundation is the color system, a way of defining and applying consistent colors across the Primer UI components and themes. The Primer color system has two modes: light and dark. Each mode has several themes, including a default theme, dimmed theme, high contrast theme, and themes for users with color vision deficiencies.
As part of GitHub’s larger accessibility strategy, the Primer Design team committed to improving color contrast in both default light and dark mode. It ensures sufficient contrast between foreground and background colors.
Primer design system works with all themes and modes without requiring any extra adjustments. It focuses on inclusive design with its color system. It offers options for different accessibility levels in both light and dark modes.
Primer delivers colors in the form of design tokens. Design tokens are represented as CSS variables for code and Figma variables for design within Primer.
Typography Hierarchy and Readability
Primer design principles prioritize readability by utilizing line-height tokens for proper alignment and keeping line lengths around 80 characters or less, following W3 Page Structure Guidelines. Content is usually left-aligned with a ragged right edge, avoiding justification, centering, or right-aligning text. The hierarchy and importance of content are shown through different font weights. Changes to letter spacing are rare and carefully thought out to keep consistency.
Icon Design Principles
Icons at GitHub are called Octicons, which can be found in different formats such as React, Figma, Rails, and Styled System. These icons are integral to the GitHub interface, providing a consistent and recognizable visual language across different platforms.
Icons should be easy to understand and useful in navigating the interface.
Icon design sticks to predetermined sizes and colors to ensure ease of recognition.
New icons can only be added when they’re necessary and meet the Octicons design guidelines for use.
Primer Components Templates
A-B
C-F
H-O
P-S
T-U
Accessibility in Primer
GitHub's aim is to be the home for all developers and strives for Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance. This includes all of WCAG 2.0 AA plus additional considerations.
Keyboard accessibility: All interactive elements should be accessible and activated using only a keyboard.
Color contrast: Improving color contrast in both light and dark modes.
Labels for charts and graphs: Connecting labels to graphs with lines or patterns.
Popovers: Making popovers operable using only a keyboard.
Other Resources
Github-primer: The page includes code, documentation, and resources for using Primer in projects.
Medium | Primer Design: Articles about Experiences, stories & insights from the Primer Design team.
Warpspire | Taste and The Zen of GitHub: An article about design decisions and the philosophies of GitHub.
YouTube | Prototyping with Primer React: The video shares helpful tips to encourage users to create prototypes leveraging Primer resources.