UnexpectedSpatialComposition [principle] v1.0.0

Use unexpected spatial arrangements — asymmetry, overlap, diagonal flow, or grid-breaking elements — to avoid predictable layouts that blend into the statistical mean of AI-generated UI.

Attributed To

Anthropic Frontend Design Skill

Applies To

• frontend-design
• landing page layout
• hero section composition
• section-level layout decisions

UnexpectedSpatialComposition [principle] v1.0.0

Use unexpected spatial arrangements — asymmetry, overlap, diagonal flow, or grid-breaking elements — to avoid predictable layouts that blend into the statistical mean of AI-generated UI.

Attributed To

Anthropic Frontend Design Skill

Applies To

• frontend-design
• landing page layout
• hero section composition
• section-level layout decisions

Examples

• Hero: large typographic block on the left anchoring 60% of width, small illustration bleeding off the right edge — not centered.
• Features section: one feature card twice the size of the others, offset from the grid baseline.
• Overlap: a floating testimonial card that partially overlaps the product screenshot below it — intentional layering.
• Diagonal: a section background that transitions at 3deg clip-path instead of a horizontal line.
• Bad: symmetric 3-column equal-height cards, centered headline, centered CTA — indistinguishable from every other SaaS landing page.

Rationale

Expected symmetric grid layouts are the default output of AI design tools. Spatial surprise signals genuine design intent, creates visual tension that holds the eye, and gives the UI a point of view. Asymmetry does not mean chaos — it means deliberate, controlled imbalance.