Learning on Web Dev Open is free for all.

Design Craft > Systems, tokens and handoffThree layers of tokens
Phase 02Systems, tokens and handoff118 of 434

Three layers of tokens

Primitives, semantics, components. No hex below layer two, no raw pixel below layer two, and a rebrand becomes a change to one file.

Build32 minAI implements

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Structure tokens into primitive, semantic and component layers
  • Convert an existing stylesheet to the token architecture
  • Prove the rebrand claim by changing one file and reloading
Ask the community

Loading…