Learning on Web Dev Open is free for all.

Design Craft > Systems, tokens and handoffComponents as contracts
Phase 02Systems, tokens and handoff120 of 434

Components as contracts

A button with every state, every size and every variant, documented, in one file. Build it once and never argue about buttons again.

Build30 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

  • Enumerate every state a component must handle
  • Build variants from tokens rather than overrides
  • Document the contract so somebody else can use it correctly
Ask the community

Loading…