Mobile-first design system with chat companion

A demo built for a specific brief. Not client work: the material shown is sample data, so what is on display is the mechanism.

I built five linked pages for a placeholder jewelry shop and its buying companion. The homepage has a hero with an ask field, a three-step How it works story, editorial cards and companion calls to action in the hero, after the story, in a closing band and pinned to the bottom on phones. The chat streams its reply word by word, brings in product cards one stagger apart, and has idle, thinking, searching (with a maker count), streaming, results and error states, the error keeping the visitor's message with one retry. Everything draws on 45 tokens across color, type, space, radius and motion; the build asserts 10 text pairings at AA (lowest 5.78:1), 0 raw colors and 0 raw durations in the component CSS, 0 max-width media queries, and 44 px minimum taps. Six photo-style product shots rendered in code as stand-ins for makers' photos arrive with 5 backdrops, 5 rotations, 5 aspect ratios, mixed color casts and a 46% fill spread measured on the pixels; the framing rule (cut out, cast and exposure corrected, upright, 62% fill, centered, one baseline, one mat) brings the measured spread under 1%. A one-page usage guide covers all of it.