# Match Complexity to the Vision

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

> SHOULD: Match implementation complexity to aesthetic vision. Minimalist designs need restrained styling (single shadows, solid colors, clean borders). Maximalist designs can layer effects, gradients, and animations. Mismatch creates cognitive dissonance—a simple note card with layered shadows, blurs, and glowing buttons signals importance the content does not warrant.

Maximalist directions need elaborate execution; minimal directions need precision — the failure is mismatch, not amount

There is no universal "right amount" of visual complexity. The problem is mismatch: applying maximalist techniques to minimal content creates cognitive dissonance. A simple note card with layered shadows, a gradient background, blur, and a glowing button is claiming an importance the content does not have. Conversely, a maximalist direction executed with half-effort just looks broken. Elegance is not minimalism — it is executing whichever vision you chose, all the way.

## Bad — do not do this

`aesthetics-complexity-matching-bad`

```tsx
export function ComplexityMatchingBad() {
  return (
    <div className="w-full max-w-md">
      {/* Intentionally light-themed card demonstrating over-designed aesthetics */}
      <div
        className="p-6 rounded-xl relative overflow-hidden bg-[image:var(--ex-complex-bad-bg)] border border-[var(--ex-complex-bad-border)] shadow-[var(--ex-complex-bad-shadow)]"
      >
        {/* Excessive blur effect */}
        <div
          className="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-[image:var(--ex-complex-bad-blob-1)] blur-[30px]"
        />
        <div
          className="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-[image:var(--ex-complex-bad-blob-2)] blur-[25px]"
        />

        <div className="relative z-10">
          <span
            className="inline-block text-xs font-medium tracking-wider uppercase mb-3 px-2 py-1 rounded-full bg-[image:var(--ex-complex-bad-tag-bg)] text-[var(--ex-complex-bad-tag-text)]"
          >
            Simple Note
          </span>
          <h3
            className="text-lg font-medium mb-2 text-[var(--ex-complex-bad-title)]"
            style={{ textShadow: 'var(--ex-complex-bad-title-shadow)' }}
          >
            Meeting reminder
          </h3>
          <p
            className="text-sm mb-4 text-[var(--ex-complex-bad-body)]"
            style={{ lineHeight: '1.6' }}
          >
            Team standup at 10:00 AM
          </p>
          <button
            className="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 bg-[image:var(--ex-complex-bad-button-bg)] text-[var(--ex-complex-bad-button-text)] shadow-[var(--ex-complex-bad-button-shadow)]"
          >
            Dismiss
          </button>
        </div>
      </div>
      <p className="text-xs text-destructive mt-4">
        Minimalist content with maximalist styling: layered shadows, gradients, blurs, and glows overwhelm a simple note
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-complexity-matching-good`

```tsx
export function ComplexityMatchingGood() {
  return (
    <div className="w-full max-w-md">
      {/* Intentionally light-themed card demonstrating minimal aesthetics */}
      <div
        className="p-6 rounded-lg bg-[var(--ex-complex-good-bg)] border border-[var(--ex-complex-good-border)] shadow-[var(--ex-complex-good-shadow)]"
      >
        <span
          className="inline-block text-xs font-medium tracking-wider uppercase mb-3 text-[var(--ex-complex-good-tag)]"
        >
          Simple Note
        </span>
        <h3
          className="text-lg font-medium mb-2 text-[var(--ex-complex-good-title)]"
        >
          Meeting reminder
        </h3>
        <p
          className="text-sm mb-4 text-[var(--ex-complex-good-body)]"
          style={{ lineHeight: '1.5' }}
        >
          Team standup at 10:00 AM
        </p>
        <button
          className="px-4 py-2 text-sm font-medium rounded-md bg-[var(--ex-complex-good-button-bg)] text-[var(--ex-complex-good-button-text)]"
        >
          Dismiss
        </button>
      </div>
      <p className="text-xs text-success mt-4">
        Minimal content, minimal styling: clean border, single subtle shadow, restrained typography
      </p>
    </div>
  );
}
```

## References

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