Skip to content


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.


Color modes

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.

canvas-defaultMain UI backgrounds. It's used in most components and surfaces.
canvas-subtle🟡 Deprecating soon
canvas-overlaySurface on elements that are displayed with elevation. For example, dropdowns and popovers.
canvas-insetSurface on views where the content is the primary focus. For example, feeds and timelines.
border-defaultMain border to create boundaries. Critical to understanding the interface's hierarchy.
border-mutedSecondary border to emphasize separation between elements.
border-subtleLow opacity border designed to blend with backgrounds like images on avatars or primary buttons.
fg-defaultProvides high readability. Default text and icons, and most foregrounds.
fg-mutedProvides medium readability. Used to create hierarchy in combination with fg-default.
fg-subtleProvides low contrast. Used for placeholder text.
fg-on-emphasisUsed for text and icons on color backgrounds.

Color roles

Color roles are defined by the meaning they convey in the UI. Primer has 8 color roles with 4 variants each.

Color role anatomy: color role prefix + variant suffix

Global roles

neutral-Use to highlight content without any added meaning.
accent-Use to draw attention to interactive elements.
success-Use to expresses the completion or positive outcome of a task.
attention-Use to warn of pending tasks or highlight active content.
severe-Use when there are more than 3 levels of states, for example in heatmaps.
danger-Use to inform of error or another negative message.

GitHub-specific roles

done-Completion color for productivity and code review workflows.
sponsors-Color suite for all Sponsors-related content.


-fgText and icons.
-emphasisHigh contrast for background and borders.
-emphasis-plusHighest contrast for background and borders. Use only with the neutral- prefix.
-mutedMedium contrast alpha value, recommended for borders.
-subtleLow contrast solid color, recommended for backgrounds.
Edit this page on GitHub
2 contributorssimuraiauareyou
Last edited by simurai on October 13, 2021