Dark Mode — Working with Color Systems

The requirements for designers to be more structured has been surging across the industry these past years. And with the introduction of Dark Modes in both mobile and desktop OS’s, another area of design now needs to be put into systems. Our colors.

Søren Clausen
Sep 9 · 5 min read

As designers, we often base our color choices on what looks best for the specific element we are working on. When we do this, the only consistency will be our personal taste and we might end up with a slightly inconsistent use of colors because of it. And an inconsistent color palette will give you problems once you want to create a secondary color scheme, or a dark mode.

Applying a systematic approach to our colors will help us stay organized and give us reasoning behind how and when we use certain colors. But most importantly, it will enable us to easily apply a new color scheme to our design. Our Dark Mode will only be a few color tweaks away, once everything is put into the system.

Let’s dive into one approach of creating a color system.

Roles

As with all systems, one of the most important things are reasoning. Why we’re using this color instead of that color. That’s exactly what we need to do. We need to assign roles to all of our colors.

Luckily it’s really simple, and we can learn a lot from both Apple and Google. You can dig into their documentation to know how they work with color systems.

Looking at our own color system, we need to define our roles and give them clear and descriptive names. The name of our colors should convey the purpose of the color, and not the specific color value.

For this case, we will split them into 3 categories.

Category 1 — Tints

A tint is often the brand color and our secondary colors. We can add as many tints as we need. I.e. we might have a brand color and a few semi-transparent variations of that brand color.

Gradients should be added as individual colors. This will make it easier to change later on.

Tints are usually used for interactive elements, but they don’t have to. The only important thing is that they have a defined role.

So let’s do that.

Role — Used for interactive elements, illustrations and highlights.

Elements using “Tint” colors

Category 2— Backgrounds

Background colors are what it sounds like. A background color.
Since we will use more than one background color in our product, we need to define a few of these and their roles.

The role of the backgrounds are usually defined in layers. So our primary background is always at the bottom, then comes the secondary background, and then the tertiary background on top.

Alternative backgound colors can also be defined.

Role — Used for the backgrounds of elements, in 3 levels.

Elements using “Background” colors

Category 3— Foreground Content

Now we reached the elements we place on our background colors. This will mostly be text, separators etc. Since we will need text labels with different emphasis, we will define a few levels for those.

You might also need more than one separator color, depending on what background they are placed on.

Role — Used all foreground elements placed on any background.

Elements using “Foreground” colors

Other cases

Sometimes we will need to create roles that are very specific. This is not wrong, but we should always keep our system as simple as possible.

In our case, we need a role specifically for text placed on a Tint color.

Role — Used for elements placed on a Tint color.

A case where “On Tint” is needed

Assigning colors

Now that we have defined our roles, it’s time to assign colors to them.
This isn’t that different than what we’re used to, when creating a color scheme.

It’s a good idea to try out your color scheme in an interface before you save them. It’s just easier when your colors aren’t locked into the system.
This is also the right time to make sure that your color scheme lives up to the standards of WCAG 2.0 and are as accessible as possible.

So play around, and once you are happy with your color scheme, you save them and assign them a role (in reality it’s just a matter of naming you color the same as the role).

Heres an example of a color scheme with roles assigned.

Full Color System

Join the Dark side

Since we defined roles for every single color, it’s simple to assign new colors to all of the roles, and instantly we will have recolored our entire product.

The color system forces us to choose colors that work for their role and the backgrounds they are placed on. And as a bonus, we already did most of the work for the developers that are going to be implementing the Dark Mode. They will be able to use the color roles as their variables and can assign any set of colors to those variables.

Have a look:

Switch between light and dark

Now, wouldn’t it be nice if you could switch between your light and dark color scheme in Sketch? Without having to create duplicate styles and duplicate elements?

Well, now you can!

Introducing Color Systems for Sketch

A simple plugin to manage your color system, and switch between light and dark mode, as you design. Built to be lightweight, and feel like a part of Sketch. It integrates seamlessly with your Document Colors, so you can continue to work like you are used to.

Color System Plugin for Sketch
Color System Plugin for Sketch

Simply flip the switch to change the color scheme. Pretty neat right?Download the plugin to get started on your dark mode!


Follow Nodes on Dribbble · Twitter · Instagram · Web

Nodes Digital

The medium account for Nodes Digital

Søren Clausen

Written by

Senior Product Designer · Nodes Digital · Dubai · Dribbble: http://t.co/Y822jsgzIB

Nodes Digital

The medium account for Nodes Digital

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade