UI Patterns

Design guidelines covering common user workflows.

Data visualization

placeholder, blank area with an gray background color

Data visualizations are helpful tools for conveying complex data in an engaging and understandable way. They're commonly used in dashboards and insights pages.

Learn more

Degraded experiences

placeholder, blank area with an gray background color

Ensuring that a page still renders and primary experiences are still available during downtime of optional service dependencies.

Learn more

Empty states

placeholder, blank area with an gray background color

Empty states are used to fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature.

Learn more

Feature onboarding

placeholder, blank area with an gray background color

Onboarding is a virtual unboxing experience that helps users get started with a feature. This is a guide for designing onboarding for the product and does not include what to do for marketing pages, email announcements, social media, etc.

Learn more

Forms

placeholder, blank area with an gray background color

Primer's form design guidelines aim to minimize the effort and cognitive load required to complete a task that requires data input from the user. For example, creating a new repo configuring settings, and logging in.

Learn more

Loading

placeholder, blank area with an gray background color

How to use loading states to help users stay informed and engaged while waiting.

Learn more

Navigation

placeholder, blank area with an gray background color

Navigation patterns help users understand where they are and where they can go next.

Learn more

Notification messaging

placeholder, blank area with an gray background color

Messaging components are used to provide important and relevant information to the user, including feedback, contextual information, product updates, and more.

Learn more

Progressive disclosure

placeholder, blank area with an gray background color

Progressive disclosures are a design pattern that hides and shows information based on user interaction. They should be used sparingly, only when it's necessary to truncate information.

Learn more

Saving

placeholder, blank area with an gray background color

Save patterns help users store and update their content and configuration throughout GitHub. These changes should be represented in the UI accurately, quickly, and obviously. Their behavior should inspire confidence and trust.

Learn more