# Field Notes - DESIGN.md
> Organic, grounded warmth for growers and makers.

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: earthy, honest, sustainable, handmade, calm
- Built for: farm, agriculture, garden, florist, organic brand, nonprofit, outdoor, veterinarian, veterinary, vet clinic

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#F6F3EA` | undyed linen background |
| ink | `#2E3326` | deep moss text |
| accent | `#7C9A5C` | leaf green CTAs and highlights |
| support | `#885D32` | soil brown for secondary accents and tags |
| wash | `#ECE6D6` | panel and band fills |

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: **Epilogue** (700 with -0.02em tracking)
- Body: **Epilogue**
- Scale: Display clamp(2.25rem, 5vw, 3.75rem); body 1.0625rem/1.75
- Notes: Single family. The organic feel comes from texture and color, not novelty fonts. Small-caps soil labels for categories.
- Import: `https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Epilogue:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Organic dividers: section edges use a gentle SVG curve (not the cliche wave, a single asymmetric swell)
- Texture: subtle paper-fiber background tile at 4% opacity over the linen base
- Story-first structure: 'how it grows / who grows it / get it' narrative flow with alternating image-text
- Hand-drawn-style SVG leaf accents (thin moss strokes) anchoring section corners, two per page max

## The hero
Linen field, left-aligned Epilogue headline, a thin soil-colored eyebrow ('FAMILY GROWN · SIGATOKA VALLEY' energy), leaf-green CTA. Right: arched-top photo (border-radius 50% 50% 0 0 / 30% 30% 0 0) of produce or hands in soil, the arch is the signature shape, reuse it on cards.

## Imagery
Natural daylight, soil, hands, texture macro shots. Grade warm-green. The arch crop motif repeats on all section images.

## Components
- **Buttons:** Soft 12px radius, leaf fill, linen text; hover deepens leaf; secondary is moss outline; never more than two buttons per viewport
- **Cards:** Arch-top images, wash fill below, 16px radius bottom corners only; product price in soil small caps
- **Nav:** Linen bar, moss links, leaf CTA; mobile menu slides as a wash sheet with the arch motif on top edge

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

## Never do (this direction's anti-patterns)
- No neon greens, leaf green stays under 65% saturation
- One curve style only, mixing waves and arches reads chaotic
- No 'eco' cliche icons (globe with leaf), photography carries the values
- No script fonts on 'handmade'

## 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 "Field Notes" 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.