Café de Spuyt
A brown café's website, redesigned as a dimly lit room where light only falls on what matters.
- Client
- Café de Spuyt
- Role
- Design & development
- Timeline
- 2026
- Stack
- Astro
- Tailwind CSS 4
- Design system
- Web Components
- 01px borders used for sectioning
- 1long page that reads like a menu card
- 2hidden easter eggs
The brief
Café de Spuyt is a beer café in Amsterdam. This is a redesign of its website that tries to feel like the place itself: intimate, a little worn, and unapologetically bold. It has not been released.
A design system first
Before writing markup I wrote the rules down. The system is called The Nocturnal Brasserie, after Amsterdam’s brown cafés, and it treats the screen as a dimly lit interior rather than a page.
- Colour as chiaroscuro. A bitter-chocolate brown base, cream instead of white for text, cinnabar red for the moments that matter and an aged gold for accents.
- The no-line rule. Solid 1px borders are banned for sectioning. Boundaries come from shifts between surface tones and from generous vertical space.
- Tonal elevation. Cards sit on slightly lighter or darker surfaces to suggest lift, the way light reflects off dark wood, rather than relying on drop shadows.
- Editorial tension. Poster-scale grotesque headlines sit right next to small serif body text, on purpose.
The site
A single long page that reads like a menu card: the café’s (questionable) history, the beer list by style, staff picks, a survival guide to café Dutch, practical things to know, and the house rules. The copy is half Dutch, half English and does not take itself seriously — the shopping basket opens a dialog admitting nobody knows why it is there, and the reservations link explains that you just walk in.
Small pleasures
Two easter eggs are built as self-contained web components so they can be dropped into any layout: a drunk mode that gently sways and blurs the page until you sober up, and an idle screensaver with the café logo bouncing around the screen, changing colour on every wall hit.
Status
The site is built and working, but has not been released yet.
Try it
The idle screensaver
On the café site this starts by itself after a minute without input. Here it stays inside its frame, and you start it yourself.
Wall hits: 0 · Corner hits: 0Click the stage or press Esc to stop.
Gallery
A closer look
De Historie — editorial serif copy against a tonal surface 
The beer menu, separated by surface tone instead of lines 
A survival guide to what to say in Dutch 
Things you should know before your second beer 
Essential café Dutch and the rules of the house