# Do Not Converge Across Generations

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

> SHOULD: Never converge on common choices. Vary themes (light/dark), fonts (serif/sans/mono), and aesthetics across designs. Avoid using Space Grotesk, Inter, or blue accents on every project. Each design should have a distinct personality.

Vary theme, type, and direction between projects instead of re-running the one look you happen to be good at

A model with no memory reproduces its best-rehearsed look every time, which is how ten different briefs end up with the same dark canvas and the same grotesk. Upstream's counter-move is memory: "Human creators have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes." Keep that note file, read it before you start, and deliberately spend this project on the axis you did not spend last time.

## Bad — do not do this

`aesthetics-design-variety-bad`

```tsx
export function DesignVarietyBad() {
  return (
    <div className="w-full max-w-lg p-4 bg-[var(--ex-variety-bad-bg)] rounded-lg">
      <div className="grid grid-cols-3 gap-4">
        {/* Project Card 1 */}
        <div
          className="p-4 rounded-lg bg-[var(--ex-variety-bad-bg)] border border-[var(--ex-variety-bad-border)]"
        >
          <div
            className="w-full h-16 rounded-md mb-3 bg-[var(--ex-variety-bad-accent)]"
          />
          <h4
            className="text-sm font-medium mb-1 text-[var(--ex-variety-bad-title)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            Analytics Pro
          </h4>
          <p
            className="text-xs text-[var(--ex-variety-bad-body)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            Dashboard tool
          </p>
        </div>

        {/* Project Card 2 */}
        <div
          className="p-4 rounded-lg bg-[var(--ex-variety-bad-bg)] border border-[var(--ex-variety-bad-border)]"
        >
          <div
            className="w-full h-16 rounded-md mb-3 bg-[var(--ex-variety-bad-accent)]"
          />
          <h4
            className="text-sm font-medium mb-1 text-[var(--ex-variety-bad-title)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            CloudSync
          </h4>
          <p
            className="text-xs text-[var(--ex-variety-bad-body)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            Storage solution
          </p>
        </div>

        {/* Project Card 3 */}
        <div
          className="p-4 rounded-lg bg-[var(--ex-variety-bad-bg)] border border-[var(--ex-variety-bad-border)]"
        >
          <div
            className="w-full h-16 rounded-md mb-3 bg-[var(--ex-variety-bad-accent)]"
          />
          <h4
            className="text-sm font-medium mb-1 text-[var(--ex-variety-bad-title)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            TaskFlow
          </h4>
          <p
            className="text-xs text-[var(--ex-variety-bad-body)]"
            style={{ fontFamily: 'Inter, system-ui, sans-serif' }}
          >
            Project manager
          </p>
        </div>
      </div>
      <p className="text-xs text-destructive mt-4">
        Three identical cards: same Inter font, same blue accent, same white background, same rounded corners - completely interchangeable
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-design-variety-good`

```tsx
export function DesignVarietyGood() {
  return (
    <div className="w-full max-w-lg">
      <div className="grid grid-cols-3 gap-4">
        {/* Project Card 1 - Dark & Bold */}
        <div
          className="p-4 bg-[var(--ex-variety-good-1-bg)] border border-[var(--ex-variety-good-1-border)]"
        >
          <div
            className="w-full h-16 mb-3 flex items-center justify-center bg-[image:var(--ex-variety-good-1-accent)]"
          >
            <span className="text-white text-2xl font-bold">A</span>
          </div>
          <h4
            className="text-sm font-bold mb-1 text-[var(--ex-variety-good-1-title)]"
            style={{
              fontFamily: "'Space Mono', monospace",
              letterSpacing: '-0.02em',
            }}
          >
            Analytics Pro
          </h4>
          <p
            className="text-xs text-[var(--ex-variety-good-1-body)]"
            style={{ fontFamily: "'Space Mono', monospace" }}
          >
            Raw data power
          </p>
        </div>

        {/* Project Card 2 - Light & Elegant */}
        <div
          className="p-4 rounded-2xl bg-[var(--ex-variety-good-2-bg)] border border-[var(--ex-variety-good-2-border)]"
        >
          <div
            className="w-full h-16 rounded-xl mb-3 flex items-center justify-center bg-[var(--ex-variety-good-2-accent-bg)] border border-[var(--ex-variety-good-2-border)]"
          >
            <span
              style={{
                fontFamily: "'Playfair Display', serif",
                fontSize: '24px',
              }}
              className="text-[var(--ex-variety-good-2-letter)]"
            >
              C
            </span>
          </div>
          <h4
            className="text-sm mb-1 text-[var(--ex-variety-good-2-title)]"
            style={{
              fontFamily: "'Playfair Display', serif",
              fontWeight: 500,
            }}
          >
            CloudSync
          </h4>
          <p
            className="text-xs italic text-[var(--ex-variety-good-2-body)]"
            style={{ fontFamily: "'Source Serif 4', serif" }}
          >
            Refined storage
          </p>
        </div>

        {/* Project Card 3 - Colorful & Playful */}
        <div
          className="p-4 rounded-3xl bg-[image:var(--ex-variety-good-3-bg)] border-2 border-[var(--ex-variety-good-3-border)]"
        >
          <div
            className="w-full h-16 rounded-2xl mb-3 flex items-center justify-center bg-[var(--ex-variety-good-3-accent-bg)] shadow-[var(--ex-variety-good-3-accent-shadow)]"
          >
            <span
              style={{
                fontSize: '24px',
                fontWeight: 800,
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
              }}
              className="bg-clip-text text-transparent bg-[image:var(--ex-variety-good-3-letter)]"
            >
              T
            </span>
          </div>
          <h4
            className="text-sm font-extrabold mb-1 text-[var(--ex-variety-good-3-title)]"
            style={{
              fontFamily: "'Nunito', sans-serif",
            }}
          >
            TaskFlow
          </h4>
          <p
            className="text-xs font-medium text-[var(--ex-variety-good-3-body)]"
            style={{ fontFamily: "'Nunito', sans-serif" }}
          >
            Joyful productivity
          </p>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Three distinct personalities: dark/bold, light/elegant, colorful/playful - each memorable and differentiated
      </p>
    </div>
  );
}
```

## References

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