visual-story-direction

name	visual-story-direction
description	Use when a landing page, portfolio, product story, or editorial site lacks a clear visual premise, hierarchy, material direction, or meaningful critique target.

Visual Story Direction

Before proposing libraries or effects, decide what a visitor must understand and feel in the first viewport. A visual system needs a premise, not a pile of components.

1. State audience, one-sentence promise, desired first impression, and dominant contrast.
2. Turn that into hierarchy, type scale/density, material, whitespace, and one interaction or motion job.
3. Build or inspect a real browser view.
4. Repair the single weakest visible problem before adding another feature.

Avoid generic bento layouts, decorative gradients, stock “cinematic” effects, and animation before a page has a story. A restrained page is valid when restraint supports the premise.

Use ../../references/visual-direction.md for the critique grid and ../../templates/motion-brief.md only when motion has an actual purpose.