A coffee brand,
built as a system.
Everything quotes needs to run online — foundations, components and the live product experience, all drawn from one warm, editorial source of truth. Built the way real brands are: foundations first, experiences second.
- Core colours
- 5Core colours
- Type roles
- 14Type roles
- Bean, many roles
- 1Bean, many roles
- Live surfaces
- 9Live surfaces
Foundations
Foundations & Tokens
Brand, colour scales, type system, grid, spacing, radius, motion, iconography and the bean language.
Components
Buttons, forms, cards, navigation, badges, toasts, loyalty and states — the full library with variants.
Patterns
Navigation, product browsing, ordering, checkout, loyalty and location discovery — reusable compositions.
Experiences
Homepage
The flagship. Editorial hero, brand statement, featured coffee, story, quote moment and rewards.
Product page
Ethiopia Yirgacheffe — origin, roast, tasting notes, grind and bag selectors, subscription, add to bag.
Café menu
Category navigation, calm product cards, dietary indicators, sizes and customisation.
Loyalty
The bean-stamp reward system — progress, wallet, next reward and member profile.
Mobile ordering
Location → menu → customise → cart → checkout → confirmation, redesigned for small screens.
Journal
Editorial stories on origins, people and conversations — closer to a magazine than a blog.