Skip to content

Color

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.

modes

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.

functional-demo

Foundations

Foundation variables are the building blocks of all interfaces. Use them to create layouts and content.

VariableRole
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. Do not use for placeholder or disabled states.
fg-subtleProvides low contrast. Used for disabled states — in these cases, it's acceptable that it does not pass general text contrast requirements.
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

PrefixRole
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

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

Variants

SuffixRole
-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
1 contributorauareyou
Last edited by auareyou on July 29, 2021