I played the role of the lead visual designer for our design system from 2021 to 2023. As more and more brands are supported in professional applications, we would like to upgrade our design system to become a multi-brand design system. As part of the foundation, the limited colors became an issue with the top priority.

This task started in 2021 and has a big iteration afterward. It was completed in the autumn of 2022.

The issues to be addressed

• Limited support for different brands. There are 2 main brands among our professional applications. One is our main brand Interact and the other is Signify. Besides these two, there are also the Philips brand and a white-label theme that is used for wireframes or custom-branded apps, etc. We didn’t support all these options.
• Big gaps between the design libraries of the brands. We started with Interact brand. Interact design system was the most mature one, compared to the other brands. There are guidelines, component libraries, etc. We supported very limited components and didn’t have the official guidelines for all the other brands.
• Limited colors. Even in Interact design system, there were not enough colors to support a dark theme or be used in all the components. Some colors were used in the components but not in the color palette. It was not systematic and had no clear rules.
  • We got feedback from the designers and their stakeholders that they need more colors to handle different scenarios in different products.
• Accessibility issues. The limitation on the colors caused accessibility issues in the components, including picking color options keeping color blindness in mind, providing enough contrast, etc.
• No design tokens.

History and design language

Before jumping to the solution, it might be helpful understanding our design language. I was not the one who built the initial version of the components. It was built before I joined this company. What I was told is that the Interact design system follows the principles in Material design. All the ideas, the foundations (colors and typography), and the components were built based on the guidelines from Material Design 2 at the time.

Our goal was to solve all the listed problems and still keep this design language (minimum changes on all other issues). Material Design 3 was released during our transformation. We’d like to follow the latest principles, see how to customize it and meet our needs.

Below is my solution in terms of the upgraded color system. Colors are separated into 6 categories, branding, key, neutral, signal, data visualization, and custom. To keep it simple, neutral, signal, and data visualization color palettes are shared between brands. 

Branding colors

Branding colors are directly from the brand. Brand desk is responsible for it. They are the seeds of the colors in the components. Visual elements like logos should stick to the brand colors, following the rules from brand guidelines, irrespective of their places.

Key colors

Key colors are mainly used on components, main actions, meaning on-state, active, actionable, etc. The naming reflects its importance. This hierarchy is based on the understanding of the brand colors. Key colors tell the brand and are accessible at the same time.

Tonal palettes are color shades of the key colors. Each color contains 13 steps. They are mainly applied to the states of the interactive components, supporting the look in both light and dark themes. They are the core tokens, the base of semantic colors.

Below are the accessible combinations within a color’s tonal palette.

In the light theme,

• 80 or above could be used for graphical objects on a white background. (Meets 3:1)
• 100 or above could be used for text on a white background. (Meets 4.5:1)

In the dark theme,

• 80 or below could be used for graphical objects on a dark background. (Meets 3:1)
• 60 or below could be used for text on a dark background. (Meets 4.5:1)

In Interact/Signify brand, the Secondary color is the same as the neutral color. The color palette and accessible combinations are the same as well.

Principles for Interact brand:

• Using Primary 100/80 for active/selected states.
  • For example, the active/selected tab, the on-state of the toggles, the checked state of checkboxes and the on-state of radio buttons, and the on-state of a toggle button, etc.
  • Primary 100 works in a light theme, while it shifts to 80 in a dark theme. As the key color of the brand, it supports the brand impression of the application.

• Don’t combine Primary 100 with Secondary 100 in a component.
  • Primary 100 and Secondary 100 are both strong colors. Combining them in one atom can create imbalances in components or organisms.
  • Misuse might happen in a selected tab, default tab, main action button, or quiet button with an icon.

Interact – Do – In this example, the selected tab and the default tabs are distinctive because the selected tab is with a bar, together in Primary 100, and the default tabs are Neutral 60 without bars.

Interact – Do – In this example, a clear distinction between the quiet button and the Primary button is created because the quiet button uses Secondary 100 only.

Interact – Don’t combine Primary 100 and Secondary 100 in one atom since it will be difficult for the user to comprehend them. The download icon is now visually linked to the main action button because they are both Primary 100.

• Don’t use Primary 100 / coral red as a background color unless it is a defined brand impression screen.
  • These brand impressions are limited to, for example, login screens, splash screens, or onboarding screens.
  • These screens usually contain less textual information. The focus is on the logo or on a brand-styled illustration. The main purpose of them is to emphasize the brand. 
  • Primary 100 is a strong color and draws attention. Using Primary 100 as a background color will divert the users’ attention from other content, especially when Primary 100 is used in a large ratio compared to other colors.

Interact – Do – In this example, coral red is used as the background color for the feature graphic in the Play Store.

Interact – Don’t use Primary 100 / coral red as a background color on the UI.

In Signify brand, different from Interact brand, Tertiary is not only used for links but also used on controls, meaning on-state, active, actionable, etc because of the considerations in accessibility.

Principles for Signify brand:

• Using Tertiary 120/60 for active/selected states. Primary 40 doesn’t work well in the light theme, though the light theme is the main theme for all our applications. So as one of the key colors, Tertiary is introduced to support the brand impression.

Signify – Do – Controls in tertiary 120 in light theme, and 60 in dark theme

