We have four primary chromatic colors and their derivatives, totaling 44 colors for use across the application. These colors give flexibility during the design process, while also providing a harmonious palette that looks consistent and in line with our brand styles.
Though deciding which color to use depends on the situation, here are some general guidelines for using the four primary colors:
- Blue indicates a current or active state. It communicates: management, progress, connectivity, or organization.
- Green indicates success. It communicates: save, create, add, available, done, approved, or resolved.
- Orange indicates 'attention-required.' It communicates: warning, pending, missing, or impeded progress.
- Red indicates a problem. It communicates: critical states, destructive actions, errors, fails, removals, or declines.
Color priorities work similarly to font weights; different font weights can be used to create contrasting typography that communicates hierarchy. We apply this same logic to colors by tagging colors according to their priority: from 1 to 4. These priorities can be used to make better choices. When choosing how to apply color to a UI component:
- Priority 1 is equal to the color weight 500.
- Priority 2 is equal to the color weights 300 and 700.
- Priority 3 is equal to the color weights 100 and 900.
Priorities skip weights because, in most situations, the contrast between two adjoining weights would be subtle. However, those shades are available to use when needed. Color priorities are meant to act as a guideline, not a strict set of rules.
At GitLab, we are dedicated to continually improving the accessibility of the application. Currently, all chromatic colors pass the Web Content Accessibility Guidelines (WCAG) AA level for large text when used as a background color. Learn more in Accessibility.
Our neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.
Transparencies are used only to indicate hover and active states within themes. Each theme has its own series of four transparencies to utilize with alpha levels ranging from 0.02 to 0.08.
There are ten different theme options that users can choose to customize the appearance of the application header and navigation sidebar. Each theme draws inspiration from one of our primary chromatic colors, the neutral palette, or the corporate indigo color. For each of these colors, there is a dark and a light theme, which result in the following palettes: