Brand: Cozy Corner Bookstore

Type: Independent Bookstore

Main feature: Blind Date with a Book

Products: 🌐 Website + 📱Customer App + 🖥 Internal Dashboard

Tools:  Figma, FigJam, Storybook, GitHub, Airtable, Asana and Vercel

My Role: Product Designer, the whole system end to end

<aside> 💡

• Overview </aside>

<aside> 💡

• Phase 1 — Brand Brief & Design System Roadmap </aside>

<aside> 💡

• Phase 2 — Token set </aside>

<aside> 💡

• Phase 3 — Figma Library </aside>

<aside> 💡

• Phase 4 — Coded Components </aside>

<aside> 💡

• Phase 5 — Registry board </aside>

<aside> 💡

• Phase 6 — Published Package </aside>

<aside> 💡

• Phase 7 — Reference site </aside>

<aside> 💡

• Phase 8 — Three products built on it </aside>

<aside> 💡

Outcome

Cozy Corner became a single source of truth that connects design and code end to end, from tokens in Figma to a published package, a reference site, and three real products built on it. Using it in real products also showed where the system needed to grow next.

</aside>

<aside> 💡

🎯 Challenge

Building a full design system for the first time meant keeping everything in sync as it grew: foundations, Figma components, code, documentation, and the products using it. A change in one place could easily drift out of step with the others.

</aside>