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.

Meta

• License: MIT AND Apache-2.0
• License Provenance: legacy-backfill

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.

Meta

• License: MIT AND Apache-2.0
• License Provenance: legacy-backfill

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.

Relations

related: [@community/principle-ui-differentiation-memorability, @community/principle-subtle-conceptual-reference, @community/rule-vary-aesthetic-per-generation, @community/anti-pattern-ai-slop-aesthetics, @community/example-vercel-hero-gradient, @community/example-nytmag-feature, @community/principle-design-philosophy-before-canvas]

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.