12 · Web design
CHILLOUT Lounge
Live music, cocktails and sunset sessions facing the Atlantic.
Art direction · Design system · Web design & development · Motion design · Responsive engineering
The intent
Golden-hour garden palette with a CSS-only grunge overlay on the display type.
The lounge bar inside Lunja Village: live music, signature cocktails, tapas and sunset sessions facing the Atlantic, open 7/7 from 16h to 01h. One job — fill tonight.
The palette is the golden-hour garden: sun-bleached linen, warm near-black, chillout yellow and a terracotta lifted straight from the market umbrellas on the terrace.
Because the venue is loud and hand-made, the headlines carry a grunge speckle overlay — three layered radial gradients that put a print texture over solid type without a single image request.
- Client
- CHILLOUT Lounge
- 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 pairs the programme and the menu as a two-column editorial spread.
- 02
Tablet stacks them and keeps the sunset imagery bleeding past the gutter.
- 03
Mobile pins a reserve-tonight bar to the bottom safe area under the ticker.
Design system
Palette & type
Chillout yellow
#FFE600
Primary
Warm black
#1A1410
Secondary
Linen
#F4EFE4
Page ground
Aged paper
#EDE8DC
Cards
Terracotta
#D44B2A
Accent
Warm tan
#C8BFA8
Borders
- DisplayBarlow CondensedWeight 900 with +0.02em tracking and a grunge speckle mask — print poster, not web header.
- ScriptCaveat BrushChalkboard voice for the nightly programme and cocktail notes.
- BodyDM SansMenu items, times and the booking form.
Motion
How it moves
- 01
Grunge overlay
Three stacked radial-gradient speckle layers ride on top of headline type, animated by grain-drift walking the background-position a few pixels each way — full print texture, zero image weight.
- 02
Ken Burns and sun particles
Hero imagery scales 1.12 to 1.18 while particle-float lifts sun motes 55px up the frame on a per-particle --drift offset.
- 03
Polaroid bob
Photo cards rest at a --tilt angle and bob 8px on polaroid-bob, so the wall of pictures reads as pinned rather than placed.
- 04
Shimmer and pulse
A yellow shimmer-sweep crosses the primary button from -100% to 140%, and the reserve CTA carries an 18px pulse-ring. All CSS keyframes — no motion library in the bundle.
Page architecture
- 01Hero — CHILL, open 7/7, 16h → 01h
- 02Events — what's on tonight
- 03Upcoming — the programme ahead
- 04Cocktails signature
- 05Tapas et sunset sessions face à l'Atlantique
- 06Réserve ta soirée
