tezvyn:

Core tokens versus alias semantic tokens

AI-drafted, machine-checkedintermediate
WHAT IT TESTS

token-tier architecture.

OUTLINE

core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value.

WHAT THIS TESTS The question probes whether you understand a tiered token system and why an indirection layer matters for theming and maintenance.

A GOOD ANSWER COVERS Core or global tokens, sometimes called primitives, hold raw context-free values: a full color ramp such as blue-100 through blue-900, a spacing scale, and font sizes. They describe what a value is, not where it is used. Alias tokens, often called semantic tokens, do not hold a raw value; they reference a core token and add meaning, for example color-action-primary points to blue-500, or color-text-default points to gray-900. Components and consumers reference the semantic aliases, never the raw cores. This indirection is the whole point: the meaning of a UI role is decoupled from any specific primitive.

COMMON WRONG ANSWERS Using core tokens directly in components, which couples every usage to a raw value and forces mass edits when the brand or theme changes. Thinking aliases are just renamed cores; they add a semantic layer with intent. Flattening the system into one tier, which loses the ability to retheme cleanly.

LIKELY FOLLOW-UPS Can aliases point to other aliases? Yes, deeper chains exist, like a component token referencing a semantic token referencing a core, though excessive depth hurts clarity. How does this enable dark mode? Keep cores fixed and remap semantic aliases per theme so color-surface points to a light core in light mode and a dark core in dark mode. What is a component-level token? A third tier scoped to a component, such as button-background, referencing a semantic alias.

ONE CONCRETE EXAMPLE Define core tokens blue-500 equals #0052cc and red-600 equals #c0392b. Create a semantic alias color-action that references blue-500 and color-danger that references red-600. A primary button uses color-action; a delete button uses color-danger. If marketing rebrands the action color to teal, you repoint color-action to a teal core in one place and every primary affordance updates, while the raw blue ramp stays available for anything that genuinely needs blue, demonstrating why the alias tier exists.

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.