# Layout Must Be a Choice, Not the Default

**SHOULD** · **ID:** `aesthetics-spatial-composition` · **Category:** aesthetics
**Source:** [Skills](https://skills.sh/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-spatial-composition

> SHOULD: Break predictable symmetric grids with asymmetry, overlap, negative margins, and varied scale. Feature one dominant element at unexpected scale. Use whitespace asymmetrically to create tension.

Test the layout against the brief — if it is the grid you would produce for any similar page, revise it

The symmetric three-column grid is the layout every generator arrives at, for every brief, which is exactly the test upstream proposes: run a similar prompt and see whether you land in the same place. If you do, the layout was not chosen, it was defaulted into. Asymmetry, overlap, varied scale, and diagonal flow are the usual escapes — but they are means, not the point. The point is that the composition should be traceable to something true about this subject.

## Bad — do not do this

`aesthetics-spatial-composition-bad`

```tsx
export function SpatialCompositionBad() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <div className="grid grid-cols-3 gap-4">
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 1
        </div>
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 2
        </div>
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 3
        </div>
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 4
        </div>
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 5
        </div>
        <div className="aspect-square bg-muted rounded flex items-center justify-center text-xs text-muted-foreground">
          Card 6
        </div>
      </div>
      <p className="text-xs text-destructive mt-4">
        Predictable symmetric grid is safe but forgettable
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-spatial-composition-good`

```tsx
export function SpatialCompositionGood() {
  return (
    <div className="w-full max-w-md p-6 bg-card rounded-lg">
      <div className="relative h-48">
        {/* Large featured card */}
        <div
          className="absolute bg-primary/10 border border-primary/20 rounded-lg flex items-center justify-center text-xs text-foreground"
          style={{ top: 0, left: 0, width: '60%', height: '70%' }}
        >
          Featured
        </div>
        {/* Overlapping accent card */}
        <div
          className="absolute bg-accent/20 border border-accent/30 rounded-lg flex items-center justify-center text-xs text-foreground shadow-lg"
          style={{ top: '40%', left: '45%', width: '45%', height: '50%', zIndex: 10 }}
        >
          Highlight
        </div>
        {/* Small offset card */}
        <div
          className="absolute bg-muted rounded-lg flex items-center justify-center text-xs text-muted-foreground"
          style={{ top: '10%', right: 0, width: '30%', height: '35%' }}
        >
          Detail
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Asymmetry, overlap, and varied sizes create visual interest
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [Refactoring UI: Layout](https://www.refactoringui.com/)