Ever look at your color palette and cry?
They look so pretty in your UI kit but when you go to add the placeholder text—it takes 10 minutes to find the right hue. It's like 50 shades of grey sans BDSM.
This was my life until I came across Carbon by IBM...
Because colors touch everything, they cause problems. Problems like wasted time and inconsistencies in your product. In order to solve this, IBM created Carbon Themes.
Carbon Themes is filled with some ground-breaking ideas, but I think the most innovative of them all is how they name their colors. Seems simple but it changed the way we design and build.
We wanted a naming system that was flexible enough to scale across themes but also hint at the colors’ purpose.
So here's how they do it.
Starting at the lowest unit is the value of the color itself i.e. the hex or color code (#000000). This is what we’ve been hard-coding into our products for years.
The next level-up is the Token. Tokens get assigned a color but abstract away the hex value and get their name from the color's purpose in the UI. You can think of the color's purpose as its Job Title—something that lets everyone know what the color does and where it should be used.
So, let’s look at the example token: $text-01. The hex value #000 has been assigned to this Token. The “text” in the name tells us this color should be used in text elements (its purpose). The number 01 tells us the variant we should be using i.e. 01 is the primary text whereas 02 is the secondary text.
The last category is the Theme, think light and dark mode on your mac. The theme is based on the primary background color and changes which values (i.e. hex codes) each token is using.
Say, for example, we’re using the light theme with our primary background color Gray-10, our $text-01 token will be a dark value (i.e. #000). Whereas if we’re using the dark theme with the background-color Gray-100, then our $text-01 token would be a light value (i.e. #FFF).
The theme and tokens all live together in one, centralized file. Making it easy to edit, update, and view all the colors used in your UI.
Granted, an entire team was able to focus entirely on creating Carbon Themes. If you're not IBM and want to save time and make your product more consistent—here's what you can do.
First, recreate the table they made. In the table, you'll see the token name, the purpose of each color in the UI, and the value (hex and name of color). *If your team isn't ready to use tokens yet, remove that column.
What you'll end up with is something like this below. Here, I have a color named Gray-100, its hex is #FFFFFF, its role is primary text, body copy, and headers, and its token name is $text-01.
Next, go to Figma and rename your saved style to Gray-5 and in the description, add the color's role. Now when you're designing, you'll always know which color to use and when—making you a quicker and more consistent designer.
Big thanks to the IBM Carbon team for this amazing work and for saving me hours/years of my life.
Thanks so much for reading. If you enjoyed this, I'd really appreciate it if you joined our email list. I write a new post like this each week!
Or if you're feeling generous -smash that share on the Twitter thread.