make-of · saffron

A restaurant site a real business would pay for

Saffron is the plain-craft proof: no generative fireworks, just a warm, appetising, commercial-grade site for a modern Indian restaurant — a seasonal menu, a hand-drawn map, and a reservation form that is honest about being a demo.

What it demonstrates

That the same care behind the flashier sites makes an ordinary business site quietly excellent. Real food photography carries honest alt text; the menu keeps one consistent price format; the map is drawn by hand in SVG instead of embedding a third-party widget; and the booking form never pretends to do something it doesn't. It is designed to look like a real restaurant's site while telling the truth about being a demonstration.

The techniques, honestly named

• Cormorant & Jost pairing — a high-contrast serif for the name, headlines and dish names against a modern geometric sans for body, navigation and prices; elegant without being stuffy.
• Two-layer hero gradient — a full-bleed food photo with a left-to-right wash for text contrast plus a bottom fade, so the headline stays legible over a bright, busy image.
• Honest food photography — Unsplash stock with alt text describing what is actually in each frame, and a footer line stating the restaurant is fictional and the photos are stock.
• Seasonal menu, one price format — courses in Cormorant with a small "VEG" tag, descriptions in muted brown, and every price a dollar sign and whole number ($12) aligned to the right.
• Hand-drawn SVG map — a river, a park, a street grid and a saffron map-pin, all hand-built as SVG with a role="img" label — no map tiles, no tracker, no API key.
• Demo reservation form — labelled controls and an honest banner; on submit it preventDefaults and shows an aria-live message instead of sending anything.
• Reduced-motion-safe reveals — sections fade in on scroll only when motion is allowed; the hidden state exists solely under an anim class, so reduced-motion and no-JS visitors see everything immediately.

Recreate it