composition-and-visual-flow

name	composition-and-visual-flow
description	Use when arranging elements on a page. Strong composition guides the eye through intentional flow. Z-pattern and F-pattern are useful starting points.

Composition and Visual Flow

Composition controls reading order. Use F-pattern (Western reading flow) for content, Z-pattern for marketing pages, asymmetric for editorial.

F-pattern flow

Reader's eye on content page:

1. Top-left (where headline is)
2. Top-right (look across heading)
3. Down to next paragraph (skip past hero)
4. Down again

Place key info top-left and top-of-section.

Z-pattern flow

Marketing page flow:

1. Top-left (brand identity)
2. Top-right (nav, secondary CTA)
3. Center diagonal (hero headline)
4. Bottom-left (more info)
5. Bottom-right (primary CTA, conversion)

Asymmetric editorial flow

Editorial composition:

• Top-left: brand + sigil
• Center-right: large image
• Bottom-left: body intro
• Right: pull-quote
• Bottom: CTA

Intentional left-right alternation keeps eye moving.

Where this fits in the X3 empire

Composition rules for CardPrepAI hero + section design.