Frontend Architecture
Design tokens: free-recall review
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.
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.
- 01What does a design token actually name, and why is aliasing a hex to a name not enough on its own?
- 02Describe the three tiers and state which one a component is allowed to reference.
- 03How does dark mode recolor every component on the web with no JavaScript?
- 04How does one token end up correct on web, iOS, and Android without anyone copying values by hand?
- 05A team rolls out tokens, then weeks later hardcoded hex reappears in new components. Why, and what is the durable fix?
- 06When are three tiers and a full pipeline justified, and when are they over-engineering?
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.