# Design direction

How to write the six-prompt brief that makes every downstream design choice non-generic.

The Design Direction is a six-prompt brief written as a comment at the top of the landing page file, before any JSX ([where it lives](/design/overview#the-direction-block-lives-in-source)). Use this page when first filling it, or when a draft fails the sentence test. Commit to the Direction before choosing patterns, type, or motion.

## The six prompts, explained

### 1. The product — one sentence, what it does for whom

Name the user, activity, and frame — not a tagline or feature list.

* **Bad:** "An AI-powered productivity platform."
* **Good:** "A daily journal for runners that asks one question after every run."

### 2. The one emotion this landing page should evoke

Name a felt moment, not a marketing category.

* **Bad:** "Trust and professionalism."
* **Good:** "Sunday morning, second coffee, nowhere to be."

### 3. The visual metaphor — a concrete real-world image

Choose a photographable image, not software or adjectives. It should imply color, texture, light, type, and motion.

* **Bad:** "Clean and premium."
* **Good:** "A handwritten recipe card on butcher block in morning light."

### 4. Three references from outside this product's own industry

Pick products, magazines, films, books, brands, or objects that share the emotion and metaphor but not the category.

* **Bad for a dev tool:** "Stripe, Linear, Vercel."
* **Good:** "Teenage Engineering TX-6, Swiss railway signage, modular-synth patch cables."

### 5. The one signature visual element this page will have

Choose one memorable element a person could identify in a sentence: torn-paper SVG dividers, a 4.5-second breath circle, a realistic live terminal.

### 6. The hero visual — concretely, what animates on screen

Describe what moves in the first five seconds, not "a mockup with motion." Example: "A three-column Kanban moves one card every two seconds."

## The Style Tile — concrete commitments

Translate the brief into the six one-line Style Tile commitments — color, type pair, theme, art direction, motion personality, voice — picked from the menus in [Style tile](/design/style-tile). Keep them beside the Direction in the source preamble, and scan only the matching menus — don't browse all of them. The per-token cohesion constraints there govern what matches the app (palette, body font, theme) and what may differentiate the landing (heading type, art direction, motion, voice) without making sign-in feel like a different product.

Voice must be **mechanically checkable behavior** — for example, "second-person; max 12 words; never starts with 'we'" — not adjectives. "Friendly" cannot be verified against a sentence; "never starts with 'we'" can.

Finalize the [app theme](/design/product-polish#theme-create-one-for-the-app) first — the landing reads the same theme tokens the app does, and writing one against a placeholder theme means redoing it.

Finish with the [sentence test](/design/overview#the-sentence-test): could this describe any other product? If yes, rewrite.

## If you're stuck

* If the product is unclear, inspect its data model and main flow.
* If the brief describes a category, identify what makes this app unusual.
* Prefer a specific, revisable direction over a generic safe one.