Signify – Don’t use Primary 40 for active/selected states

• Don’t combine Tertiary 120 with Secondary 140 in a component. Tertiary 100 and Secondary 100 are both strong colors. Combining them in one atom can create imbalances in components or organisms. In the dark theme, don’t combine Tertiary 60 with Secondary 0 in a component, according to the same rule.

Signify – Do – In this example, the selected tab and the default tabs are distinctive because the selected tab is with a bar, together in Tertiary 120 and the default tabs are neutral 80 without bars.

• Don’t apply Primary 40 directly on an object in the light theme. Primary 40 is not accessible in the light theme. Decorative objects/elements are barely acceptable so that we could still have it to show brand impression in light theme.

Signify – Do – In this example, Primary 40 is used as the background of the main action button.

• Don’t use Tertiary 120 as a background color. We strongly recommend using Secondary/Neutral 140 or an image as the background for the brand impression screens, for example, login screens, splash screens, or onboarding screens.

Signify – Do – In this example, Secondary 140 is used as the background color for the feature graphic in the Play Store.

Signify – Don’t use Tertiary 120 as a background color on the UI.

Neutral colors

Neutral color is widely used on

• components, eg input fields, drop-downs, combo boxes, action/quiet buttons, neutral options of controls, etc.
• main option for text, titles, paragraphs, etc.
• main option for layering, creating hierarchies on the UI in both light and dark themes.

The neutral tonal palette is the most used palette in components / on the UI.

Principles for neutral colors:

• Use neutral versions for complex screens. To balance the number of coral components used in complex organisms/pages in Interact products, neutral options are defined for components in both light and dark themes, eg buttons, toggles, checkboxes, and radio buttons. Neutral options are recommended for complex organisms/pages, or set-ups like eg tables.

• Use neutral shades for off-states. In contrast to the on/active, online, connected states, use neutral shades for the opposite states like off, deselected, inactive, etc. Caution! In most cases, colors shouldn’t be the only indicator of the state difference.

Signal colors

• Signal colors are applied on visual indicators for a signaling purpose, such as error, failure, fault, warning, partially deployed, success, healthy, completed, etc.
• Often seen on contextual messages, snack bars, or tags that show the object state.
• Shades of the signal colors can be used on heat maps, tags, or different stages of the same parameter, etc.

Tonal palette

• We use signal colors frugally on the UI, though a full tonal signal color palette is prepared.
• Stick to Error 100, Warning 60/80, and Success 80/100. This would cover 90% of the use cases in both light and dark themes. 

Below are the accessible combinations within a color’s tonal palette.

Principles for signal colors:

• Make sure the error indications aren’t visually conflicting with Primary colors. Error colors and Primary colors are close to each other. It’s important to always check if error messages in the design are clear enough.

Don’t – A table can have complex information, which also can indicate errors. In this case, Primary checkboxes are close to the status and look too similar to the fault colors.

Do – Use the neutral version of the checkboxes when error states are displayed in the same context.

Don’t – Use Primary as a visual indicator for negative values, states like the degrading lifetime of a bulb or almost exceeding energy consumption.

Do – Use other colors as a visual indicator for negative values or states like the degrading lifetime of a bulb or almost exceeding energy consumption.

• Don’t solely rely on color to communicate the status. Use shapes and additional styles so that the signals are distinctive, and don’t blend into the overall design of the UI. Learn more from a visual indicators perspective.

Do – Use color and the icon to indicate the error message. 

Do – Use a contextual message to highlight the error.

• Warning 80 can be also used on notification indicators to highlight new conditions, special states, selected items, etc.

Data visualization colors

Data visualization colors are widely used on calendars and schedules, dashboard and reports, as well as map symbols/icons.

Tonal palette

Different from signal colors, we encourage designers to explore possibility of the full package so that they could meet complex needs in the product.

Below are the accessible combinations within a color’s tonal palette.

Principles for signal colors:

Though the color palettes get upgraded, the principles didn’t change a lot. See the principles from Data visualization colors in Interact.

Below are some examples of the data visualization colors in light and dark themes.

Custom colors

99% of the time, designers will stick to the colors in the design system. However, it is possible that designers would like to create a custom color palette for the product.

In the example of Interact City, the color for connected assets was inherited from CityTouch (the old version of Interact City), which has been used for over 10 years in over 2000 projects. The color is kept and seen as a custom color staying in the product.

Components

There are accessibility issues, missing states, and no dark theme at all before the colors were upgraded. So all the components are covered this time.

Redesigned input fields

The input fields were recolorred to clean up the contrast issues.

Redesigned tooltips

The tooltips got redesigned too and started supporting high and low contrast versions in both light and dark theme.

• Special styles are defined for the buttons in the tooltips.
• And they are going to only live in the tooltips for both pointer and touch hybrid devices.
• Please be aware that in very rare cases, the tooltips would be used in touch hybrid devices.
• All the shadows should be level 3.

• Differences compared to the standard buttons,
  • The text style should be caption-small.
  • The paddings on the 2 sides change to 16dips.
  • When it is on Secondary (dark background), the hover state and the pressed state of the quiet button get shifted.

• The only difference is on the text style, changes to caption-small. The colors remains the same as standard links.