Primer Design System
Design, construct, and produce using the design system on GitHub
Visit Website Figma File
About Primer Design System
Design, construct, and produce using the design system on GitHub
GitHub produced Primer for GitHub. We adore it so much that they decided to make it open-source so that the community may use Primer to create their own projects.
Interaction Rules
The Primer's interface guidelines are a set of standards, use conventions, and concepts for developing GitHub interfaces.
Foundations
the core components of the design system, like color and typeface, that form the basis of all GitHub interfaces.
Accessibility
Tools, standards, and principles for creating accessible GitHub interfaces.
UX patterns
design principles for typical user workflows.
Components
Guidelines for each Primer component's design and use.
Using Figma
An instruction manual for using Figma to develop user interfaces at GitHub.
FAQ
What is the Primer Design System?
The Primer Design System is a comprehensive set of design guidelines and resources developed by GitHub for creating consistent and accessible user interfaces. It encompasses interaction rules, foundational elements, accessibility standards, UX patterns, component guidelines, and instructions for using Figma.
Who developed the Primer Design System?
GitHub developed Primer for its own use initially but later decided to make it open-source, allowing the broader community to utilize Primer for their own projects.
What does the Interaction Rules section of Primer cover?
The Interaction Rules provide standards, conventions, and concepts for developing interfaces on GitHub. These guidelines help ensure consistency and clarity in user interactions across different GitHub products and features.
What are the Foundations of the Primer Design System?
Foundations include core components such as color and typeface, forming the basis of all GitHub interfaces. These foundational elements establish the visual identity and style consistency across GitHub's design ecosystem.
How does Primer address accessibility in design?
Primer includes tools, standards, and principles for creating accessible interfaces on GitHub. By adhering to accessibility guidelines, Primer ensures that GitHub interfaces are usable and inclusive for all users, regardless of their abilities.
What are UX patterns in the context of the Primer Design System?
UX patterns in Primer refer to design principles for typical user workflows. These patterns help designers and developers create intuitive and efficient user experiences by providing guidance on common interaction scenarios.
How does Primer facilitate interface design using Figma?
Primer provides an instruction manual for using Figma, a popular design tool, to develop user interfaces at GitHub. This resource guides designers through the process of leveraging Figma's features to implement Primer's design guidelines effectively.
Blog Posts About Design System
Related Products View All
P
Pluralsight Design System
The Pluralsight Design System strives toward a cohesive design language for Pluralsight’s products, a shared vocabulary for their teams, and basic building blocks to accelerate development.
H
Human Interface Guidelines
Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.
S
Seek Style Guide
The SEEK styleguide's purpose is to enable the creation of content that will assist our users to complete tasks easily and hopefully enjoy the experience.
S
ServiceNow Design System
The ServiceNow Design System is a living system that empowers us to design and achieve a consistent, efficient, and high quality visual language that brings cohesion and familiarity to the user experience across the platform.
N
Nachos
Nachos is Trello's design system. This comprehensive guide and resource library contains everything you’ll need to design with us, including our core principles, visual design and interface components.
P
Photon Design System
Photon is the Firefox design language to build modern, intuitive, delightful experiences, for products across all platforms – from mobile to desktop, from TV to the next big thing.
P
Predix Design System
Our user interface components enable you to quickly and easily create Industrial Internet web applications that run on dedicated Predix services and data.
C
Canvas Design System
This library showcases the building blocks that make up Hubspot's design system, from colors and typography to React-based components and data visualization tools.
G
Global Experience Language (GEL)
GEL is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services.
Y
Yelp Styleguide
The styleguide is a resource that provides a common language around Yelp’s UI patterns. We use it to maintain modular front-end code and visual consistency across the web app.
