# Harvest Table - DESIGN.md
> Appetite-first warmth for places that feed people.

A Standout direction system. Drop this file into your AI tool's context (Cursor rules, CLAUDE.md, a system prompt) and build every page inside it. One direction per project; consistency is the point.

## Base
- Mode: light
- Feels like: warm, appetizing, rustic-modern, inviting, local
- Built for: restaurant, cafe, bakery, farm, food brand, catering, market, bistro, food truck, pizzeria

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#FFF9F0` | cream background |
| ink | `#2D241B` | dark roast text |
| accent | `#C24B2E` | paprika for CTAs and price highlights |
| support | `#5F7146` | olive for tags, dietary labels, accents |
| wash | `#F6EDDD` | menu cards and alternating bands |

One accent, used sparingly: CTAs, one highlighted word, active states. Never the purple-blue AI gradient. Body text keeps 4.5:1 contrast against its real background.

## Typography
- Display: **Lora** (600, normal tracking, warm and readable)
- Body: **Karla**
- Scale: Display clamp(2.25rem, 5vw, 3.75rem); body 1.0625rem/1.7
- Notes: Menu item names in Lora 600, prices in Karla mono-spaced feel with paprika. Handwritten accents banned, use italic Lora instead.
- Import: `https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Karla:wght@300;400;500;600&display=swap`

Maximum two families. Gradient-filled headline text is banned.

## Layout DNA
- Food photography is the layout: full-bleed image bands between content sections
- Menu as a typographic table: dotted leader lines between item and price, two columns desktop
- Sticky reservation/order bar appears after first scroll on mobile
- Hours and location repeated twice: hero adjacent and pre-footer, locals look for these

## The hero
60/40 split. Left: cream field, Lora headline ('Wood-fired everything' energy), hours + location line in Karla with olive icons, paprika CTA 'Book a table'. Right: full-bleed dish photo, warm graded, slight steam/life. Mobile stacks photo first.

## Imagery
Overhead and 45-degree dish shots, natural window light, warm grade, real plates with imperfection. Show hands serving and tables full. Never sterile white-background product shots.

## Components
- **Buttons:** Soft rectangle 10px radius, paprika fill, cream text; hover deepens to #A93D24; secondary is olive outline
- **Cards:** Menu cards on wash, 14px radius, no borders; dish photo top with 4:3 crop; price chip paprika top-right
- **Nav:** Cream bar, roast links; 'Book' button always visible right; phone number shown plainly on desktop

## Motion
- Recipes that fit this direction: fade-rise-stagger, parallax-drift, image-reveal-wipe, marquee-soft, blur-up-settle, clip-image-bloom, horizontal-rail
- Animate transform and opacity only; honor prefers-reduced-motion; one ambient motion per viewport, maximum.

## Never do (this direction's anti-patterns)
- No dark moody hero unless the venue is genuinely fine dining
- No script 'fancy' fonts for the menu
- No carousel-only menus, menus must be scannable text
- Never hide hours/location behind a click

## Never do (any direction)
- The centered-hero-centered-everything layout. Left-align or split asymmetric.
- The three-equal-cards feature row.
- h-screen heroes (use min-h-[100dvh]).
- Pure #000 backgrounds; off-blacks only.
- Slop copy: Elevate, Unleash, Seamless, Supercharge, Next-Gen, Revolutionize.
- Fake proof: no 99.9%, no John Doe, no invented stats.

---

## This file is the taste. The working parts are live.
DESIGN.md is roughly a tenth of the "Harvest Table" direction. Behind the Standout MCP connect, your agent also gets: finished art-directed section code, interactive set pieces, the WebGL motion layer, the cinematic showpiece tier (scene-led pages with generation prompts), per-business seeding so two sites in one direction never match, and critique_design - a critic that renders your page and scores it before you ship.

Connect in one config entry: https://standoutmcp.io - free trial key, 25 tool calls, no card. Then just tell your agent what you're building.