Naming Colors in Design Systems
This article explores a systematic approach to naming colors in design systems, emphasizing a scalable 3-tier strategy.
A Scalable 3-Tier Strategy
The recommended strategy entails a three-tier approach to color naming:
1. **Base Color:** This tier uses descriptive terms like ‘blue,’ ‘red,’ or ‘green’ to identify the fundamental hue. For example, ‘blue’ encompasses various shades of blue.
2. **Shade:** This tier adds information regarding the color’s lightness or darkness. For instance, ‘blue-light’ represents a lighter shade of blue, while ‘blue-dark’ indicates a darker hue. This layer provides a clear distinction between different shades of the same color.
3. **Tint:** This tier introduces specific color variations, enabling fine-tuning and precision. For example, ‘blue-light-1’ denotes a very light blue, while ‘blue-light-2’ is slightly darker. This tier offers nuanced variation within the existing shade categories.
Practical Application
This 3-tier strategy offers a comprehensive approach to color naming. It’s important to note that this methodology can be customized and adapted to the specific needs and context of your design system. For instance, you could utilize additional tiers to incorporate saturation or other relevant aspects. By adopting this strategy, you can streamline your color naming process, ensuring consistency and clarity throughout your design system.
This article is a summary of the original article found at ‘https://uxdesign.cc/how-to-name-colors-in-design-systems-976657e12b57?source=rss—-138adf9c44c—4’.