Token Naming Taxonomies: The CTI Convention

Inconsistent token names like primaryColor, color_bg_main, and theme-dark-btn create massive confusion. Leading systems (like Nathan Curtis's guidelines and Salesforce Lightning) use the Category-Type-Item (CTI) taxonomy:

{namespace}-{system}-{category}-{property}-{concept}-{variant}-{state}

Let's break down a real-world token: ux-sys-color-bg-surface-elevated-hover

• Namespace: ux (identifies the design system library)
• Category: color (color, space, size, font, time)
• Property: bg (background, border, text)
• Concept / Item: surface (card, canvas, button)
• Variant: elevated (subtle, primary, elevated)
• State: hover (default, hover, active, disabled)

Following a predictable formula makes tokens searchable, auto-completable in IDEs, and self-documenting.