skip to content

Design Tokens

Design tokens name each visual decision once, as raw options aliased by intent-named decisions, and a build turns that source into per-platform outputs. Interviewers probe the semantic layer.

part ofDesign systems & UX foundationsoverview, primer and where to startread it →
on this pageshow

explore

questions

22

In a design system, why is changing a design token's value usually safe for consuming apps while renaming the same token breaks them?

level: juniorimportance: must knowfreq 58%

answer

  1. what consumers actually write down
  2. the name is the contract
  3. a rename is removal plus addition
  4. dangling references, loud or silent
  5. safe values can still hurt contrast

basics

~20 s

Consumers bind to a token's name, not its value. A value change flows through every existing reference and restyles apps, while a rename leaves every reference pointing at nothing, so builds fail or styles silently fall back.

solid answer

~50 s

A design token's **name is its public contract**: product code, native style files and design files all reference the name, and a build or runtime step resolves it to whatever value is current. Change the value and every reference keeps resolving — a veterinary booking app's open-slot background simply repaints on the next update. Rename the token and every reference to the old name dangles: a compiled platform fails its build, while a runtime-resolved one may silently fall back to a default and render the wrong color. That is why a rename is treated as breaking and ships behind an alias, while a value change usually ships as an ordinary release. *Usually* matters: a value change that breaks contrast, overflows a layout or changes what the token means can still hurt consumers even though nothing fails to resolve.

go deeper

for a junior

Recall that apps reference a token by its name and the value is resolved for them. That alone explains why changing a value restyles everyone while renaming breaks everyone.

for a middle

Explain the change classes — add, value change, rename, remove, type change — and what each does to existing references, including the difference between a loud build failure and a silent runtime fallback.

for a senior

Show that you know value changes are only usually safe: name the contrast, layout and meaning failures, and describe the review that catches them before forty consuming apps are restyled at once.

for a principal

Frame names as a long-lived API and values as implementation, and argue when repurposing a token's meaning should instead become a new token that consumers opt in to.

## The name is the contract A **design token** is a named design decision — a color, a spacing step, a corner radius, a duration — stored once and consumed everywhere. In a veterinary clinic booking system, the web booking site, the native mobile app pet owners use, the reception kiosk and the design library all read the same token set. None of them hold the value itself; each holds a **reference to the name**, and a build step or a runtime lookup resolves that name to whatever the value currently is. That indirection is the whole point of tokens, and it decides which changes are safe: - **The name** is what consumers write down — in hundreds of places, across many codebases and design files. It is the public API. - **The value** is what the name resolves to. Consumers never wrote it down, so they do not have to change anything when it moves. ## What each kind of change does to a consumer | Change | What existing references do | Usual classification | |---|---|---| | Add a token | Nothing — nobody references it yet | Backward compatible | | Change a value | Keep resolving and pick up the new value on update | Usually compatible; review the visual impact | | Rename a token | Dangle — the old name resolves to nothing | Breaking, unless the old name stays as an alias | | Remove a token | Dangle, exactly like a rename with no successor | Breaking | | Change a token's type | Resolve to a value of the wrong kind | Breaking | A rename is best understood as **a removal plus an addition**. The addition is harmless; the removal is what breaks people. ## How the breakage shows up The same rename fails differently on each platform, which is part of why it is dangerous: - **Compiled platforms** — for example a native mobile app that consumes tokens as generated constants — fail the build. That is the good outcome: loud, early, and pointing at the exact line. - **Runtime-resolved platforms** — for example web style variables looked up in the page — often fail *silently*. An unresolved reference falls back to an inherited or default value, so the open-slot background on the booking calendar goes plain white and nobody notices until a pet owner cannot tell which appointment slots are free. - **Design files** show a broken or detached style, and the next handoff drifts from code. - **Other tokens** that alias the old name no longer resolve inside the token build itself. The silent case is the one that reaches production, which is why a system should never rely on consumers' builds to catch a rename for it. ## When a value change is not harmless *Usually safe* is not *always safe*. A value change keeps every reference resolving, but it can still break the expectations consumers built on top of it: - **Contrast** — lightening the open-slot background can drop the text on top of it below the contrast ratio the app relied on. - **Layout** — a larger spacing or type value can make a dense appointment grid overflow on the small kiosk screen. - **Meaning** — repointing a warning token to an alarming red changes what it communicates; every screen that used it for a mild reminder about vaccinations now looks like an emergency. - **Timing** — lengthening a duration token makes every confirmation animation feel sluggish across every app at once. None of these fail a build, so the protection is review rather than tooling: comparing key screens before and after, checking the contrast of the color pairs the token sits in, and release notes that call out deliberate visual changes. ## The practical rule 1. Treat **names as API** and **values as implementation** — change values freely within the token's stated meaning, and change names only through a migration. 2. When a name must change, add the new name, keep the old one as an alias that references it, mark the old one deprecated, and remove it only in a later breaking release. 3. When a value must change beyond its original meaning, prefer a **new token** over repurposing the old one, so consumers opt in instead of being restyled by surprise. 4. Announce deliberate visual changes even when the versioning rules would call them compatible. The one-sentence interview version: consumers bind to names, so a rename is an API break and a value change is a restyle — and a restyle is safe only while it stays true to what the name promised.

  • If a value change cannot fail anyone's build, why do mature design systems still review value changes carefully?
    Because consumers build expectations on values even though they reference names. A new value can drop a text-and-background pair below its contrast target, overflow a fixed-size layout, or change what a status color communicates. None of that fails to resolve, so it is caught only by review: comparing reference screens, checking the pairs a color token sits in, and announcing deliberate visual changes in release notes.
  • Why is adding a brand-new design token treated as backward compatible?
    No existing reference changes: every name consumers already use still resolves to the same value, so nothing restyles and nothing dangles. The cost of an addition is long-term rather than immediate — every name added is one the system must support, document and eventually deprecate — which is why additions are reviewed for need even though they are safe to ship.
  • Why is a rename that silently falls back on one platform more dangerous than one that fails another platform's build?
    A build failure is loud and early: the consuming team sees it before release and the error points at the stale name. A silent fallback ships: the screen renders with a default or inherited value, passes every automated check that does not compare visuals, and is noticed only when a user is confused. That is why the system, not each consumer's build, must own rename safety.

