Andrew's Digital Garden

Naming colour tokens in a design system

Broadly there's three naming conventions:

  • Definitive - describe the colour itself ('red')
  • Semantic - describe the intent of the colour ('danger')
  • Contextual - describe the use of the colour ('color-text-destructive')

Rather than considering these as separate paths, consider these as layers of abstractions. Ideally engineers are using contextual colours, while designers are using at least semantic colours in their day-to-day.

Consider [[20211029153348-semantic-design-tokens]] and [[20220523102023-design-tokens-as-intents]] when thinking about the maintenance of these colours.

[[colour]] [[designsystem]] [[designtokens]]

Naming colour tokens in a design system