Design System Glossary

Alias Tokens

Alias tokens are design tokens that reference other tokens — usually a primitive token or another alias — rather than storing a direct value. They're the "pointers" in a token system.

Aliases let you build the middle layers of a token tier. If blue-500 is a primitive, then color-action-primary: {blue-500} is an alias. That alias can itself be aliased: button-bg: {color-action-primary}. When you swap themes, you only change the primitives; the aliases follow automatically.

The real power of aliases is in architecture. A semantic token like color-feedback-error: {red-600} is an alias. A component token like button-bg-hover: {color-action-primary} is also an alias. Without aliases, you'd have to update hundreds of places when a colour meaning changes. With them, you update the alias definition once.

Tools like Tokens Studio and Style Dictionary handle the resolution — turning nested aliases into final values for each platform. In CSS, this translates to var() chains. The danger: create too many alias layers and the system becomes hard to debug. Most teams keep it to three: primitive → semantic → component.