A token name is like a clinic's phone number printed on thousands of appointment cards. The clinic can change who answers the phone at any time and every card still works; change the number itself and every card in circulation is wrong until the old number forwards to the new one.

saying these in an interview costs you the question

  • Renaming a token is harmless because its value stays exactly the same.
  • A token value change can never affect consumers because no name changed.
  • Consumers should copy raw values so token renames cannot affect them.
  • A rename only breaks web apps; native apps keep working unchanged.
  • If every consumer's build passes, a token rename caused no breakage anywhere.
open as a page

In the Design Tokens Community Group format, what do $value, $type and $description hold, and what makes an object a token rather than a group?

level: juniorimportance: must knowfreq 48%

basics

~20 s

In the Design Tokens Community Group format any JSON object with a $value is a token and any object without one is a group; $value holds the value, $type declares its kind, and $description explains its purpose in plain text.

open as a page

For a design token, why should the name describe its intent rather than its value, and what breaks when a name spells its value?

level: juniorimportance: must knowfreq 62%

basics

~20 s

An intent name such as breaking-news text color stays true when its value changes; a value name like red-text either lies after a rebrand or forces a rename in every consumer, and it couples unrelated roles that merely looked alike.

open as a page

In a design system with primitive, semantic and component token tiers, what does each tier hold, and which tier should product screens reference?

level: juniorimportance: must knowfreq 64%

basics

~20 s

Primitive tokens hold raw options such as every blue in the palette, semantic tokens alias them by purpose such as the primary-action color, and component tokens scope a decision to one component. Product screens reference semantic tokens.

open as a page

In a design system, how do you rename a widely used design token without breaking consumers, and when can the old name be removed?

level: middleimportance: must knowfreq 50%

basics

~20 s

Add the new token, turn the old name into a deprecated alias that references it, and ship that as a minor release. Remove the old name only in a later major release, once consumers have had at least one release to migrate.

open as a page

In a design token naming taxonomy, what do the namespace, category, property, variant, state and scale segments carry, and why fix their order?

level: middleimportance: must knowfreq 50%

basics

~20 s

Namespace says which system owns a token, category the kind of decision, property what it applies to, variant the role, state the condition, scale the step. A fixed order makes names guessable, sortable, checkable and free of permuted duplicates.

open as a page

When a token build converts one source size into web and native outputs, what unit conversions happen, and where can information be lost?

level: middleimportance: must knowfreq 48%

basics

~20 s

Idealised-pixel sizes map to each platform's density-independent unit, and text-relative sizes map to scalable text units. Where a platform lacks a text-relative unit, the build assumes a default text size, and the output stops following the user's text setting.

open as a page

Why does a design system put a semantic token layer between raw primitive values and components, and what does that extra layer cost?

level: middleimportance: must knowfreq 60%

basics

~20 s

The semantic layer records intent: components ask for the primary-action color, not a specific blue, so the system changes a decision by re-pointing one alias. The cost is an extra hop to debug, more names to learn and a vocabulary to keep right-sized.

open as a page

When a token build generates outputs for web, native apps and a design editor, why are token names recased per platform, and what can collide?

level: juniorimportance: should knowfreq 40%

basics

~20 s

Each platform has its own identifier rules and conventions, so the build derives every output name from the token's unique path. Distinct paths that differ only in case or separator placement can collapse into one name, and one token silently overwrites another.

open as a page

In the Design Tokens Community Group format, when should typography, shadow or border values be one composite token rather than a group?

