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.

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.

• Input
• Select
• Tile
• Radio Tile
• Checkbox Tile