Frontend Architecture
Design tokens: build a themed token pipeline
Reading about tiers and pipelines is not the same as shipping a rebrand in one edit. Build a real token system, wire the generator, add a dark theme without touching a single component, and prove the rebrand-in-one-edit promise with a diff.
Turn the unit’s mental model into a working pipeline: author tokens once in DTCG JSON across three tiers, generate platform CSS with Style Dictionary, theme dark mode by overriding only the semantic layer, and enforce the no-raw-value rule so drift cannot creep back.
Build a small component set (button, card, link, input) styled entirely through a three-tier token system. Author tokens once in DTCG JSON, generate CSS custom properties with Style Dictionary, ship a dark theme that touches no component code, and gate the system so a hardcoded value fails the build — then prove a rebrand is one edit.
- A diff of the rebrand commit shows the change confined to the primitive layer of the token source (plus regenerated CSS) — zero component files touched.
- Toggling data-theme to dark recolors all four components correctly with no JavaScript and no component CSS changes; a hardcoded value, if one slipped in, is visible as a two-tone defect.
- The lint gate fails the build on an intentionally pasted raw hex in a component, and passes once it is replaced with a semantic token.
- A short write-up: which tier each token lives in and why, and one sentence on when you would NOT add the component tier or the pipeline.
- Add a second platform output (iOS Swift or Android colors.xml) from the same source and show the color transform (hex to UIColor, or 8-digit ARGB) produces a correct native artifact without editing the JSON.
- Add a high-contrast theme as a third semantic override and confirm all components adapt with no new component code.
- Add a CI step that runs the token build and fails if the generated CSS is out of date with the source (committed artifact drift), the same way a generated-code check works.
- Add a composite DTCG token (typography or shadow bundling several sub-values) and wire one component to it, showing the bundle resolves correctly through the pipeline.
This is the loop a token system is supposed to make routine: author intent once in DTCG JSON across primitive, semantic, and component tiers; generate platform CSS so nothing is hand-copied; theme dark mode by overriding only the semantic layer so the cascade recolors everything in one repaint; and gate raw values with a linter so the convention cannot decay. The rebrand diff confined to the primitive layer is the whole payoff — the eleven-week grep becomes one edit.