Design System Foundations

Colors

Following the 2021 Nielsen re-brand, our marketing department introduced a new set of colors that would shape how we make future products. This aligned extremely well with the introduction of Nielsen's design system.

Starting off with these marketing colors, I had to slightly tweak and transform the palettes in order to work better for the UI in our products. Accessibility was already established as a strong principle for this new design system, so we was able to craft a set of nine main colors with an 11-scale for each.

This would give us enough flexibility to have a variation of color lightnesses to pick from for BOTH a light and dark mode UI (another thing that would be coming in the future).

In order to achieve balance in our color scales for both light mode and dark mode, I used the "Stark" plugin in Figma to measure the color contrast between each color and a white/black background. The objective was to have roughly half of the colors (the lighter half) fully accessible on a black background and the other half accessible on white, meaning that each color 4.5:1 contrast ratio. This way, when switching from light to dark mode, and vice versa, we could start by a simple inversion of our color scales and still maintain accessible requirements for all components.

Another intersting challenge with color came from the fact that some of our components needed to work on several different background colors. A good example of that was our context switcher, which may appear on both a white or gray-100 background.

By default, it had a gray-100 background because we aimed to achieve a subtle contrast with the background it was placed on. But this didn't work when placed on a gray-100 background, because the color doesn't show. The next logical choice was to make the gray color darker (gray-200) so that it shows up on both background types. But this strayed away from how we wanted to the component to show on a white background - it was a bit too bold.

This led to me instantiating the idea of Opacity Tokens, which are a way to represent the color normally on the "default" background, but still be able to show on alternate backgrounds. This was done by bumping the color up in the scale and giving it some opacity, so that it appeared the same as the normal token, until placing it on an alternate-colored background. I created a opacity tokens for several of our light shades gray and blurple for light mode, (as well as the alternate for dark mode) to give us maximum flexibility when creating and updating components in the future.

Typography

For our typography, we decided on a scale of eleven different sizes, with three font weights for each (regular, semi-bold, and bold). One of the main objectives for the new system was to increase legibility across our apps, specifically our data-heavy, highly dense B2B products. To do this we created a base-size of 16px for the system, using this size as our "Regular" variant for many of our components. This was a huge improvement, as most of our legacy apps use 12px or 13px as a base size and leads to significant strain on the eyes after using the product for a significant amount of time.

Line heights and letter spacing was also carefully chose to meet accessibility needs (WCAG 2.2 AA standards) for our products as well as making the text in our applications easier to read.

Inter was chosen as our go-to font for our product suite, as it is notorious for great readablity at larger and smaller sizes, and also has support for a large number of languages. We also enabled a number of Open Type features such as slashed zeroes, open digits, and monospaced numbers to increase legibility even more.

Because not ALL languages are covered through Inter, we have Noto Sans as a fallback option in case the language is not supported. With Nielsen being a global company and always expanding into new markets, it was highly important that we chose a font stack with full support, which had been previously problematic specifically with "right-to-left" langauges.

Spacing

Our spacing system was crafted based on a 4px grid system, and this helped maintain consistency from smaller components all the way up to full page layouts. Again, we went with an 11-scale of spacing tokens, from 2px (special token for borders) all the way up to 64px. These are used for most internal padding, margins, heights, within our components. We have a few common tokens (24, 32, 48px) that are used for the heights of a handful of our components, making placing components NEXT to each other easier to scale as our designers begin to build screens.

For spacing between components, or for screen layouts, I created a set of layout tokens to help with larger-scale organization. These range 192px, typically used for column widths in our layout system, all the way up to 1920px which is the biggest screen we provide support for on the web (margins simply infinitely increase after that).