Frontend Design Visual Direction Art Direction

---
id: frontend.design.visual-direction-art-direction
name: Visual Direction and Art Direction
description: Define coherent visual rules for interface typography, imagery, shape, density, contrast, and motion from product intent.
stack:
  - Frontend
  - Visual Design
category: design
status: stable
version: 0.10.0
owner: NgAutoPilot
triggers:
  - visual direction
  - art direction UI
  - brand expression
  - interface identity
---

# Visual Direction and Art Direction

## Purpose

Create implementable visual direction that remains coherent for forms, tables, errors, and long content.

## When to Use

- Product identity is weak or teams produce inconsistent feature surfaces.
- A technically sound interface lacks clear, domain-appropriate expression.

## Do

- Define three direction adjectives, three anti-adjectives, useful tension pairs, and limited visual grammar.
- Specify rules for typography, shape, color, imagery, iconography, data visualization, motion, and exceptions.
- Validate direction on navigation, forms, data, and feedback states.

## Do Not

- Do not define direction through color alone, mix unrelated metaphors, or copy reference surface treatment.
- Do not use shadows or gradients as the only hierarchy mechanism.

## Review Checklist

- [ ] Direction is implementable through tokens and components.
- [ ] Dense and feedback surfaces share the same grammar.
- [ ] Typography, density, and contrast suit real content.

## Expected Output

1. Visual thesis and art-direction rules.
2. Reference analysis and component fingerprint.
3. Do/don't examples and owned exceptions.

## References

- [Design Excellence Guide](../../../../docs/design-excellence-guide.md)