# Ink & Paper - DESIGN.md
> Retro-print charm with modern bones.

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: playful, crafted, retro, characterful, friendly
- Built for: coffee roaster, brewery, barber, record shop, creative studio, stationery, indie brand, tattoo, vinyl, zine

## Colors (locked - use ONLY these)
| Role | Hex | Use |
|---|---|---|
| base | `#F7F1E1` | aged paper background |
| ink | `#22356F` | print navy, the main 'ink' for text AND illustration |
| accent | `#D9442C` | letterpress red for CTAs and stamps |
| support | `#E9B44C` | mustard for badges and tertiary accents |
| wash | `#EFE6CF` | panel 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: **Bricolage Grotesque** (700, tight, slightly condensed energy)
- Body: **Public Sans**
- Scale: Display clamp(2.5rem, 6vw, 4.25rem); body 1rem/1.65
- Notes: Pair with 'Spline Sans Mono' for labels and badges. Star, asterisk and arrow dingbats as typographic ornaments in red.
- Import: `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Public+Sans:wght@300;400;500;600&display=swap`

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

## Layout DNA
- Print-shop ornaments: asterisks, daggers, pointing hands (typographic, not emoji) as section markers in red
- Badge/stamp motif: circular SVG text-on-path badges ('EST. 2019', 'SMALL BATCH') rotated -12deg, one per section max
- Borders are doubled: 2px ink outer + 1px gap + 1px ink inner, like vintage tickets
- Slight rotation on cards (-1deg to 1.5deg alternating) for the hand-placed feel

## The hero
Paper field with a thin double-rule frame inset 16px around the entire viewport. Headline center-left in Bricolage with a red asterisk lead-in, a rotated mustard stamp badge overlapping the headline corner, red CTA shaped like a ticket (notched corners via clip-path).

## Imagery
Two modes: navy duotone photos, or simple line illustrations in ink color. Mixing both is the charm. Grain overlay at 8% on everything.

## Components
- **Buttons:** Ticket-shaped (clip-path notched corners), red fill paper text; hover offsets a navy hard shadow 3px,3px; mono uppercase labels
- **Cards:** Paper wash, double-rule border, slight alternating rotation, badge in corner; hover straightens rotation to 0 with a spring feel
- **Nav:** Top double-rule frame edge, logo as a stamp, mono links; cart/CTA in red ticket shape

## Motion
- Recipes that fit this direction: stamp-in, fade-rise-stagger, marquee-soft, wiggle-hover, char-cascade, 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 gradients at all, print has no gradients
- Maximum one stamp/badge per viewport, restraint sells the gag
- No pure black ink, navy IS the black here
- No emojis ever, dingbats are typographic

## 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 "Ink & Paper" 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.