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.
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 five different theme options for users to choose from that customize the appearance of the application header and navigation sidebar. These theme options make up four different color palettes: