Learning on Web Dev Open is free for all.

Design Craft > Systems, tokens and handoffFaithful, not approximate
Phase 02Systems, tokens and handoff123 of 434

Faithful, not approximate

Implement a real design to the pixel, then overlay a screenshot at fifty per cent opacity and find out how close you actually got.

Build40 minAI off

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

  • Match spacing, type and colour to a source design exactly
  • Use an overlay comparison to catch drift
  • Decide deliberately where to deviate and record why
Ask the community

Loading…