The ultimate method for nailing light and dark modes in Figma

It's taken me over 4 years...

But I think I finally have the perfect method for nailing ☀️/🌙 modes in Figma

Here's my step-by-step process 👇

This walkthrough will show you how to create a color system to easily update your designs across light mode and dark mode 💯

As a starting point, I'm a big fan of using Tailwind's 50 → 950 scale.

Then we update it in three phases:

1) Nail the hue (easy)

2) Decide on your saturation level (easy)

3) Use UI to derive brightness values (⭐ this is where the magic happens)

1) Nail the hue

The best way to ensure your grays work well with your brand palette is to use the hue from your primary color.

This is part of why it's so important to use HSB or HSL instead of hex codes (I'll use HSB in this walkthrough).

2) Pick your saturation range

Normal palettes have a saturation range of roughly 1-20 (but you can go much higher for a more color-rich brand like in the example below).

Typically you'll use higher saturation values for darker colors and lower saturation values for lighter colors 👍

Ok now let's get into the meat of the process 👇

3) Derive brightness values from interface use cases

Instead of viewing our colors as “light” and “dark” we need to start thinking in terms of low contrast and high contrast.

Because each color will have a counterpart on the opposite end of the spectrum.

Most interface systems have the same core needs (ex: AAA and AA for text, disabled states, border states, page backgrounds, etc.).

When you start with a list like this, all you have to do is go through each use case and select which color primitives you want to pair 👇

Typography

I like to start with typography

We know we'll have at least 3 core needs that will ultimately become our semantic variables:

1. AAA (what I'm calling text-strong)

2. AA (text-subtle)

3. disabled (text-inactive)

Most systems I create look something like this 👀

Backgrounds

You can then do the same thing for backgrounds.

I find you need at LEAST three bg contrast levels for each mode.

💡 Pro tip: stack these colors on top of each other while exploring so you can ensure there’s just enough separation between them.

Borders

In almost every system you’ll need at least three borders:

1. base (active containers)

2. subtle (inactive containers)

3. strong (used for elevated cards and/or hover states)

When you use a process like this, all you have to do is simply move in a couple of spaces on your color spectrum 👌

💡 Another quick pro tip:

It helps to make `border-subtle` use the same color primitive as your higher contrast background.

In this case, I'm using gray-800 for both.

Icons

By this point, you have most of your colors already figured out...

But I like to look at icons to make sure the system nails these use cases:

1. High contrast icons

2. Subtle icons

3. Lower contrast icons (ex: disabled)

Assuming you're often pairing text with icons, you'll want to make sure that your mid-contrast icons use the same color primitive as your AA text 👍

That way elements like this look cohesive 👇

Want to go deeper?

This is a small sliver of the larger "Variables Systems" module in Figma Academy.

If you're looking for ways to invest in your craft/speed then this might be a great next step (we go a lottttt deeper) 👇

figma.academy

Are you going to nail this system on your first run-through? No, probably not 😇

Inevitably you'll be making a lot of tweaks as you explore...

But visualizing the process through the lens of these UI use cases shows which colors need tweaking and how that will affect the larger system 💪

That's why creating a dummy UI like this is SUPER helpful too 👀

Will this process work perfectly for every product? No, of course not. There aren't many silver bullets in design. But I think this can be a heck of a starting point and hopefully helps you visualize what your own process can look like 💪