# Defaults Are Not Choices

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

> NEVER: Use generic fonts (Inter, Roboto, Arial, system-ui), purple gradients, perfectly centered layouts, excessive border-radius, or sparkle emojis. These are hallmarks of AI-generated slop. Choose distinctive typography, intentional colors, and layouts with asymmetry.

The reflexive AI looks are legitimate only when the brief asks for them — never spend a free axis on one

The diagnostic is not "is this look bad" — cream, near-black-and-acid, and broadsheet are all fine designs for the right subject. The diagnostic is "did the subject produce this, or did the model?" If the same palette and layout would have arrived for a fintech dashboard, a wellness app, and a dev tool alike, it came from the training distribution. Our corpus pins the individual looks: `aesthetics-impeccable-cream-palette` (1), `aesthetics-dark-acid-default` (2).

## Bad — do not do this

`aesthetics-anti-generic-bad`

```tsx
export function AntiGenericBad() {
  return (
    <div className="w-full max-w-md">
      {/* Intentionally styled card demonstrating generic SaaS aesthetics */}
      <div
        className="p-6 rounded-3xl bg-[image:var(--ex-anti-generic-bg)]"
        style={{
          fontFamily: 'Inter, system-ui, sans-serif',
        }}
      >
        <div className="flex flex-col items-center text-center">
          <div className="w-14 h-14 rounded-2xl bg-[var(--ex-anti-generic-icon-bg)] flex items-center justify-center mb-4">
            <span className="text-2xl">✨</span>
          </div>
          <h3 className="text-xl font-semibold text-[var(--ex-anti-generic-title)] mb-2">
            AI-Powered Solution
          </h3>
          <p className="text-sm text-[var(--ex-anti-generic-body)] mb-4">
            Supercharge your workflow with our next-generation platform.
            Unlock your potential today!
          </p>
          <button
            className="px-6 py-2.5 rounded-full text-sm font-medium bg-[var(--ex-anti-generic-button-bg)] text-[var(--ex-anti-generic-button-text)] backdrop-blur"
          >
            Get Started Free
          </button>
        </div>
      </div>
      <p className="text-xs text-destructive mt-4">
        Generic Inter font, purple gradient, centered layout, excessive rounding, sparkle emoji
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-anti-generic-good`

```tsx
export function AntiGenericGood() {
  return (
    <div className="w-full max-w-md">
      {/* Intentionally dark-themed card demonstrating distinctive brand aesthetics */}
      <div
        className="p-6 bg-[var(--ex-anti-good-bg)] border border-[var(--ex-anti-good-border)]"
      >
        <div className="flex items-start gap-4">
          <div
            className="w-10 h-10 flex items-center justify-center flex-shrink-0 bg-[var(--ex-anti-good-accent)]"
          >
            <span className="text-white font-bold text-lg">W</span>
          </div>
          <div className="text-left">
            <h3
              className="text-xl font-bold mb-1 text-[var(--ex-anti-good-title)]"
              style={{
                fontFamily: "'Playfair Display', Georgia, serif",
                letterSpacing: '-0.01em',
              }}
            >
              Workflow Engine
            </h3>
            <p
              className="text-sm mb-4 text-[var(--ex-anti-good-body)]"
              style={{
                fontFamily: "'Source Serif 4', Georgia, serif",
                lineHeight: '1.6',
              }}
            >
              Structured automation for teams who value precision over hype.
            </p>
            <button
              className="px-4 py-2 text-sm font-medium bg-[var(--ex-anti-good-button-bg)] text-[var(--ex-anti-good-button-text)]"
            >
              Start Building
            </button>
          </div>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Distinctive serif typography, bold single accent color, asymmetric layout, crisp edges
      </p>
    </div>
  );
}
```

## References

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