open atlas
↑ Back to track
Frontend Architecture FE · 04 · 08

Design tokens: free-recall review

Free-recall prompts across the design-tokens unit. Answer each in your own words first, then reveal the model answer and compare.

FE Senior ◷ 13 min
Level
FoundationsJuniorMiddleSenior

Retrieval beats re-reading. For each prompt, say or write a full answer from memory before you open the model answer — the effort of recall is what makes the material stick.

Goal

Reconstruct the unit’s spine — what a token actually names, why three tiers exist, how theming and the pipeline work, and how drift creeps back — without looking at the lesson.

Recall before you leave
  1. 01
    What does a design token actually name, and why is aliasing a hex to a name not enough on its own?
  2. 02
    Describe the three tiers and state which one a component is allowed to reference.
  3. 03
    How does dark mode recolor every component on the web with no JavaScript?
  4. 04
    How does one token end up correct on web, iOS, and Android without anyone copying values by hand?
  5. 05
    A team rolls out tokens, then weeks later hardcoded hex reappears in new components. Why, and what is the durable fix?
  6. 06
    When are three tiers and a full pipeline justified, and when are they over-engineering?
Recap

If you could reconstruct each answer from memory, you hold the unit’s spine: a token names a decision so intent lives in one place; three tiers exist so components reference meaning, not palette; the cascade themes dark mode for free when components read semantics; one DTCG source generates correct per-platform outputs via transforms; drift returns without a lint gate; and you size the tiers and pipeline to the number of targets you actually ship. Now when you review a token system — in a PR, an audit, or your own codebase — you know the two questions that cut through everything: “what tier does this component reference?” and “what enforces the rule?”

Something unclear?

Ask a question about this lesson. Questions are anonymous and go straight to the author to make the lesson better.

shortcuts expand
search
K
prev piece
k
next piece
j
cycle tier
t
this menu
?
sources2
expand
  1. 01
  2. 02

Trademarks belong to their respective owners. Editorial reference only.