IoT — Cool gray is a great background color for data visualization

Our efforts were part of a design refresh for the Cirrus release of the Predix Design System at GE Digital in 2017. We revisited the entire framework of colors, typography, iconography, layout, and navigation In this article, we discuss how we generated the grays that make up the background framework of the Cirrus design language. Photo: Jonathan Chen

Finding the right grays for dashboards

Defining colors for screen layouts that work well for the Internet of Things can be a complex task. The Predix Design System is a visualization platform with simple background elements that set the stage for colorful data visualization. The designer needs humility to accept diverse environmental use cases. Some GE users work inside dark control-rooms and others on a bright railroad yard with harsh lighting conditions. For the design team, this means that we have to support lights-on and lights-off experiences and everything in between. Our users work in our apps for eight hours or more a day, so our designs must have an elegant appeal that truly delights our users. The designs must be as attractive as consumer apps — “If not better!” said Ken Skistimas, Design Director of the Predix Design System, in this presentation about Consistency and Flexibility of Design Systems. In other words, apps for the IoT have to be even easier to use than consumer apps: easier to scan, navigate, and complete tasks.

A systematic approach to ensure adoption by the community

The apps must accomplish this while enabling interactive data visualizations from power plant dashboards to detailed single-asset data screens. This requires language that is modular, expandable, and obvious. The initial design choices need to be systematic and understandable — achieving repeatable results to empower the vast community of GE designers and developers. Everyone can contribute. To ensure adoption and future growth of our component library, our modular approach allows for design and code contributions from teams across the company.

How colorful can grays be?

For the 2015 MVP release of the Predix Design System, we used a set of 10 cool grays. Our hypothesis was that the choice of too many grays would be confusing and not support our systematic approach. Additionally, this early gray palette was created using artistic intuition, and the result looked great at face value. We thought: a great palette, time to celebrate! However, looking back, it is obvious that the background grays appear relatively bland and colorless when applied to the layouts.

The gray frame was supposed to make the page content pop. The medium gray area on the top of the page was referred to as the spine, a sort of faceplate summarizing the most important information about an asset.

Later, when we visualized the MVP grays in the graph shown below, we noticed that the set was missing certain steps that could be useful when composing layouts. That graph also explained why the saturation expression was not evenly distributed. In other words, some grays looked more blue than others. We learned that dark grays seemed to require more of the blue to appear saturated.

MVP gray palette

The graphic below shows blue saturation over brightness percentage

The color picker in Illustrator is not the best tool to create a sequence of multiple, somewhat matching colors. Plain appearance can be misleading. The darker colors by themselves don’t appear as saturated as the lighter section.

20 steps of grays

Our new approach was to reverse the creation process. We first projected the saturation onto a graph and then deducted the gray values from the actual graph. This visual approach helped us create a rational, well-spaced palette. Additionally, we decided to double the steps to twenty. It’s not that much more work to manage 20 over 10 grays. Having 20 grays to choose from increased design flexibility significantly when we later applied the grays to the dark and light themes. To have a sufficient amount of steps in the lighter area of the set, we added $gray2 — unscientifically squeezed between two regular steps as shown below.

As an experiment, we tried different curves. The curves resulted in a less saturated palette with an uneven distribution. The lighter colors appear too neutral.

The linear function works best

According to our experiments, a linear function works best. The straight line creates a visually even saturated palette. However, if we stick strictly to that line, some lighter colors change sides and appear too saturated. That becomes visible especially on devices with higher contrast settings like large TVs where certain colors may appear more blue than gray. We adjusted the respective colors to work well with those screens and on small, low-contrast monitors.

As you can see, for $gray5 and $gray7 we nudge the saturation a few percentage points lower to create an evenly saturated appearance between steps.

Nomenclature choices do not have to be driven by dilemma

Let’s talk about nomenclature. A designer might consider this a boring topic, but when done wrong, nomenclature can get pretty exciting. Those who consume color names range from UX designers to developers to product managers and a lot of other folks who are generally oblivious to colors (especially grays). That means the label has to be clear, easy to remember, and easy to write and communicate.

We decided to give the grays numbers for several reasons. In a legacy version of the system, we worked with descriptive labels like “Dark Gray,” “Darkest Gray,” and “Dark Darkest Gray,” etc. This approach is not only confusing, but also doesn’t scale to 20 items. Our goal was to use the same label in code as in general conversations. We are not using a leading zero because we will rarely sort the colors by name. Underscores seemed superfluous, and would have to be typed extra in code every time a color is defined. We declined using upper case letters because CSS is agnostic to upper and lower cases. Additional branding keys like “GE” or “PX” were quickly dismissed.

