What do you guys call your colour custom properties?
I find it easy if you have 3 colours where you can just call them primary, secondary and accent but the project I'm working on has like 7 different colours.
So how do you name them?
Is there a particular rule to follow when naming them?
6 Replies
I like how Atlassian names theirs - https://atlassian.design/foundations/color-new#color-roles
Atlassian Design System
Color - Foundations - Atlassian Design System
Color distinguishes our brand and reinforces consistent experiences across products.
They have a
brand and a warning, but after that, it's more based on the purpose, like "information", "discovery", "success", "warning", etcI was just gonna say something similar: name them for what they do not what they are. That way you use normal wording to express things in CSS. "This is a warning? Then I guess I should use
--clr-warning and not clr-info. And if your colour scheme changes you don't have to go through the file to rename --clr-red-500 to --clr-green-842.yeah, name stuff by what it is used for not what it is itself
it applies to everything tho, not just colors
like if you have a font setup you might call it
--body-font or something like that and not --font-name-bold-italichmm this makes a lot of sense. Also if you're numbering the colours 100 to 900 for example is there a reasoning based on what number you give it? Brigthness/Darkness for example?
It can be brightness, it can be saturation... Usually it "how much does it stand out" so a mix of both. Think of each number as a step in a linear gradient, the bigger the difference in number, the bigger the difference visually.