[go: up one dir, main page]

Color

Color use

There are three color palettes used in the product:

  1. UI - For all surfaces, content, and user interface (UI) elements.
  2. Themes - For user preferences and to differentiate GitLab instances.
  3. Data visualization - For all data visualization, including charts and graphs.

Colors are constant design tokens that keep use predictable and consistent. The main function of color is to optimize the visual presentation of content by establishing a meaningful hierarchy, indicating interaction, and communicating meaning. The following principles help to think about color use consistently.

Design principles

The same palettes are used for light and dark UI, though they may be applied differently in each. The following principles and considerations apply generally, and to light and dark UI respectively.

  • Surfaces are top lit by a single, invisible, pure white light source.
  • Surfaces reflect light and don't emit it or glow.
  • Forward elements are lighter and receding ones are darker.
  • UI elements, like buttons and alerts, rely on chromatic hues and neutrals for meaning and hierarchy, and adapt contrast based on the surface.
Light UIDark UI
Surfaces are made of light materials and text uses darker colors.Surfaces are made of dark materials and text uses lighter colors. Some elements will feel dimmed, while others feel inverted.
Shadows and borders are stronger indicators of depth than brightness.Brightness is a stronger indicator of depth than shadows or borders.
More color may be needed to indicate meaning or draw attention to an element as more light is being cast from the display.Color stands out more in dark UI, and as a result, less of it may be needed to convey the same meaning or draw the same amount of attention as in light UI.

UI

We have five primary chromatic color ramps that include a total 55 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 chromatic hues:

Blue

Blue indicates a current or active state. It communicates management, progress, connectivity, or organization.

  • color.blue.50 #e9f3fc AAA 15.9 F 1.1
  • color.blue.100 #cbe2f9 AAA 13.4 F 1.3
  • color.blue.200 #9dc7f1 AAA 10.1 F 1.8
  • color.blue.300 #63a6e9 AA 6.9 F 2.6
  • color.blue.400 #428fdc AA 5.3 AA+ 3.4
  • color.blue.500 #1f75cb AA+ 3.8 AA 4.7
  • color.blue.600 #2f68b4 AA+ 3.2 AA 5.6
  • color.blue.700 #2f5ca0 F 2.7 AA 6.6
  • color.blue.800 #284779 F 1.9 AAA 9.3
  • color.blue.900 #213454 F 1.4 AAA 12.5
  • color.blue.950 #1d283e F 1.2 AAA 14.7

Green

Green indicates success. It communicates save, create, add, available, done, approved, or resolved.

  • color.green.50 #ecf4ee AAA 15.9 F 1.1
  • color.green.100 #c3e6cd AAA 13.2 F 1.4
  • color.green.200 #91d4a8 AAA 10.3 F 1.7
  • color.green.300 #52b87a AAA 7.2 F 2.5
  • color.green.400 #2da160 AA 5.4 AA+ 3.3
  • color.green.500 #108548 AA+ 3.8 AA 4.7
  • color.green.600 #2f7549 AA+ 3.2 AA 5.6
  • color.green.700 #306440 F 2.6 AA 6.9
  • color.green.800 #225131 F 1.9 AAA 9.2
  • color.green.900 #1e3e28 F 1.5 AAA 11.8
  • color.green.950 #17291c F 1.2 AAA 15.3

Orange

Orange indicates attention is required. It communicates warning, pending, missing, or impeded progress.

  • color.orange.50 #fdf1dd AAA 15.9 F 1.1
  • color.orange.100 #f5d9a8 AAA 13.0 F 1.4
  • color.orange.200 #e9be74 AAA 10.2 F 1.7
  • color.orange.300 #d99530 AAA 7.0 F 2.5
  • color.orange.400 #c17d10 AA 5.3 AA+ 3.4
  • color.orange.500 #ab6100 AA+ 3.8 AA 4.7
  • color.orange.600 #995715 AA+ 3.2 AA 5.6
  • color.orange.700 #894b16 F 2.6 AA 6.8
  • color.orange.800 #693c14 F 1.9 AAA 9.3
  • color.orange.900 #532e16 F 1.5 AAA 11.9
  • color.orange.950 #382315 F 1.2 AAA 14.8

Red

