Design
Guidelines for building design patterns using Primer.
Design flexible, robust, and repeatable patterns that build on a set of solid foundations.
Design system foundations
Primer is the stable trusted layer. At its foundations are typography, color, spacing, and layout.
Upcoming patterns and proposals
To avoid duplicated efforts and to accommodate upcoming changes, check in on the Primer backlog.
➡️ Primer backlog (GitHub staff only)
Context and use cases
When creating a new pattern, we advise starting with an audit of similar patterns that already exist as well as identifying opportunity areas where the new pattern can be used. Consider as many different use cases as possible. The goal is to create patterns that are flexible, reusable, and that solve concrete problems.
Finally, consider where a pattern will live in the context of a system. A pattern designed for a specific context is not likely to be considered a reusable component.
Share early, and often
There are many opportunities to get feedback from Primer maintainers.
Systems designers provide extra context and considerations for designing with system-wide considerations Accessibility designers provide context and considerations for accessible and inclusive design Product designers consider the designs in the context of their own product area and whether their specific use cases could benefit from your work Design engineers can consider how something may be implemented, what is realistic within the existing constraints, and what is unfeasible.
There are different ways you can ask for and get feedback:
- (GitHub staff only) Post questions to the #primer Slack channel for asynchronous feedback
- (GitHub staff only) Attend Primer's "Primer Patterns and API" working session by requesting an invite in the #primer Slack channel
- (GitHub staff only) Attend Primer or Primer Accessibility open office hours
Design checklist
All design patterns for Primer Library consideration should at minimum: