Three artifacts produced this session: a written source-of-truth, a visual companion, and ten captured wireframes. Open them below. Companion to mockup.html.
DESIGN-SYSTEM.md is the agreement; design-system.html is the rendered specimen; mockup-v7 is the working prototype the design was extracted from.
13 sections covering brand, color, type, components, motion, page wireframes, mobile rules, Webflow Variable mapping, and what we deliberately don't do. Read end-to-end.
Agency-style visual companion — color swatches, font specimens, button states, annotated Double-Bezel card, easing-curve diagrams, Webflow mapping table. Renders the system you can't show in Markdown.
The 4 100-line mockup.html with all five views (Home, Collection, My Event, Gallery, Quote), Motion One animations, and mobile swipe-snap nav. Tap through it to see the design in motion.
Captured from mockup.html via puppeteer with a flatten-and-screenshot pass so each PNG shows the entire scrollable view, not just the viewport. Click any tile to enlarge.
Same content as the file in the repo, fetched and rendered client-side. Use the table-of-contents on the left to jump between sections.