01
A menu organised by context
Categories help visitors quickly find the kind of item they are looking for.
Três Grãos
An origin-led experience that brings territory, information and clarity together.
Três Grãos shows how specialty coffee origins can become a full editorial site, with a hero, house story, regions and a journal. The project has an identity of its own, with a redrawn light/dark theme, typography and mark, plus an ordering section where people can explore lots and build a selection without the complexity of a real checkout.
This tour explains the decisions behind the experience, from the visual identity to the ordering logic, alongside the final interface.
The challenge
A specialty coffee retail experience needs to tell its origin story before it sells and balance product information with bag control, without interrupting discovery. Its visual identity also needs to hold up across any reading theme, light or dark.
The objective
The experience brings visitors closer to the story and the products, and gives them control over a selection, without suggesting that a real purchase is taking place.
- Tell the house's story before selling
- Anchor the brand in a visual identity of its own (theme, type and mark)
- Make products easy to discover
- Allow filtering by category
- Offer immediate feedback
- Keep the bag easy to understand
- Adapt the experience for mobile and for light or dark reading
- Make the demo's boundaries clear
The user journey
People learn the house's origin story and pick the reading theme they prefer. From there, they keep the context of the menu while turning interest into a selection they can review.
Read the house's story and origins
Switch between light and dark themes
Explore the menu
Filter products
Add to bag
Adjust quantities
Confirm the simulation
Key decisions
The interface balances an editorial atmosphere with direct controls for every action.
02
An accessible bag while browsing
Visitors can review and change their selection without losing the context of the menu.
03
Feedback at every interaction
Adding, removing or changing a quantity produces an immediate visual response.
04
Planned states
The experience accounts for an empty bag, removing items, clearing it completely and a simulated confirmation.
05
A theme switch with no JavaScript
A switch in the header swaps the page's entire palette through a CSS `:has()` selector. There is no re-render, and no script is needed to avoid a flash of the wrong theme before hydration.
06
A mark and type system of its own
The symbol and logotype were rebuilt as faithful vector outlines from a reference artwork. The typefaces, serif and sans, are hosted by the project itself, with no dependency on third-party fonts or icons.
What happens behind the interface
The interface keeps the bag in sync while the visitor browses. Quantities, items and the summary update immediately after every action. The header's theme switch swaps light and dark instantly, because the whole palette is resolved by the browser through CSS, with no re-render and no flash.
Cultural brand strategy, origin-led storytelling, interactive menu, a light/dark theme and a responsive ordering experience.
Accessibility and experience
Filters, quantity controls, the theme switch and messages are organised to make every action obvious and easy to resume.
- Controls with understandable names
- Keyboard navigation
- A visible focus state
- A theme switch with a proper switch role and announced state
- An updated count and summary
- A clear empty state
- Feedback after every action
Responsive design
On smaller screens, the catalogue and selection stack into one column with comfortable touch targets, and the hero's mountain illustration gives way to the text. On wide screens, the selection follows the journey without competing with the origins, and the relief line gets room beside the text.
What this demonstrates
The concept shows how a commerce experience can stay simple even with a visual identity of its own and several small decisions.
- A visual identity of its own (theme, type and mark)
- A hand-built vector illustration
- Bag logic
- Consistent interaction control
- A considered empty state
- Subtle microinteractions
- Mobile adaptation
- No payment or real order
The standard behind this project
The demo follows principles that make a digital experience more useful, trustworthy and comfortable to use.
- A clear experience
- Works across screen sizes
- Keyboard navigation
- Feedback after actions
- Localised content
- Predictable behaviour
- No unnecessary complexity
- Clear boundaries for the demo
Technical details
Implementation in focus
- The light/dark theme is resolved entirely in CSS, with no JavaScript involved: a hidden checkbox in the header is read by a `:has()` selector that swaps a set of custom properties, which avoids a flash of the default theme before hydration.
- The symbol and logotype form a single vector path in `currentColor`, rebuilt from a reference artwork. The original outline was extracted from a PNG through subpixel contour tracing and fitted to Bézier curves, so the brand name depends on no font at all.
- Typography, serif for headings and sans for body copy, is hosted by the project itself via next/font/local, as required by the site's content security policy, which blocks fonts loaded from third parties.
- The hero's mountain illustration and the origins section's topographic relief are hand-drawn SVG, coloured through the same CSS variables as the theme, with no image, third-party icon or illustration library involved.
- The menu and bag share one local source of truth so items, quantities and the summary stay consistent.
- Categories only change which products are shown; they do not discard an existing selection.
- Removing an item, clearing the bag and the simulated confirmation each have their own state and feedback message.
- Each language is kept in dedicated content files, with equivalent routes for the demo.
What this demo does not do
The demo explores the ordering decision without simulating an operation that does not exist.
- Does not place orders
- Does not include checkout
- Does not take payments
- Does not request an address
- Does not send or store data
View the project
Explore the house's story, switch between light and dark themes, filter products and build a demo bag with no checkout or real order.
View projectNext project
Next, see how a few short choices can produce a clear recommendation for a professional services context.
Explore next project: Routebound