Red indicates a problem. It communicates a critical state, destructive action, error, failure, removal, stop, or decline.

  • color.red.50 #fcf1ef AAA 16.1 F 1.1
  • color.red.100 #fdd4cd AAA 13.1 F 1.4
  • color.red.200 #fcb5aa AAA 10.5 F 1.7
  • color.red.300 #f6806d AA 7.0 F 2.6
  • color.red.400 #ec5941 AA 5.1 AA+ 3.5
  • color.red.500 #dd2b0e AA+ 3.8 AA 4.7
  • color.red.600 #c02f12 AA+ 3.1 AA 5.7
  • color.red.700 #a32c12 F 2.5 AAA 7.2
  • color.red.800 #812713 F 1.9 AAA 9.4
  • color.red.900 #582014 F 1.4 AAA 12.9
  • color.red.950 #3e1a14 F 1.2 AAA 15.4

Purple

Purple is not assigned meaning in the same way the other chromatic hues are, and instead is associated with the GitLab brand. It communicates an affinity with the brand, and is used for things like illustrations or company-related announcements in the product.

  • color.purple.50 #f4f0ff AAA 15.9 F 1.1
  • color.purple.100 #e1d8f9 AAA 13.1 F 1.4
  • color.purple.200 #cbbbf2 AAA 10.1 F 1.8
  • color.purple.300 #ac93e6 AA 6.8 F 2.6
  • color.purple.400 #9475db AA 4.9 AA+ 3.6
  • color.purple.500 #7b58cf AA+ 3.5 AA 5.1
  • color.purple.600 #6a4fb4 F 2.9 AA 6.2
  • color.purple.700 #5c47a6 F 2.5 AAA 7.2
  • color.purple.800 #493c83 F 1.9 AAA 9.3
  • color.purple.900 #342d59 F 1.4 AAA 12.6
  • color.purple.950 #27243e F 1.2 AAA 14.9

Neutral

Neutrals are primarily used for surfaces and within components to help differentiate hierarchy. Use shades of gray as backgrounds, borders, and shadows to emphasize areas or set them apart.

  • color.neutral.0 #fff AAA 17.8 F 1.0
  • color.neutral.10 #fbfafd AAA 17.1 F 1.0
  • color.neutral.50 #ececef AAA 15.1 F 1.2
  • color.neutral.100 #dcdcde AAA 13.0 F 1.4
  • color.neutral.200 #bfbfc3 AAA 9.7 F 1.8
  • color.neutral.300 #a4a3a8 AAA 7.1 F 2.5
  • color.neutral.400 #89888d AA 5.1 AA+ 3.5
  • color.neutral.500 #737278 AA+ 3.7 AA 4.8
  • color.neutral.600 #626168 F 2.9 AA 6.1
  • color.neutral.700 #4c4b51 F 2.1 AAA 8.6
  • color.neutral.800 #3a383f F 1.5 AAA 11.6
  • color.neutral.900 #28272d F 1.2 AAA 14.8
  • color.neutral.950 #18171d F 1.0 AAA 17.8
  • color.neutral.1000 #050506 F 1.1 AAA 20.4

Alpha

Alpha colors are used only to effectively shade an element in relation to the surface below. See blend modes and opacity.

Dark

  • color.alpha.dark.2 rgba(05, 05, 06, 0.02)
  • color.alpha.dark.4 rgba(05, 05, 06, 0.04)
  • color.alpha.dark.6 rgba(05, 05, 06, 0.06)
  • color.alpha.dark.8 rgba(05, 05, 06, 0.08)
  • color.alpha.dark.16 rgba(05, 05, 06, 0.16)
  • color.alpha.dark.24 rgba(05, 05, 06, 0.24)
  • color.alpha.dark.40 rgba(05, 05, 06, 0.4)

Light

  • color.alpha.light.2 rgba(255, 255, 255, 0.02)
  • color.alpha.light.4 rgba(255, 255, 255, 0.04)
  • color.alpha.light.6 rgba(255, 255, 255, 0.06)
  • color.alpha.light.8 rgba(255, 255, 255, 0.08)
  • color.alpha.light.16 rgba(255, 255, 255, 0.16)
  • color.alpha.light.24 rgba(255, 255, 255, 0.24)
  • color.alpha.light.36 rgba(255, 255, 255, 0.36)

Themes

A user may choose between ten different themes to customize the appearance of the navigation in GitLab. Each theme draws inspiration from one of the hues in the UI palette.

Indigo / Light indigo

