visual-direction-planner

name	visual-direction-planner
description	Define a visual direction for a website or page. Use when Codex needs to shape the look and feel of a site, including mood, typography, spacing, density, hierarchy, style references, and visual consistency.

Visual Direction Planner

Choose a visual language with intent.

Workflow

1. Define the brand or page goal.
2. Define the desired emotional tone.
3. Choose a visual direction that supports that tone.
4. Define typography, spacing, density, and hierarchy.
5. Keep the direction consistent across sections.
6. End with the biggest visual risk to avoid.

Rules

• Match visual style to audience and offer.
• Avoid conflicting visual signals.
• Prefer one coherent direction over mixed styles.
• Keep guidance usable by a designer or developer.

Output expectation

Produce:

• visual direction
• typography direction
• spacing and hierarchy guidance
• style risks to avoid