Food and drink Concept website Concept
Ombrelo Coffee
A concept website for an imagined coffee roaster: loud, tactile and playful, with bold shadows, grain and a working brew calculator.
Concept Self-initiated design study, not a client project. Ombrelo Coffee is a fictional brand we invented; any names, prices or figures inside the concept are made up for the design. Imagery generated for this concept study.
- Brand
- Fictional (concept study)
- Sector
- Food and drink
- Our role
- Brand idea, design and development
- Try it
- Open the concept
(01)Overview
The brief, in short.
Ombrelo is a fictional direct-to-consumer roaster we invented to push a bolder, neo-brutalist style for a consumer brand. The coffee bags are drawn in CSS and fan out on hover, a ticker runs through flavours, and shoppers can filter beans, add to a bag and work out a brew ratio by method and cups.
Who it is for: Coffee drinkers who buy beans online, like to try new roasts and want to know exactly what is in the bag.
(02)What the concept explores
Pages and features.
- Bouncy word-rise headline
- Fanned CSS coffee bags with hover spread, spinning SVG text badge, bobbing beans
- Rotated flavour ticker
- Flavour filter
- Add-to-bag counter with toast
- Brew ratio calculator by method and cups
- Subscription rhythm picker
- SVG grain overlay
- Responsive photography (generated for the concept) with scrims for legible text
(03)Responsive views
Desktop and phone.
The full concept page on desktop and phone. Hover or tab onto a screen to scroll through it.
(04)Design
Type and colour.
Loud, tactile, sticker-bold roaster with neo-brutalist shadows and grain.
- #FF5A36
- #FFD23F
- #2E2BBF
- #F7EFE3
- #1B1B1B
- #F59AC6
(05)Details
Closer looks.
(06)Build notes
Under the hood.
- Hand-written HTML, CSS and JavaScript, no framework
- CSS-drawn product bags and a spinning SVG text badge
- Flavour filter and add-to-bag counter
- Brew ratio calculator
- SVG grain overlay
- Photography served as WebP with JPEG fallback, explicit sizes and lazy loading
Result
The concept is online here so you can try every interaction. It was made by Tarzi as a design study in October 2026; the brand does not exist and nothing in it can be bought or booked.
Start here
Want a site built this carefully?
Send a few lines about the business and what you want to change. We reply within one business day with questions or a suggested next step.