# Coastal Film - DESIGN.md
> Warm 35mm nostalgia for businesses near the water.

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, organic, nostalgic, sun-soaked, relaxed
- Built for: tourism, resort, dive shop, surf, boat charter, island travel, beach restaurant, marina, kayak, snorkel

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#FAF6EF` | page background, warm paper white, never pure white |
| ink | `#1F2421` | headings and body, a green-leaning off-black |
| accent | `#C96F4A` | terracotta for CTAs and key highlights only |
| support | `#657369` | muted eucalyptus for tags, captions, secondary UI |
| wash | `#E8DECF` | section alternation and card fills, sand tone |

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: **Fraunces** (600, optical size high, slight negative tracking)
- Body: **Work Sans**
- Scale: Display clamp(2.5rem, 6vw, 4.5rem); body 1.0625rem/1.7
- Notes: Serif display gives the editorial-travel feel; keep body humanist and light. Italic Fraunces for pull-quotes only.
- Import: `https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Work+Sans:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Asymmetric split hero: copy left 55%, full-bleed photo right 45% with a soft gradient fade into the paper background
- Section rhythm alternates paper and sand washes, separated by generous py-24+
- Photos break the grid: one image per page should overhang its container by 2-3rem
- Captions in small caps eucalyptus, letter-spacing 0.08em, beside imagery not under it

## The hero
Left-aligned headline over paper, one terracotta underline stroke (SVG, hand-drawn feel) under the key word. Right side: edge-to-edge photo with film grain overlay and a fade-left mask. No dark overlays on photos.

## Imagery
Real photos with warm grade: lift blacks slightly, +10 warmth, visible grain. Never stocky smiling-at-camera shots; favour environmental, sun-flare, hands-doing-things.

## Components
- **Buttons:** Pill, terracotta fill, ink text? no: cream text #FAF6EF; hover lifts -1px with a tinted shadow rgba(201,111,74,.25); active scale .98
- **Cards:** No borders. Sand wash fill, 1.25rem radius, photo bleeding to card edge on top, content padded 1.5rem. Shadow only on hover, tinted warm
- **Nav:** Transparent over hero, ink links, terracotta dot indicator for active page; collapses to a cream sheet on mobile

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

## Never do (this direction's anti-patterns)
- No dark overlay + centered white text hero (the #1 tourism cliche)
- No pure white background, it kills the film warmth
- No blue CTAs, blue fights the warm grade
- No three-equal-cards feature row

## 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 "Coastal Film" 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.