To start, I design around core use cases that I know I need to account for. Things like text, disabled states, borders, super subtle hover states, etc.
Let's see how that works for type π
I know that I'll have 3 core typography color needs.
Dark text + Grey text + Placeholder text
I'll use the Contrast app to help me arrive at those values right away.
900 = dark text // 700 = grey text // 600 = placeholder text
That's 3 of 9 values knocked out immediately πͺ
Then I'll start filling in the gaps based on my needs above
β’ standardizing the hue to match your `primary` color ensures cohesiveness
β’ I typically move from more saturated to less saturated as I approach white
β’ 100-300 are > 90 brightness for things like subtle borders
Step 05 β build your interface palette
Depending on how you intend to use these colors, you might need light/dark variations. But the process remains the same!
Most of the time I'll make these more saturated than my brand colors so they command a bit more attention
And that's it! Some benefits to this process:
β’ It's repeatable (super easy to add more)
β’ It's flexible (larger spectrum of grays accounts for every use case)
You can design any great product using this system to build out your color palette πͺ
If you want to go deeper... this is only a little taste of the full "Style Systems" module from Figma Academy.
Enrollment for the Spring cohort is open now and it's the last time it'll be available at this price π figma.academy
This system is a great way to quickly generate starting points for each color needed.
But it's important to note... they're just starting points!
You should always be iterating as you use color and making sure your eyes have the final say instead of prioritizing the math π
The reason it's important to let our eyes have the final say is because we perceive certain colors differently.
A red is inherently going to be higher contrast than a corresponding yellow for instance.
This is why I like to adjust saturation/brightness within that range of 10.
Color theory used to be a black box for me...
But this system has helped me a TON π
If you also found it valuable, click into the first tweet below and pass it along π