Learning on Web Dev Open is free for all.

Design Craft > The redesignA component that belongs to a system
Phase 02The redesign127 of 434

A component that belongs to a system

One component, every state, every variant, documented well enough that a model given only the documentation builds it correctly.

Solo project100 minAI implements

Done when

  • Every state present: default, hover, focus-visible, active, disabled, loading
  • At least three variants and two sizes, all built from tokens
  • No hard-coded colour, spacing or radius anywhere in the component
  • Documentation covers props, states, do-not-use cases and accessibility notes
  • A model given only the documentation produces a recognisably correct build

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

You should now be able to

  • Build a complete component contract from tokens
  • Document a component so a stranger uses it right
  • Test the documentation by having it followed literally
Ask the community

Loading…

← PreviousRedesign something you shippedThe redesignNext →The case studyThe redesign