0Pricing
CSS Academy · Lesson

Token Naming Conventions

Structure token names hierarchically using global, alias, and component-specific naming tiers.

Why Naming Matters

Inconsistent token names make it impossible to predict what a token does without reading its value. A clear, predictable naming convention is foundational to a scalable token system.

Category-Property-Variant Pattern

A common pattern: [category]-[property]-[variant]. Example: color-text-primary, color-text-secondary, spacing-inset-sm. Each segment narrows meaning progressively.

All lessons in this course

  1. What Are Design Tokens
  2. Token Naming Conventions
  3. Implementing Multi-Brand Theming with CSS Variables
  4. Token Tooling: Style Dictionary
← Back to CSS Academy