Colors
Color is an essential aspect of design. It’s used to communicate importance and status to the user.

Overview

The 2021 rebrand brought a new color palette to Nielsen. It’s a more vivid and rich set of colors than our previous branding. The palette is both flexible and inclusive. It encompasses a broad spectrum that will be cohesive across all our applications.

Because of our emphasis on accessibility, the GDS team worked with the Marketing team to expand Nielsen’s brand colors to the 11-scale interface colors we have in GDS. These colors fit the needs of UX designers and product development. The tweaks allow for proper text color contrast, better visual hierarchy, and complex color theming possibilities

Across a palette, colors can reflect wildly different luminances. This creates issues in achieving proper contrast ratios for text (4.5:1) and UI (3:1) elements. Common colors like orange, yellow, and aqua usually have low luminance and contrast ratios on white text. Because of this, we’ve worked to match the luminance at each step of the scale. For example, we went through several iterations to ensure that gray-100 and blurple-100 would work well with each other since they would commonly be used next to each other.

All of our components are built to work in both light and dark mode. To do this, we optimized the colors at the lighter and darker ends of the scale. Those shades at the top and bottom give us excellent contrast and differentiation for our UI elements. When we create the dark mode of a component, we invert the color scale and tweak as needed.

GDS has nine colors: gray, blurple, aqua, eggplant, blue, green, red, orange, and yellow. Each color has eleven steps. Including the colors white and black gives us a total of 101 interface colors. For data visualizations the interface colors should be used most of the time. Some data visualizations require a sequential or divergent color palette to best show changes in data. We have plans to create these, but they are still in progress.

Neutral

white
gray-0
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
black

Primary

white
blurple-0
blurple-100
blurple-200
blurple-300
blurple-400
blurple-500
blurple-600
blurple-700
blurple-800
blurple-900
blurple-1000
black

Secondary

white
aqua-0
aqua-100
aqua-200
aqua-300
aqua-400
aqua-500
aqua-600
aqua-700
aqua-800
aqua-900
aqua-1000
black

Tertiary

white
eggplant-0
eggplant-100
eggplant-200
eggplant-300
eggplant-400
eggplant-500
eggplant-600
eggplant-700
eggplant-800
eggplant-900
eggplant-1000
black

Info

white
blue-0
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
black

Success

white
green-0
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
black

Danger

white
red-0
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
black

Warning

white
orange-0
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
black

Highlight

white
yellow-0
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
black

Alternate Backgrounds

Providing proper contrast is an important principle in GDS. Because of this, several components offer an alternate background option. This helps to set the element apart from the element’s background color.

In light mode, backgrounds are white, gray-0, or gray-100. In dark mode, backgrounds are either black, gray-1000, or gray-900. Choose the proper component variant based on your page’s background.

Components with alternate backgrounds:
  • Input
  • Select
  • Tile
  • Radio Tile
  • Checkbox Tile