I am a huge fan of many colors. By default, I have 13 color scales of each color I choose for a project [although I end up using 5 or so.] It gives me the confidence that I can find a tint or shade of any color when I need it. Here is what my colors for a project normally look like —
So…what is the problem
I had roles [where and how they will be used] for these colors but never explicitly stated them. For instance, I know Red 700 was my error color but I never stated it.
This was because I found it hard to do so. I wanted my base colors to maintain the same naming convention [Gray 0–1000] but would love to give some of them roles eg Surface color.
Renaming my base color was not gonna work as one color could have many roles. I was looking for a way to create roles and reference them to these colors [without changing the name of my base color].
This is where variables enter the show. Now, I can —
- have as many color styles as I want
- give them roles in a more intuitive way.
At first, I found it hard to select between styles and variables, but I managed to work around it. Here is the heuristic I used —
- For pure colors [colors that aren’t mixed], use variables.
- Text styles can not be variables, so that won’t be a problem
- Spacing style should always be a variable.
Now that I know when to use a variable and when not to.
How do I arrange my color styles to variables?
I create 2 collections for my variables. “Reference” and “System.” If you know a thing or two about Google’s Material Design system, you should know where I am going. If you don’t, here is a simple way to look at it —
The Reference collection will hold all my color styles without any role. All the color scales I generated will be here. The System collection will hold all my color styles that have a role. In summary, Reference is a list of all the options I have, System is the one I choose to do something [the one I give a role] from those options
What I do now is convert those color styles to variables. You can do this the manual way or use a plugin called Styles to Variables Converter. Here’s how it ends up like —
Here’s where I give the colors from my reference a role. By role, I mean where it should be used on the project. To illustrate, I would use Surface color and Button color. Here is how they typically would look like —
Here, you can see that the roles “surface-color” and “button-color” are all assigned to a color from my Reference.
This way when I open up my styles to select a color for an element, I see the name and immediately know where I am meant to use it.
- I use my favorite tool to create all my color options
- These options are added to a collection called Reference
- I take out colors from this reference and assign them roles
- These colors are added to a collection called System