Skip to content
Fredrin

Restaurant

Harvest

Olive-and-cream restaurant site where the food photography carries the room.

Warm cream, deep olive and full-bleed food photography — an unhurried site whose only real job is to make you book a table.

Best for
Restaurants, wine bars, bakeries and anywhere people book a table.
Type
"Playfair Display", "Iowan Old Style", Georgia, serifSerif display at 400 weight, set large and calm — 56px hero, 32px section titles. Menu items in 17px sans with the dish name at 500 and the description at 15px muted. Prices align right on a dotted leader.
Palette
Background #F6F1E7Surface #FFFDF8Ink #22271CMuted #6A705EAccent #4F6B3ABorder #E1DAC9
Page structure
  1. Slim header: the restaurant name in serif centred, hours left, a 'Book a table' olive button right.
  2. Full-bleed hero photograph with the name, a one-line description of the kitchen, and the neighbourhood, overlaid bottom-left with a soft dark scrim.
  3. Welcome: two centred paragraphs at 20px with a serif heading and wide margins.
  4. Menu: three tabs (Lunch, Dinner, Wine), each a left-aligned list of courses with dish names, descriptions, allergen marks and prices on dotted leaders.
  5. A three-photo band at unequal widths — a dish, the room, and the chef — with no captions.
  6. Private dining: a two-column split with a photo and a short paragraph plus an enquiry link.
  7. Reviews: two press quotes in serif italic with the publication name beneath.
  8. Visit: address, hours by day in a two-column table, a transit line, and a CSS-drawn map placeholder.
  9. Booking band: a date, time and party-size row with a 'Find a table' button.
  10. Footer: contact, socials, gift cards and accessibility information.
Tags
hospitality · warm · photography · serif

The creation prompt

641 words, self-contained — paste it into a chat session with your coding agent and it builds Harvest end to end.

Build a restaurant website using the "Harvest" theme — Olive-and-cream restaurant site where the food photography carries the room.

## Art direction
Warm, seasonal and quiet. Cream paper background, olive for anything actionable, and photography that runs full-bleed with no border or radius. Type is generous and centred in the hero sections; the menu switches to a strict left-aligned list because that is how a menu is read. One booking CTA follows the page as a bottom bar on mobile.

## Colour palette (use these exact values)
- Background: #F6F1E7
- Surface / cards: #FFFDF8
- Primary text: #22271C
- Secondary text: #6A705E
- Accent (buttons, links, active state): #4F6B3A
- Text on accent: #FFFFFF
- Borders / dividers: #E1DAC9
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Playfair Display", "Iowan Old Style", Georgia, serif
- Body: "Inter", system-ui, sans-serif
- Serif display at 400 weight, set large and calm — 56px hero, 32px section titles. Menu items in 17px sans with the dish name at 500 and the description at 15px muted. Prices align right on a dotted leader.

## Page structure
1. Slim header: the restaurant name in serif centred, hours left, a 'Book a table' olive button right.
2. Full-bleed hero photograph with the name, a one-line description of the kitchen, and the neighbourhood, overlaid bottom-left with a soft dark scrim.
3. Welcome: two centred paragraphs at 20px with a serif heading and wide margins.
4. Menu: three tabs (Lunch, Dinner, Wine), each a left-aligned list of courses with dish names, descriptions, allergen marks and prices on dotted leaders.
5. A three-photo band at unequal widths — a dish, the room, and the chef — with no captions.
6. Private dining: a two-column split with a photo and a short paragraph plus an enquiry link.
7. Reviews: two press quotes in serif italic with the publication name beneath.
8. Visit: address, hours by day in a two-column table, a transit line, and a CSS-drawn map placeholder.
9. Booking band: a date, time and party-size row with a 'Find a table' button.
10. Footer: contact, socials, gift cards and accessibility information.

## Components and detailing
Buttons are 46px olive pills with white type; secondary actions are olive text with a 1px underline. Photographs are square or 3:2, never rounded, and always at full container width. The menu list uses a dotted leader between the dish name and price. Tabs are underlined text, not pills. The mobile booking bar is a fixed cream strip with a hairline top border.

## Motion
Slow fades only: 400ms on photo entrance, 200ms on tab change. No zoom on food images — cropping and light do the work. The mobile booking bar slides up once, after the hero leaves the viewport.

## Copy and imagery
Write like the chef talking, not a marketer: name the producers, the region and the season. Menus must show real dishes and real prices, with allergen marks. Every page needs the address, the hours and the booking link within one screen of the top.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.

Pasting the prompt is step one. Fredrin runs the agent that builds it, one ticket per look.