Monstarlab EMEA
Published in

Monstarlab EMEA

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.

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.

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.

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.

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.

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.

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.

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.

Switch between light and dark

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store