Indigo and light indigo share the same color.theme-indigo.* design tokens.

  • color.theme-indigo.10 #f8f8ff AAA 16.8 F 1.1
  • color.theme-indigo.50 #f1f1ff AAA 15.9 F 1.1
  • color.theme-indigo.100 #dbdbf8 AAA 13.1 F 1.4
  • color.theme-indigo.200 #c7c7f2 AAA 10.9 F 1.6
  • color.theme-indigo.300 #a2a2e6 AAA 7.5 F 2.4
  • color.theme-indigo.400 #8181d7 AA 5.1 AA+ 3.5
  • color.theme-indigo.500 #6666c4 AA+ 3.6 AA 4.9
  • color.theme-indigo.600 #5252b5 F 2.7 AA 6.5
  • color.theme-indigo.700 #41419f F 2.1 AAA 8.5
  • color.theme-indigo.800 #303083 F 1.6 AAA 11.2
  • color.theme-indigo.900 #222261 F 1.2 AAA 14.3
  • color.theme-indigo.950 #14143d F 1.0 AAA 17.5

Green / Light green

Green and light green share the same color.theme-green.* design tokens.

  • color.theme-green.10 #eef4ef AAA 16.0 F 1.1
  • color.theme-green.50 #dde9de AAA 14.2 F 1.3
  • color.theme-green.100 #b1d6b5 AAA 11.2 F 1.6
  • color.theme-green.200 #8cc497 AAA 8.9 F 2.0
  • color.theme-green.300 #69af7d AA 6.8 F 2.6
  • color.theme-green.400 #499767 AA 5.0 AA+ 3.6
  • color.theme-green.500 #308258 AA+ 3.8 AA 4.7
  • color.theme-green.600 #25744c AA+ 3.1 AA 5.7
  • color.theme-green.700 #1b653f F 2.5 AAA 7.0
  • color.theme-green.800 #155635 F 2.0 AAA 8.7
  • color.theme-green.900 #0e4328 F 1.6 AAA 11.3
  • color.theme-green.950 #052e19 F 1.2 AAA 14.9

Blue

  • color.theme-blue.10 #e6ecf0 AAA 14.9 F 1.2
  • color.theme-blue.50 #cdd8e3 AAA 12.3 F 1.4
  • color.theme-blue.100 #b9cadc AAA 10.6 F 1.7
  • color.theme-blue.200 #a6bdd5 AAA 9.2 F 1.9
  • color.theme-blue.300 #81a5c9 AA 6.9 F 2.6
  • color.theme-blue.400 #628eb9 AA 5.2 AA+ 3.4
  • color.theme-blue.500 #4977a5 AA+ 3.8 AA 4.7
  • color.theme-blue.600 #346596 F 2.9 AA 6.1
  • color.theme-blue.700 #235180 F 2.2 AAA 8.2
  • color.theme-blue.800 #153c63 F 1.6 AAA 11.3
  • color.theme-blue.900 #0b2640 F 1.2 AAA 15.4
  • color.theme-blue.950 #04101c F 1.1 AAA 19.2

Light blue

  • color.theme-light-blue.10 #eef3f7 AAA 15.9 F 1.1
  • color.theme-light-blue.50 #dde6ee AAA 14.1 F 1.3
  • color.theme-light-blue.100 #c1d4e6 AAA 11.7 F 1.5
  • color.theme-light-blue.200 #a0bedc AAA 9.2 F 1.9
  • color.theme-light-blue.300 #74a3d3 AA 6.7 F 2.7
  • color.theme-light-blue.400 #4f8bc7 AA 5.0 AA+ 3.6
  • color.theme-light-blue.500 #3476b9 AA+ 3.8 AA 4.7
  • color.theme-light-blue.600 #2268ae AA+ 3.1 AA 5.7
  • color.theme-light-blue.700 #145aa1 F 2.6 AA 7.0
  • color.theme-light-blue.800 #0e4d8d F 2.1 AAA 8.5
  • color.theme-light-blue.900 #0c4277 F 1.7 AAA 10.2
  • color.theme-light-blue.950 #0a3764 F 1.5 AAA 12.0

