On Dimensions of CSS in a Style Guide


On the concept of “absolutes”: If a color is the same as CSS named colors, name it as is or use the name itself:

--color-red: #ff0000;

If you “invented” a color or base it on an existing brand color, “invent” a name for it, but always attach the name of the basic color:

--color-coagulated-red: #c93434;
--color-facebook-blue: #4267b2;


On the concept of “generics”: Use these colors as basis for primaries, secondaries, accents, etc.:

--primary-color: var(--color-facebook-blue);


On the concept of “specifics”: Use the “generics” to identify colors of UI elements:

.submit-button { background-color: var(--primary-color) };


Leave a Reply

Your email address will not be published. Required fields are marked *