10 · Web design
Lunja Village Vibes
Ta parenthèse ensoleillée à Imi Ouaddar.
Art direction · Design system · Web design & development · Motion design · Responsive engineering
The intent
Coral, teal and chillout yellow on linen — three loud colours held together by space.
Ta parenthèse ensoleillée à Imi Ouaddar — thirty minutes from Agadir, apartments and bungalows, pools, live music and a genuinely good crowd.
This is the loudest member of the Lunja family and the palette says so: coral against teal against a near-fluorescent yellow, all sitting on warm linen. Three saturated colours that should not work together, held apart by generous linen space and a heavy condensed display face.
A hand-lettered script runs underneath as the human voice — used for asides and captions only, never for anything a guest has to read to book.
- Client
- Lunja Village Vibes
- Year
- 2026
- Discipline
- Web design
- Stack
- React · TanStack Start · Tailwind v4 · CSS animation · Vercel
Live build
Desktop & mobile
Both frames below are the real deployed site, running live. Scroll inside them.
- 01
Desktop runs asymmetric colour-blocked sections with overlapping imagery.
- 02
Tablet flattens the overlaps into a stacked rhythm, keeping the colour blocks full-bleed.
- 03
Mobile turns the stay cards into a snap carousel and shrinks the display type to a two-line maximum.
Design system
Palette & type
Coral
#F25C2A
Primary
Teal
#1E9E8A
Secondary
Teal deep
#0F4A42
Dark sections
Yellow
#FBF304
Accent
Linen
#F4EFE4
Page ground
Ink
#141010
Type
- DisplayBarlow CondensedWeight 900, condensed, set enormous. Headlines are meant to be read from across a beach.
- ScriptCaveat BrushThe village's handwriting — captions, asides, and the occasional arrow.
- BodyDM SansQuiet, legible, and deliberately unremarkable so the colour does the talking.
Motion
How it moves
- 01
Ken Burns hero
The hero image runs a slow scale from 1.12 to 1.18 — never resting at 1, so the frame always feels alive under the type.
- 02
Marquee band
A continuous yellow marquee of village words runs between sections on a pure CSS loop, no scroll listener and no JavaScript.
- 03
Drift and float
Decorative elements wander on drift and float-y — a few pixels of translate plus a couple of degrees of rotate, offset per element so nothing beats in sync.
- 04
Pop-in menu
Navigation items enter on menu-item-in with a per-item delay, and the gallery opens on lightbox-pop. The whole site animates in CSS keyframes — there is no motion library in the bundle.
Page architecture
- 01Hero — LUNJA VILLAGE, ouvert 7/7, à 5 min de l'océan
- 02Imi Ouaddar marquee band, open 7/7
- 03Piscines et jardins
- 04Live music
- 05Surf & yoga
- 06Les séjours, B&B inclus
- 07CHILLOUT — the bar, open 7/7
- 08Résa express — réponse sous 24 h
Next projects
All projects →