Red

  • color.theme-red.10 #faf4f3 AAA 16.4 F 1.1
  • color.theme-red.50 #f4e9e7 AAA 15.0 F 1.2
  • color.theme-red.100 #ecd3d0 AAA 12.5 F 1.4
  • color.theme-red.200 #e3bab5 AAA 10.1 F 1.8
  • color.theme-red.300 #d59086 AA 6.9 F 2.6
  • color.theme-red.400 #c66e60 AA 4.9 AA+ 3.6
  • color.theme-red.500 #ad4a3b AA+ 3.2 AA 5.5
  • color.theme-red.600 #a13322 F 2.6 AA 7.0
  • color.theme-red.700 #8f2110 F 2.0 AAA 8.8
  • color.theme-red.800 #761405 F 1.6 AAA 11.2
  • color.theme-red.900 #580d02 F 1.2 AAA 14.3
  • color.theme-red.950 #380700 F 1.0 AAA 17.5

Light red

  • color.theme-light-red.10 #fdf9f8 AAA 17.0 F 1.0
  • color.theme-light-red.50 #faf2f1 AAA 16.1 F 1.1
  • color.theme-light-red.100 #f6d9d5 AAA 13.4 F 1.3
  • color.theme-light-red.200 #ebada2 AAA 9.4 F 1.9
  • color.theme-light-red.300 #e07f6f AA 6.3 F 2.8
  • color.theme-light-red.400 #d36250 AA 4.8 AA+ 3.7
  • color.theme-light-red.500 #c24b38 AA+ 3.7 AA 4.8
  • color.theme-light-red.600 #b53a26 AA+ 3.1 AA 5.8
  • color.theme-light-red.700 #a02e1c F 2.5 AAA 7.2
  • color.theme-light-red.800 #8b2212 F 2.0 AAA 9.0
  • color.theme-light-red.900 #751709 F 1.6 AAA 11.2
  • color.theme-light-red.950 #5c1105 F 1.3 AAA 13.7

Dark / Light

The dark and light (gray) themes use the neutral palette.

Interactive states

Color changes can be used to emphasize user actions. When used, they must be combined with other visual feedback. For example, :focus color changes are normally accompanied with a focus ring.

Typical state changes (light UI):

  • :hover a color becomes one step darker than at rest.
  • :focus a color becomes one step darker than at rest, matching :hover color.
  • :active a color becomes two steps darker than at rest.
  • Where there aren't enough steps to follow this pattern, prioritize :hover and :focus becoming a step darker.
Example button state color changes
A primary confirm button example with a color.blue.500 fill at rest (1), a color.blue.600 fill for hover and focus (2, 3), and a color.blue.700 fill when active (4). The color changes are combined with other visual feedback (cursor, focus ring) to communicate information about the interactive state.

Blend modes and opacity

It's preferred to used solid colors (no transparency or effects) for the highest level of predictability and consistency. However, there are limited instances where transparency (alpha) or mix-blend-mode can be used. For example, a component or element that can be placed on multiple surface colors, where the surface color may conflict with the component color or reduce contrast below a satisfactory contrast ratio.

A tertiary button is one component that uses a mix-blend-mode because the background on hover can be the same, or have similar lightness to, the surface color. Likewise, the chevron icons in the navigation sidebar in GitLab use mix-blend-mode to maintain at least a 3:1 contrast ratio against various theme background colors.

If a specific hex value is desired, use a solid color instead of approximating it with transparency or a blend mode.

Accessibility

Text presentation

At GitLab, we are dedicated to continually improving the accessibility of the application. Pajamas satisfies the Web Content Accessibility Guidelines (WCAG) AA level for normal text. Learn more in Accessibility.

  • Normal text - Text that is smaller than 18pt (24px) or 14pt bold (18.5px) and must have a contrast ratio of at least 4.5:1.
  • Large text - Text that is at least 18pt (24px) or 14pt bold (18.5px) and must have a contrast ratio of at least 3:1.
  • AAA - Pass 7:1+.
  • AA - Pass 4.5:1+.
  • AA+ - Pass, large text only 3:1+.
  • F - Doesn't pass.

Contrast ratios for each color step are calculated against light (color.neutral.0/#fff) and dark (color.neutral.950/#18171d) foreground colors. The 50–400 steps all meet a 4.5:1 contrast ratio or higher against color.neutral.950 (#18171d) or darker, while the 500–950 steps all meet a 4.5:1 contrast ratio against color.neutral.10 (#fbfafd) or lighter.

Color should never be the only visual means of communicating information (WCAG 1.4.1).

Last updated at: