Mapping the Current Visual Chaos
Day 27 of 30 · The Playbook 2026 – Masterclass for Designers
Learning goal
To create a UI inventory that captures components, colors, type, states, divergences, and provides a unified criteria for visual design.
Who
Designers, UX specialists, and visual designers.
What
A UI inventory that includes components, colors, type, states, divergences, and provides a unified criteria for visual design.
Where
In a centralized digital asset management system or a design tool like Sketch, Figma, or Adobe XD.
When
When starting a new design project or reviewing existing visual design systems.
Why it matters
To ensure consistency and efficiency in visual design, and to streamline the design process.
How
Create a UI inventory:
- Components: List all the reusable UI components (buttons, inputs, etc.).
- Colors: Define a palette with 27 unique blues and 5 radius variants.
- Type: Specify typefaces and their usage.
- States: Show how components behave in different states (hover, focus, etc.).
- Divergences: Highlight any divergences from the Playbook.
Divergence list vs Playbook:
- Compare your inventory with the design system's playbook to identify divergences.
- Must/Should/Nice categorization: Classify issues based on their severity (must, should, nice).
- Quantify issue types: Count how many divergences you have from the playbook.
- Capture unified criteria: Ensure you have a unified set of criteria for evaluating visual design quality.
Be ready to capture and define visual inventories:
- Inventory exists: Check if your inventory exists in your system
Guided exercise
Export 10 screens and build an inventory table. Mark divergences vs Playbook and bucket into must/should/nice.
Independent exercise
Share a short report with the counts.
Self-check
Check if your inventory exists, divergences are quantified, and prior buckets are ready.