08 · Web design
LITHOS
La matière, racontée avec soin.
Art direction · Design system · Web design & development · Motion design · Responsive engineering
The intent
A 70/20/10 quarry palette, near-square corners, and a condensed grotesk that behaves like engraving.
LITHOS sells limestone, travertine, concrete and marble in the south of France, and the brief was one line: la matière, racontée avec soin. The material, told with care.
The whole design system is a quarry palette — calcaire, sable, pierre, laiton, terracotta, espresso — governed by a strict 70/20/10 rule: seventy percent limestone and sand, twenty espresso, ten terracotta. Corners are almost square at 2px, because stone does not have a border radius.
The catalogue is entered three ways: by effect, by space, and by moodboard, mirroring how an architect actually specifies.
- Client
- LITHOS
- Year
- 2026
- Discipline
- Web design
- Stack
- React · TanStack Start · Tailwind v4 · Motion · Supabase · Vercel
Live build
Desktop & mobile
Both frames below are the real deployed site, running live. Scroll inside them.
- 01
Desktop runs a three-up material grid with a persistent filter rail.
- 02
Tablet drops to two-up and moves filters into a sticky bar under the header.
- 03
Mobile becomes a single column with the moodboards as a swipeable carousel.
Design system
Palette & type
Calcaire
#E9E4DC
Page ground (70%)
Sable
#DCD2C2
Secondary surface
Pierre
#B3A998
Muted
Laiton
#A88547
Focus / ring
Terracotta
#B7623F
Accent (10%)
Espresso
#302B22
Ink (20%)
- DisplayBritneyA high-contrast display face for section titles, used sparingly and always in sentence case French.
- Body & interfaceArchivo NarrowCondensed by default so long French specification copy holds a comfortable measure.
Motion
How it moves
- 01
Ease matière
A shared cubic-bezier(.22, 1, .36, 1) token — every reveal settles like something heavy being set down.
- 02
Voile gradient
Imagery is veiled with a bottom-up espresso gradient so type always lands on a legible field, no matter the photo.
- 03
Shadow matière
A single deep, wide shadow (0 24px 60px -32px) lifts cards a millimetre off the page instead of casting them into space.
Page architecture
- 01Hero with the material promise and showroom location
- 02Catalogue by effect — limestone, travertine, concrete, marble
- 03Catalogue by space — floors, façades, bathrooms, exteriors
- 04Moodboards as pre-composed material pairings
- 05Bureau d'études — the technical studio offer
- 06Showroom in Aix-en-Provence with visit booking
Next projects
All projects →
