Screens
Demo 1 mockups are paired with Demo 2 live app screens.
09 Changelog
From Demo 1 mockups to the live app.
A concise record of what changed from Demo 1 to Demo 2, covering screens, tokens, components, accessibility, and motion.
System
Colours, typography, radius, spacing, and components now match code tokens.
Quality
Accessibility, validation states, and motion behaviour are documented.
System evolution
Design system refinements
System-wide refinements made for the updated guide.
Colour system expanded
Added full colour tokens with HEX, RGB, HSL, usage notes, semantic colours, contrast ratios, and gradient examples.
Reason: To show the final production-ready palette that explains how colours are applied, not just what they are.
Typography shown in context
Added font roles, token examples, hierarchy mapping, and a product-style screen showing display, headings, labels, body, caption, and button text together.
Reason: the type system now demonstrates how text works in the interface instead of only listing values.
Logo and icons clarified
Added logo variants, clear-space rules, minimum sizes, approved colours, forbidden treatments, icon usage, icon sizing, and visual icon examples.
Reason: the brand identity now includes practical rules for both the logo and everyday interface icons.
Voice and tone added
Added UI copy rules with visual examples for button labels, error messages, empty states, and helper text.
Reason: To make UI consistent, helpful, and specific across real user flows.
Component library completed
Added visual examples for buttons, inputs, selects, cards, chips, icon buttons, navigation, modals, toasts, variants, sizes, and states.
Reason: the guide now shows how standard components behave in default, focus, loading, disabled, selected, and error states.
Layout adaptation documented
Added spacing scale, component spacing, radius scale, shadow and motion tokens, plus desktop, tablet, and mobile layout adaptation examples.
Reason: To show how layouts adapt across screen sizes instead of only listing spacing numbers.
Accessibility standards expanded
Added WCAG 2.2 AA guidance, keyboard rules, focus examples, screen-reader examples, reduced-motion rules, contrast guarantees, and Lighthouse accessibility score.
Reason: accessibility is now documented as a working product standard rather than a general intention.
Reduced motion tied to the app
Added reduced-motion guidance using device animation settings and documented which motion should be reduced.
Reason: reduced motion needed to match the product experience, not just the guide website.
Wireframes matched to real screens
Updated the wireframes page with clearer mockup and live-screen comparisons, improved image layout, and better navigation flow presentation.
Reason: To show the progression from planned screens to the working application.
Unchanged
What stayed the same
Core identity elements carried through from Demo 1.
- Logo: full, mark, and monogram variants.
- Primary palette: maroon and gold brand pairing.
- Voice: warm, direct, and food-first.
- Navigation: Home, Swipes, Discover, Vault, and Pantry.
- Principles: consistency, simplicity, warmth, and intelligence.