Design direction

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). 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. 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.

Finish with 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.