Cinder
A daily cup with an origin and a rhythm.
Cinder opens as a roastery package poster, with an oversized tactile coffee pouch at the centre and origin and tasting notes in opposing corners. Cream, kraft, and olive packages give three roasts their own material character against a brick field. A compact order strip puts grind, quantity, and price directly beneath the coffee. The original ember symbol and Grindela typography connect the storefront to the warmth of roasting. A batch ledger makes process and altitude easy to compare, followed by a coffee-cherry photograph and a practical brewing sheet. Visitors can build a basket and save a delivery rhythm while keeping the ritual of the everyday cup in view.
- Role
- Brand identity and frontend design
- Year
- 2026
- Platform
- Responsive website
- Status
- live
The problem
Coffee buyers need to connect tasting notes to a roast, then choose a useful grind and quantity. The storefront should make that decision feel as clear as reading the package.
What I built
A roastery storefront with three coherent package studies, working order choices, a local basket and a brewing reference.
Inside the product.
Screens from the working product, with demonstration data.
Desktop website
An oversized tactile pouch stands against brick red. Origin and tasting notes sit in opposing corners, and the order controls form a compact strip beneath the coffee.
Scroll sideways to inspect the interface.
The choices behind it.
Brand identity and frontend design
Start with the package
An oversized tactile pouch stands against brick red. Origin and tasting notes sit in opposing corners, and the order controls form a compact strip beneath the coffee.
Keep the roast in the basket
Roast, grind and quantity travel into the basket as one selection. A batch ledger and brewing sheet continue the practical story after the first order choice.
Warmth above the hearth line
A small ember above the hearth line represents roasting heat and the quiet warmth of a daily coffee ritual.
From start to finish.
- Choose a roast
- Set the grind and quantity
- Review the basket and brewing notes
Build details Stack, scope, and implementation
Built with
- React 19
- TypeScript
- Vite
- CSS
Areas
- Web design
- Brand identity
- Coffee
- Ecommerce
- Retro modern
- Typography