They are frame, background and separators. The UI is toned down to set the stage for interactivity and data visualization.

After testing the colors on different platforms, we clearly achieved a robust language.

Establishing a light and a dark theme in layouts

Now that we have a rich vocabulary of contrasting grays, we can create sophisticated compositions.

Light: white, $gray1 and $gray2

Dark: $gray16, $gray17, $gray18

Nav: $gray19 — almost black!

Determining foundational text colors

Black text on a white background is the traditional choice for text in print. On a screen, the contrast might appear harsh, unrefined, and cause eye fatigue.

For the MVP, black text was the obvious choice to achieve the most accessible contrast in an information display. Surprisingly, we learned that maximum contrast is not desirable for our use cases. Our research shows that high contrast causes users to complain about eye fatigue. Our users work with our apps for eight hours or more. As a result, maximum contrast does not equal maximum user friendliness and guaranteed accessibility. Contrast needs to be carefully balanced.

Key-Value Pairs are a very common element for the Industrial Internet. To create a clear information hierarchy, we offer a primary and a secondary gray to establish clear visual hierarchy for each theme. We use primary for the actual information and secondary for the accompanying label. The light theme primary gray is $gray15 and the secondary gray is $gray10. The dark theme primary gray is $gray5 and the secondary gray is also $gray10. Evidently, $gray10 works the same for both themes. Coincidence or systematic genius?

Light theme primary and secondary grays. Dark theme primary and secondary grays.
Accessibility tests for light theme and dark theme. With a tool provided by Eight Shapes.

Interactive elements: hue 200˚ is everpresent

Our main gray framework and interactive elements are built around a hue of 200˚. The actionable blue pulls the user forward and indicates primary actions in text links and Call-to-Action buttons. Items colored select green indicate the current selection in tabs and lists. The actionable and select colors are intended to perform well in both the light and the dark theme. These palettes have to stand out by the intensity of their color and at the same time be dark enough for white text to be perfectly highly legible.

We intentionally distinguish interaction and visualization colors so that they can co-exist without ambiguity about which blue represents information and which blue is a call for action.

In a legacy version of the design system, we had one blue for everything: brand, actionable, selected, and data visualization. The designers found ways to make this selection work, but the use was not ideal.
The $primary-default blue did not stand out well in the dark theme background colors. To compensate, we added a lighter version just for actionable text. This wasn’t an easy choice for the design system team, who would prefer not to have a single alternative color, but the effect works aesthetically and represents a big usability improvement.

Recording HSB colors in HEX

We were tricked by Adobe Illustrator’s color management and the mathematical required rounding of HEX colors and other inconsistencies. As summarized in the Adobe Forum, RGB, HEX, and HSB colors don’t exist in a clean 1:1 relationship. We defined the colors in HSB and recorded them in HEX format. The results might be slightly rounded but they are still reasonably presentable to a user not equipped with an eyedropper.

A little inconsistency between the light and dark theme greatly improves the user experience and legibility for actionable items within the dark theme.
Given these technical limitations, our colors are all situated around a hue of 200˚.

Companion colors to create interactive fluidity

The interactive states need companion colors to create a fluid, interactive appearance. These companion colors relate to the basic color and promote the desired feel for users when they react to hover and pressed actions. The “…-light” colors are created for the background of selected text fields.

Interactivity and fluidity brings the experience to life.

Component samples — colors in action

Summary and outlook

In summary, defining a color framework for screen layouts is not difficult. A rational approach and a limiting theoptions can help provide structured results.

The modular background elements set the stage. They are populated by crisp typography, clearly interactive elements, and outstanding interactive data visualization. Combining these ingredients creates the basic framework for every screen’s design in GE’s Predix Design System.

The modular system now allows for a wide variety of compositions. A page might use the light theme entirely, or it could use both themes at the same time to emphasize certain sections or bring out the visualizations. Or the theme could be held entirely in dark colors to allow use in low light conditions.

Related links

Color Usage Guidelines — Predix Design System Team

How to use colors to manage big data — Elise Blanchard

Balancing Consistency and Flexibility in Design Systems — Kenneth Skistimas