Member-only story

How to name colors in design systems

Discover a 3-tier naming strategy that scales.

Felix
UX Collective
11 min readOct 20, 2024

Modern digital artwork with a traditional Indian motif and bright colors
Generated with AI by wasan

Design systems are essential for maintaining consistency, efficiency, and scalability. Central to these systems are design tokens — the fundamental units that encapsulate visual design decisions such as colors, typography, spacing, and more.

As design systems scale, you may start to struggle with token bloat.

If you adopted the popular component level naming strategy (e.g. $button-background-primary), you quickly get overwhelmed by the amount of tokens you have to keep track of.

This article explores a tiered naming strategy for color tokens, striking a balance between broad categorization and detailed specificity.

It introduces a scalable hierarchical approach that ensures clarity and flexibility as design systems grow.

Understanding design tokens

Design tokens are the smallest units of a design system that store visual design attributes. They serve as a bridge between design and development, ensuring that design decisions are consistently implemented across various platforms and technologies.

Common categories of design tokens include:

  • Colors: Foreground…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Felix

Designer, building practical design systems, UI kits, and automation tools. Passionate about making design accessible for all.

Responses (1)

Write a response