Color plays a critical role in an interface’s usability. It helps the user know which actions to take, and understand hierarchy and relationships between elements. Primer’s color system is composed of different color modes, with their own color scale. Colors are named based on the function they perform in the interface.
GitHub's UI can be rendered in a variety of different color modes. Every element on GitHub’s interface maps to a color in the scale for each color mode.
Foundation variables are the building blocks of all interfaces. Use them to create layouts and content.
|Main UI backgrounds. It's used in most components and surfaces.|
|🟡 Deprecating soon|
|Surface on elements that are displayed with elevation. For example, dropdowns and popovers.|
|Surface on views where the content is the primary focus. For example, feeds and timelines.|
|Main border to create boundaries. Critical to understanding the interface's hierarchy.|
|Secondary border to emphasize separation between elements.|
|Low opacity border designed to blend with backgrounds like images on avatars or primary buttons.|
|Provides high readability. Default text and icons, and most foregrounds.|
|Provides medium readability. Used to create hierarchy in combination with |
|Provides low contrast. Used for disabled states — in these cases, it's acceptable that it does not pass general text contrast requirements.|
|Used for text and icons on color backgrounds.|
Color roles are defined by the meaning they convey in the UI. Primer has 8 color roles with 4 variants each.
|Use to highlight content without any added meaning.|
|Use to draw attention to interactive elements.|
|Use to expresses the completion or positive outcome of a task.|
|Use to warn of pending tasks or highlight active content.|
|Use when there are more than 3 levels of states, for example in heatmaps.|
|Use to inform of error or another negative message.|
|Completion color for productivity and code review workflows.|
|Color suite for all Sponsors-related content.|
|Text and icons.|
|High contrast for background and borders.|
|Highest contrast for background and borders. Use only with the |
|Medium contrast alpha value, recommended for borders.|
|Low contrast solid color, recommended for backgrounds.|