Keep the collection small and distinct.
Each of the six scents has a family, mood, notes, colour cue and pairing. Shared product structure makes the differences easier to read without turning each fragrance into a separate store.
Fragrance / Commerce · 2026
VESPER
A quieter way
to discover scent.
A fictional contemporary fragrance maison: six scents, a Discovery Set, a personal scent finder and a complete browser-local shopping experience.
VESPERVisual language
Inside the project
The whole picture.
A source-reviewed overview of the website, its content and the systems behind it.
- Authored views
- 22
- Distinct photographs
- 28
- Language
- English
- Build
- JavaScript modules · HTML · CSS · Local storage
- Hosting
- GitHub Pages
- Media
- 28 photographs · Cloudflare R2
- Audience
- A visitor comparing fragrance families, finding a personal match and exploring a concept store.
- Fragrances
- 6
- Discovery set
- 6 × 2 ml
- Scent finder
- 4 steps
Colour language
Limestone#F6F4EF
Paper#EBE8DF
Maison green#3B4539
Mineral#4D5A5A
Original website typefaces
- DM Sans
- Manrope
- System editorial serif
How these figures were counted
22 authored views: 13 fixed destinations, six fragrance pages and three journal articles. This is one hash-routed application; generated local order receipts and filter states are excluded.
Reviewed 23 October 2026. Duplicate source copies, error pages and responsive image variants are excluded. Counts describe the original website, not this case study.
View the reviewed source ↗The starting point
Start with a world.
Give it a reason to exist.
I imagined a fragrance maison around six carefully differentiated scents. The challenge was to give the collection an editorial identity while building a complete, understandable path from discovery to a local checkout preview.
Design decisions
Why it looks
the way it works.
Three decisions that connect the visual language to the experience.
Use photography as a material language.
Glass, stone, linen and directional light connect product photography with editorial images. Restrained surfaces give the bottles and their individual colour cues room to carry the identity.
Make the commerce flow complete and honest.
Search, family filters, a wishlist, bag and checkout preview form a connected journey. The website clearly distinguishes a browser-local demonstration from real payment, account authentication or order fulfilment.
From design to behaviour
One system. Six compositions.
Select a fragrance to compare its authored notes and colour cue, then open its original product page.
Fresh
LUNE I
Bergamot / Iris / White musk
Find a scent
A four-step editorial finder links preferences to the authored fragrance families and moods.
Explore this feature ↗Explore the collection
Search, scent-family filters and sorting offer several ways to compare the six fragrances.
Explore this feature ↗A local shopping journey
Bag, quantities, wishlist and a preview checkout keep their state in the browser. No real order or payment is submitted.
Explore this feature ↗One identity. Different compositions.
Built for the screen
in front of you.
The collection, product detail and bag follow a compact mobile sequence. Explicit buttons carry the shopping flow, while the scent finder asks one question at a time.
What I explored
A visual idea,
carried all the way.
Quiet art direction still needs a complete operating structure. VESPER explores how a restrained visual language can support discovery, comparison and a connected shopping flow.