Independent website / Websites
Daybreak
A bright coffee identity with a considered shopping experience.
An independent website project exploring brand identity, coffee discovery and a complete local shopping experience.
Explore the website- Work
- Visual direction · Commerce UX · Development
- Year
- 2026
- Status
- Independent
- Website
- Explore Daybreak
Overview
The idea behind
Daybreak.
A self-initiated coffee website that carries a playful packaging identity through product discovery, brewing choices and a local shopping bag. Developed from the Daybreak source website and original showcase film, with clearer product guidance and a more complete shopping interaction.
People choosing coffee for home who want familiar tasting notes and straightforward choices for their brewer.
The brief
Give a daily purchase a little personality.
The brief was to make an approachable coffee brand feel distinctive while keeping the buying decisions simple. Visitors should understand the flavours, choose a suitable grind and see exactly what they have added to the bag.
The direction
Packaging sets the tone. The shop does the work.
Cobalt type and three contrasting packs give the brand a recognisable starting point. Familiar tasting notes help someone choose without specialist coffee vocabulary. The configuration step keeps brewer and delivery choices together.
The design
Colour with a job to do.
Peach, lilac and yellow distinguish the coffee varieties. Cobalt connects navigation, typography and actions across the site. The original vector packaging is reused as a brand asset, with clean, scalable rendering on desktop and mobile.
- Palette
- Cobalt · Peach · Lilac · Yellow
- Range
- The Daily · Bright Side · Slow Sunday
- Interaction
- Coffee configuration · Shopping bag
The build
The details after the add button.
The bag calculates a total from the selected coffees, retains each grind and delivery choice, supports item removal and restores useful keyboard focus as the interface changes. Checkout provides an explicit local review state. No payment provider or order service is connected.
What it does
Details that make
the product.
- Three coffees with distinct packaging and tasting notes
- Grind and delivery rhythm selection for each bag
- Shopping bag with item removal and calculated totals
- Brewing guidance, responsive navigation and a local checkout review
Under the surface
Built with.
- Semantic HTML, CSS and vanilla JavaScript
- Existing vector packaging identity
- Native dialogs and Intl currency formatting
- Next.js hosting and portfolio integration
A closer look
The screens & details.
Select an image to explore.
Music-only film showing the colourful desktop shop, coffee packaging, product choices and mobile layout, followed by Digital Upstream’s closing identity. The film shows the original concept before the portfolio refinements.