About the names of the colors in the design systems

I’ve noticed several different approaches:

  1. Direct naming – after the shade (Black, White, etc.)
  2. Naming by function (Comment, Stroke, etc.)
  3. Naming it after a state (Warning, Danger, etc.)
  4. Gradation by frequency (Primary, Secondary, etc.)
  5. Colors depending on the palette (Accent, Brand, etc)

The worst part is that the approaches get mixed in with each other, which causes confusion in both usage and color palettes. For example, when you have multiple stroke colors that are different depending on the type of object, and some of the types have different highlights, and can also have different states.

Latest update fgma allows you to put all the levels in each other, which is a little pain (because there is also a grouping by topic: Dark, Light, etc.), but fundamentally the problem of unambiguous naming of colors has not been solved.

When you look at other people’s design systems, you realize that the approaches are pasted on top of each other in random order. Some colors are named shades, some are named states, some are named according to the palette, and so on. Only the author of the palette itself can use this conveniently 🙂

Leave a comment

Design a site like this with WordPress.com
Get started