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, 2019 · 5 min read
Image for post
Image for post

Roles

Category 1 — Tints

Role — Used for interactive elements, illustrations and highlights.

Image for post
Image for post
Elements using “Tint” colors

Category 2— Backgrounds

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

Image for post
Image for post
Elements using “Background” colors

Category 3— Foreground Content

Role — Used all foreground elements placed on any background.

Image for post
Image for post
Elements using “Foreground” colors

Other cases

Role — Used for elements placed on a Tint color.

Image for post
Image for post
A case where “On Tint” is needed

Assigning colors

Image for post
Image for post
Full Color System

Join the Dark side

Image for post
Image for post
Switch between light and dark

Introducing Color Systems for Sketch

Color System Plugin for Sketch
Color System Plugin for Sketch

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

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