Oi Perfume
A five-page fragrance storefront — catalogue, product detail, bag and checkout — running entirely in the browser with no framework and no backend.
Oi Perfume sells seven concentrated eaux de parfum that share one cube-glass bottle with a solid beech cap. The storefront follows an Apple-style white gallery system: photography and one bold typographic statement own the screen, surfaces are paper-flat, and interaction is reduced to two button archetypes.
The Challenge
A complete commerce flow with no server, no framework and no build step — and a design system disciplined enough that all five pages read as one product.
- Browse, filter, sort, product detail, bag, checkout and a confirmed state — all client-side
- Seven products driving cards, a detail page, a search index, cart lines and related products without duplicating data
- Product photography heavy enough to sink the page weight at roughly 2 MB per source image
- English and Arabic, light and dark, with no colour allowed to drift out of the token system
The Solution
One catalogue, one stylesheet, one script — and nine design rules strict enough to be audited from the command line.
- Five pages share one stylesheet and one script; each opts into its controller with
<body data-page="…"> - A single
PRODUCTSarray drives every surface — cards,product.html?id=, search, bag lines and related products - Cart engine persisted in
localStorage, with quantity steppers, line removal and a live order summary - Guard rails on invalid state: an unknown product id redirects to the collection, an empty bag redirects out of checkout
- Nine non-negotiable design rules — no shadows, no gradients, five radii only, one primary button per page, font weight capped at 600 — verified by a grep audit after every CSS change
- Every colour resolves through a semantic token, so dark mode and RTL fall out of the same cascade rather than a second stylesheet
- Photography converted to WebP at two sizes (1000 px for hero and detail, 560 px for cards) — the whole set now weighs about 1.1 MB
Screenshots
The highlights band, product detail, and bag review — one row, click or drag to bring a screen forward.
