14 · Web design
One Retail
Au cœur du commerce marocain moderne.
Art direction · Design system · Web design & development · Ecosystem architecture · Editorial system · Responsive engineering
The intent
Brick, pearl and wine on cream, an editorial retail maison for Morocco's H&S Group.
One Retail is the retail arm of Morocco's H&S Group, bringing Franprix, Monopoly, Venezia-Ice, BeautyForYou, Mr.Le Bricolage, Flormar and Dahab under one maison. The brief was to make a holding feel like a destination, not a portfolio of logos.
The system runs on a warm editorial pairing that reads comme un grand magasin: brick and wine-deep reds against pearl cream, with Averia Serif Libre carrying the headlines and Righteous handling the labels. The cream is the page ground, the red is the action, and near-black ink keeps the institutional weight.
The centrepiece is a living ecosystem explorer, hover and tap through the group's entities and sectors, so the architecture itself tells the consolidation story. A president's word, four activity pillars, five values and the newsroom complete a page that sells the group as a single sensory experience.
- Client
- One Retail
- Year
- 2026
- Discipline
- Web design
- Stack
- React 19 · React Router · Vite · Tailwind v4 · Framer Motion · Vercel
Live build
Desktop & mobile
Both frames below are the real deployed site, running live. Scroll inside them.
- 01
Desktop runs the full-bleed hero and a four-column domain grid, with the ecosystem explorer on a 12-column hover map.
- 02
Tablet collapses the ecosystem explorer to a simpler grid and the domains to two-up.
- 03
Mobile swaps hover for tap-to-explore on the ecosystem, stacks the domains, and shrinks the logo marquee heights.
Design system
Palette & type
Brick
#AB2D26
Primary / action
Wine deep
#640705
Deep CTAs
Wine
#8B1A1A
Focus / scrollbar
Ember
#C93A30
Borders / highlights
Pearl
#F5F0E6
Page ground
Pearl deep
#ECE4D3
Soft surfaces
Ink
#1A1A1A
Type
Ink soft
#3B3431
Muted type
- DisplayAveria Serif LibreA warm, softly-rounded serif for headlines, set tight with ss01 features on. The maison speaks in print.
- LabelRighteousA chunky display grotesk reserved for eyebrows and marquee bands, wide-tracked and always uppercase.
- BodyInterThe workhorse for copy, nav and cards, quiet enough to let the serif own the page.
Motion
How it moves
- 01
Sensory marquee
A 32-second linear marquee of the group's brand logos runs across the ecosystem band, paused on hover — the one continuous gesture that says the whole is bigger than any single enseigne.
- 02
Scroll reveal
Every section enters on a shared IntersectionObserver reveal with spring easing (cubic-bezier(0.22, 1, 0.36, 1)), so the page assembles itself as it is read.
- 03
Slow hero settle
The hero imagery drifts from scale 1.15 down to rest under a vignette scrim, keeping the headline legible over any photography.
- 04
Group hover
Cards lift, arrows translate, images scale to 1.05 and links warm to brick on group-hover — motion that answers the cursor without ever upstaging the cream.
Page architecture
- 01Hero — Au cœur du commerce marocain moderne, with Découvrir
- 02Qui sommes-nous ? — One Retail, filiale de H&S Group
- 03L'écosystème — hover-to-explore entity map of the group
- 04Mot du Président — Moncef Belkhayat on a modern Moroccan retail
- 05Nos Domaines d'Activité — Lifestyle, Beauty, Restauration, Bricolage
- 06Nos Valeurs — Ownership, Agility, Simplicity, Integrity, Sustainability
- 07Ambitions & Missions — the four growth pillars
- 08Actualités — the group newsroom
- 09Contact — Parlons de votre projet retail
Next projects
All projects →