level: middleimportance: should knowfreq 40%

basics

~20 s

Use a composite token when sub-values are always applied together as one style, such as a text style, shadow or border, so they cannot be mismatched; use a group when tokens are merely organised together and applied separately.

open as a page

In the Design Tokens Community Group format, how is a token's type resolved without $type, and why must tools not guess it?

level: middleimportance: should knowfreq 42%

basics

~20 s

An explicit $type wins; otherwise an alias takes its target's type, and any other token inherits the $type of its closest parent group; with none of these the token is invalid. Guessing is banned because values of different types look alike.

open as a page

For a design token scale such as spacing, when would you name steps numerically instead of t-shirt sizes, and what does each cost?

level: middleimportance: should knowfreq 44%

basics

~20 s

T-shirt steps (sm, md, lg) read easily and suit short, stable ladders but have no room between steps; numeric steps with gaps (100, 200) extend and insert cleanly; steps named after their literal value break when that value is retuned.

open as a page

In a design token build, when should a platform output resolve aliases to literal values, and when should it preserve the references between tokens?

level: middleimportance: should knowfreq 42%

basics

~20 s

Resolve aliases when a platform only needs final values and nothing overrides tokens after the build; preserve references when outputs are overridden at runtime, so changing one underlying token updates every token that points at it.

open as a page

For design tokens, how does an alias chain resolve to a value, and what problems do long or circular alias chains cause?

level: middleimportance: should knowfreq 38%

basics

~20 s

Resolution follows each alias to its target until it reaches a token holding an explicit value. A circular chain never reaches one and is an error; long chains are legal but make values hard to explain and changes ripple further than intended.

open as a page

A design token package for a veterinary booking system shipped 25% wider spacing values as a minor release, and the reception kiosk's appointment grid now overflows. Was it breaking, and how should token releases be versioned?

level: seniorimportance: should knowfreq 38%

basics

~20 s

No name broke, but a sweeping value change that predictably breaks consumer layouts is breaking in effect. Fix forward with a minor that restores the old values, then reship the change as a major or as opt-in tokens.

open as a page

For a charity's design system shipping to web, native apps and a design editor, should tokens be authored in a tool-agnostic token file or design-file-first, and what does each cost?

level: seniorimportance: should knowfreq 40%

basics

~20 s

A tool-agnostic token file in version control gives review, history and tool independence but adds friction for designers; design-file-first gives designers immediacy but ties the system to one editor's model. Either way, only one place may be writable.

open as a page

A news publisher's design system has role tokens named color-red-breaking, color-blue-link and font-serif-headline, and a rebrand is coming; what is wrong with these names and how would you restructure them?

level: seniorimportance: should knowfreq 38%

basics

~20 s

Each name spells its value - red, blue, serif - so the rebrand makes them lie or forces renames. Inventory usages, split each token into one intent token per role, and rename with the system's grammar before the new values ship.

open as a page

An accounting product's web app and two native apps show different values for the same tokens because teams copy values by hand; how would you set up build-time generation and publishing to keep them in sync?

level: seniorimportance: should knowfreq 38%

basics

~20 s

Generate every platform's output from one source in one build on each accepted change, publish all outputs together under one release identifier through each platform's normal dependency channel, and fail CI when generated files are hand-edited or stale.

open as a page

In a design system shared by several product teams, when does adding a component token tier pay off, and when is it just overhead?

level: seniorimportance: should knowfreq 34%

basics

~20 s

A component tier pays off when a component must diverge from a shared semantic decision, or have parts tuned separately, for a real brand or product. It is overhead when its tokens only mirror semantic ones and are never set differently.

open as a page

A ride-hailing driver app's design system re-pointed its primary-action semantic token for a brand refresh, but many screens still show the old blue. What bypassed the semantic layer, and how do you fix it?

level: seniorimportance: should knowfreq 44%

basics

~20 s

Those screens bypassed the semantic tier: they hold a pasted color value or reference the brand-blue primitive directly, so re-pointing the semantic alias never reached them. Classify each usage by purpose, map it to the matching semantic token, then guard against recurrence.

open as a page

In the Design Tokens Community Group format, how does one token reference another's value, and what can a curly-brace reference point at?

level: middleimportance: nice to knowfreq 34%

basics

~20 s

A token's $value can be a curly-brace reference to another token's dotted path, such as {color.palette.green.600}; it resolves to that token's entire $value and may target only complete tokens, never a group or part of a value.

open as a page

Before removing design tokens that look unused, how would you audit usage across web, native mobile and design-file consumers, and why can zero search hits mislead?

level: seniorimportance: nice to knowfreq 30%

basics

~20 s

Scan every known consumer for each token's per-platform output name, check which tokens other tokens alias, and deprecate candidates for a release before deleting them. Zero hits mislead because names get transformed, assembled dynamically or used by consumers you never scanned.

open as a page