Work AI Lab Craft About Contact

← Back to AI Lab

Restaurant · 2026

Trattoria Fiori

A family kitchen in San Gimignano, imagined from scratch.

View live demoFictional experiment · self-brief

Trattoria Fiori is a fictional Tuscan restaurant I designed and built end-to-end as a personal exercise.

The design language borrows from fine-dining editorial — Playfair Display and Cormorant Garamond over a noir + brushed-gold + ivoire palette, dish photography treated as painterly plates rather than product shots, and micro-typography for the menu (dotted leaders, lining figures, italic wine notes) that would look at home on a printed carte.

The build is a single self-contained page of hand-written HTML, CSS, and vanilla JS: view-transitions between sections, a lightbox-based reservation flow with a mock auth (Google + email), a "My space" client area with cancel confirmation, and a hero parallax that respects reduced-motion. No frameworks, no CMS — the constraint was to see how far a single-file mini-site could be pushed with AI as the sparring partner.

Under the hood

Design system

Palette

Noir

#0F0E0C

Canvas · nav · deep backgrounds

Brushed gold

#B08D4B

Accents · dividers · CTA hover

Ivoire

#F5F0E5

Light surfaces · text on noir

Sang

#8B0000

Destructive intent · cancel confirm

Typography

Tagliatelle al tartufo

Playfair Display

400 · 500 · 600 · 700 · 800

Display · headings · dish names

Chianti Classico, 2019 — cherry, tobacco

Cormorant Garamond

300 · 400 · 500 italic

Wine notes · ambient italics

Reserve a table — 8:30 pm

Inter

300 · 400 · 500 · 600

UI · form fields · buttons

Micro-typography

Dotted leaders bridging dish name and price
Lining figures across the whole menu for column alignment
Italic wine descriptors, never bold
All-caps eyebrows with wide tracking as section anchors

Interactions

Four lightbox modals — Reserve, Auth, My Space, Cancel confirm
Mock auth flow — Continue with Google or email, no password
Client area persists reservations per account in localStorage
Hero parallax honoring prefers-reduced-motion
Cross-page nav lock kills the transitional flash between Home and Menu

Constraints

Single self-contained HTML file per page — no framework, no bundler
Vanilla JS only — DOM APIs, event delegation, no dependencies
localStorage as the only backend — tf_account and tf_reservations
Progressive enhancement — the menu and story read fine without JS

Trattoria Fiori — screenshot 1

Trattoria Fiori — screenshot 2

Trattoria Fiori — screenshot 3

Trattoria Fiori — screenshot 4

Trattoria Fiori — screenshot 5

Trattoria Fiori — screenshot 6

Open the live demo