Stitch
Hope Macaulay sells joyful handmade knitwear. The site communicated 'cheap Shopify theme.' No tokens, no system, no consistent component logic anywhere.
Hope Macaulay had no design system, no token structure, and no consistent component logic. Every value was ad hoc. The same component appeared three times on a single page in three different visual styles.
How might we build a design system that finally matches the warmth and expressiveness of the products themselves?
The brand was there. The site wasn't.
Strong product photography. Warm personal copy. Right palette direction for slow fashion. The core shopping flow existed. The ingredients of a great brand experience were present, just not designed.
No system. No states. No consistency.
No design tokens, type scale, or spacing system, every value ad hoc. Interactive states missing on nearly every component. The same newsletter section appeared three times, the same nav duplicated in source three times. A site selling joyful creative knitwear felt like it could be selling anything.
"The products deserve a site as considered as the craft that made them."
Warm blush primary, full grey scale 50–900, semantic colours for success, error, warning, and info.
Figtree for display: confident, bold. Cormorant for body: editorial, warm. Modern product meets handmade craft.
Every component with complete hover, active, and focus states, before a single page was designed.
Five pages built on the system.
Starting with the audit before touching any new design meant every decision had a clear reason. The pages assembled quickly because the system already existed.
Defining colour tokens before components meant the whole system felt coherent from the start, one token change propagates everywhere.
Test the component system with real content earlier, some components needed adjusting once placed in full page layouts.
Extend to mobile. The brand's audience is heavily mobile and the current work is desktop-first.