Menu
The restaurant menu as a readable page, not a PDF.
← All work
(Case study) — 10 / 10
Zum Chattenturm
Website for a half-timbered Gasthaus, hotel and restaurant in Wolfhagen, Germany — built 1:1 from Figma as a fast static site with menu, rooms and reservation forms.
(Scope)
Services
What I did
- Built ten pages 1:1 from Figma
- Token-based design system for type, colour and spacing
- Table and room booking forms
- A dev-only overlay tool to diff the build against the design
01Problem
A family-run house with a restaurant, rooms and a rooftop terrace needed one place where guests can read the menu, see the rooms and book a table or a room — in German, on any phone.
02Solution
Ten pages — restaurant, menu, hotel, story, contact and two booking forms — built as plain HTML, CSS and JS on Vite, with no framework to slow it down.
A token-based design system keeps type, colour and spacing in one place, and a fluid layout scales the Figma frames to any screen.
03Challenge
Staying pixel-perfect to the design across breakpoints. I wrote a small dev-only overlay that lays the Figma export over the live page, so every section could be diffed and corrected by eye.
(Key features)
Rooms
Hotel rooms with photos and details.
Booking
Separate table and room reservation forms.
Pixel overlay
Figma exports laid over the live page to check every section.
(Full pages) — scroll to read them
(Mobile) — layouts on small screens
(Stack) — and why
- Vite
Plain HTML, CSS and JS with a fast build.
- Design tokens
Fluid sizes that scale the Figma frames to any screen.
(Summary)
Zum Chattenturm proves a small static site can feel as warm as the house it represents — fast, faithful to the design and easy for the owners to keep current.
