Frontend Architecture
Design tokens: multiple-choice review
Crux Multiple-choice synthesis across the design-tokens unit: tier boundaries, semantic theming, the cross-platform pipeline, CSS-variable cascade, and how drift creeps back in.
Your altitude — climbing toward senior
ZeroJuniorMiddleSenior
You are at senior altitude — in orbitSix questions that cut across the whole unit. Each mirrors a real decision — where a token belongs, what a component is allowed to reference, when a pipeline pays off — not a definition to recite.
Goal
Confirm you can connect the three tiers, semantic theming, the cross-platform build, and the discipline that keeps drift from creeping back — the synthesis the lesson built toward.
Quiz
Completed
A code review shows a button styled with background: var(--color-blue-600). The system has primitive, semantic, and component tiers. Why is this a defect even though the color is technically a token?
Heads-up Naming the value is not the goal; routing intent through the semantic layer is. A component bound to a primitive cannot follow a theme override, so it has fallen out of the token system in practice.
Heads-up Inlining the hex is strictly worse — it is a literal, the original drift source. var() resolution is effectively free; the defect is the tier, not the syntax.
Heads-up Component tokens are optional. The button could correctly reference color.interactive.default directly; the bug is referencing a primitive, not the absence of a component token.
Quiz
Completed
Dark mode must recolor every component with no JavaScript and one repaint. Which approach delivers that on the web?
Heads-up That reinvents what the cascade does for free, adds re-render cost, and risks a flash before hydration. Custom properties recolor in one repaint with zero JS.
Heads-up That is a forked copy of every rule — the multi-tone-button failure mode. You maintain two sets of component styles that drift independently.
Heads-up Components must reference semantics, not primitives. Overriding primitives can work, but the discipline is to redefine the semantic layer so intent is preserved and components stay theme-agnostic.
Quiz
Completed
The team authors tokens once in DTCG JSON and runs Style Dictionary. What is the load-bearing step that makes one source correct on web, iOS, and Android?
Heads-up Platforms do not consume DTCG JSON at runtime. The build resolves aliases and emits native artifacts (CSS, colors.xml, a Swift file); the transform step is what makes each output correct.
Heads-up Aliases handle reference resolution within the source, but a CSS px value is wrong for Android XML and a hex is wrong for UIColor. Transforms, not aliases, adapt values per platform.
Heads-up Importing raw JSON still leaves each platform to interpret values itself — the manual fork. The pipeline's job is to emit platform-native files via transforms and formatters.
Quiz
Completed
A five-person team ships one web app, one theme, no native targets. They propose a full three-tier system with a Style Dictionary build. What is the senior read?
Heads-up Each tier is indirection a new engineer must trace and a place a bug can hide. With one target and one theme the pipeline cost outweighs the drift it prevents.
Heads-up Even one web app benefits from primitive plus semantic tiers so a rebrand or future dark mode is one edit. The question is how many tiers, not whether to tokenize at all.
Heads-up Component tokens are the most optional tier and add the most hops. You introduce them only when a specific component must diverge, not as a default.
Quiz
Completed
Three weeks after rolling out tokens, a grep finds fresh hardcoded hex values scattered through new components. The tier model is sound. What is the durable fix?
Heads-up Training fades; the next deadline reintroduces literals. Drift is a process problem, and only an automated gate in CI holds the line reliably.
Heads-up Coverage helps, but it does not stop someone from pasting a hex anyway. Without a build-time error the system erodes regardless of how complete the palette is.
Heads-up Inlining hex is the original drift, just relocated. The fix is to forbid raw values, not to make them more local.
Quiz
Completed
A designer asks why the button cannot just reference color.blue.600, since that is what it resolves to anyway. What is the precise reason for the extra semantic hop?
Heads-up var() resolution cost is negligible and adding a hop does not speed anything up. The benefit is intent and theme-override capability, not performance.
Heads-up The semantic tier is what lets dark mode and rebrands happen as one edit. Removing it re-couples every component to the raw palette — the unit's core failure mode.
Heads-up DTCG defines the format, not which tier a consumer may reference. The hop is an architectural discipline that buys theming and rebrand-in-one-edit, not a spec rule.
Recap
The through-line is one rule with consequences: a component references a semantic token, never a primitive and never a literal. That single discipline is what lets the cascade theme dark mode for free, lets one DTCG source generate correct CSS, Swift, and Android via transforms, and lets a rebrand be one edit to the primitive layer. Size the tiers to the targets you ship, and gate the rule with a linter — because a convention without an enforced gate drifts back to hardcoded hex within weeks.