Uncle Tibo

The setting

299 Kirkdale, Sydenham. A new neighbourhood spot opening as both a morning coffee house and an evening wood-fired pizzeria — two halves of one room, one brand.

The brief from the owners started small and real: a single-page site that looks like them, not a template. Warm. Community-first. Ember-red accent that nods to the wood-fire without leaning on the red-gingham Italian-restaurant cliché.

Then the job became more useful. Pizza service needed bookings, but not a generic form that overfills the room or leaves staff stitching things together from an inbox. The booking flow had to understand the actual service: Wednesday to Saturday, 5–10pm, thirty-minute slots, table capacity, customer confirmations and a simple staff view for the night.

"Coffee, pizza, and the people you love."

Constraints

• Launch-day budget — low ongoing costs, no heavyweight booking platform.
• One location, two services — the site has to switch registers (coffee by day, pizza by night) without feeling like two sites.
• Mobile-first — most Sydenham locals will hit the site on a phone.
• Local SEO from day one — "coffee Sydenham", "pizza SE26" — uncontested terms worth claiming.
• Bookings that respect the room — no slot should be offered unless the table layout can actually seat it.

Research before pixels

The same report pack I run on every build:

• Brand extraction — palette (warm white, cream, ember red #C84B31, charcoal), Playfair Display for headings, Inter for body. Tone pulled from the owners' previous projects: tricolon phrases, "big love" sign-offs, people-first language.
• Competitor analysis — benchmarked 10 London coffee-and-pizza sites. Pizza Pilgrims and Yard Sale at the top; most SE26 independents sit under 4/10. The gap is the opportunity.
• Niche & SEO report — mapped Sydenham-specific search terms with low competition and high local intent.
• Build brief — locked single-page architecture, section order, CTA strategy, photography direction.
• Quality audit — accessibility, performance and SEO baseline before launch.

What shipped

Single-page site: Hero → Tagline marquee → About → Coffee → Pizza → Hours & Location → Gallery → Community → Newsletter → Footer. Ten sections reading as one long scroll.

Then a live booking system layered on top:

• Customer flow — pick a date, party size and sitting; leave details; receive confirmation and a manage/cancel link.
• Availability API — checks the chosen date and party size against the real table set before exposing slots.
• Staff dashboard — day view with floor plan, bookings list, table assignment, cancellation and staff-created bookings.
• Operational rules — pizza service only Wednesday to Saturday, 5:00–9:30 sittings, and a two-hour same-day cutoff.

Three opinionated decisions

• Vanilla frontend, small backend. The public site stays simple. The booking system adds a tiny Express + SQLite backend where live availability and booking records actually matter.
• Playfair Display paired with Inter. Serif for the editorial moments (hero, section headers), Inter for everything else. Two fonts. Hard limit.
• Ember red as the only accent. #C84B31, used sparingly — CTAs, marquee stroke, hover states. Everything else is warm white, cream and charcoal. The colour does the work of the wood-fire without needing to show the oven in every photo.

uncle-tibo@main:~$ tree --essentials
├── public/
│   ├── book.html       # customer booking flow
│   ├── dashboard.html  # staff day view
│   └── components/     # booking wizard + dashboard UI
├── server/
│   ├── index.js        # Express routes + service rules
│   ├── db.js           # SQLite schema + queries
│   └── email.js        # confirmation/cancellation emails
└── data/bookings.db    # created on first run

What shaped the build

• The section order is the conversion strategy. Hero hooks with place, tagline marquee stamps the brand, About tells the story, then coffee and pizza split by time-of-day, then the practical info (hours, location) once you're already interested.
• Motion is restrained. Hero text fades up, sections reveal on scroll, marquee ticks along — nothing loud. prefers-reduced-motion respected throughout.
• FoodEstablishment schema in <head> for local SEO — address, hours and cuisine machine-readable from day one.
• The booking logic is deliberately small. A smallest-fit table check prevents impossible bookings without forcing Uncle Tibo into a bulky restaurant SaaS platform.

Handover

Site shipped to uncletibo.com with a coming-soon page live for pre-launch, and the full site flipping in on opening day.

The booking system turns that website into a working service tool. Customers do not have to message and wait. Staff can see the night, assign tables and manage bookings without turning the inbox into the booking book.

Accessibility baseline (WCAG AA colour contrast, keyboard-reachable interactive elements, prefers-reduced-motion), SEO baseline (semantic headings, alt text, schema, sitemap, Open Graph), performance baseline (lazy-loaded images, deferred scripts, no layout shift).

What's next

• Swap the console mailer for live Resend/Postmark confirmation emails.
• Seasonal menu refreshes — the site is set up so the coffee and pizza section copy rotates without touching markup.
• Google Business Profile claim and Instagram cross-linking for the local SEO stack.