# One Signature Element

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

> SHOULD: Include one memorable, unforgettable element per design (animated border, distinctive illustration, dramatic typography, unexpected shadow). Ask: "What will someone remember?" If you cannot answer, add a signature element. One bold detail beats a dozen safe flourishes.

Give the page a single element it will be remembered by, and make it embody the brief

A signature is not an effect you sprinkle on at the end — it is the one thing the page is for, formally. It might be a piece of dramatic typography, an interactive instrument drawn from the subject's own world, a hand-drawn diagram, an unexpected structural move. What disqualifies a signature is genericity: if it could belong to any other product, it is decoration. And it must be alone — a page with three signatures has none, which is why this pairs with spending boldness once.

## Bad — do not do this

`aesthetics-memorable-differentiation-bad`

```tsx
export function MemorableDifferentiationBad() {
  return (
    <div className="w-full max-w-md">
      <div
        className="p-8 rounded-lg bg-[var(--ex-memorable-bg)] border border-[var(--ex-memorable-border)]"
      >
        <h3
          className="text-xl font-semibold mb-2 text-[var(--ex-memorable-title)]"
        >
          Start your free trial
        </h3>
        <p
          className="text-sm mb-6 text-[var(--ex-memorable-body)]"
        >
          Join thousands of teams already using our platform to boost productivity.
        </p>
        <button
          className="w-full px-6 py-3 rounded-lg text-sm font-medium bg-[var(--ex-memorable-button-bg)] text-[var(--ex-memorable-button-text)]"
        >
          Get Started
        </button>
        <p
          className="text-xs text-center mt-3 text-[var(--ex-memorable-subtext)]"
        >
          No credit card required
        </p>
      </div>
      <p className="text-xs text-destructive mt-4">
        Generic CTA: nothing memorable, looks like every other SaaS landing page
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-memorable-differentiation-good`

```tsx
export function MemorableDifferentiationGood() {
  return (
    <div className="w-full max-w-md">
      {/* Animated gradient border wrapper */}
      <div
        className="relative rounded-xl p-[2px] motion-safe:animate-[gradient-flow_4s_ease_infinite]"
        style={{
          background: 'linear-gradient(90deg, #f97316, #ec4899, #8b5cf6, #3b82f6, #10b981, #f97316)',
          backgroundSize: '300% 100%',
        }}
      >
        {/* Inner content with solid background */}
        <div className="rounded-[10px] p-8 bg-[var(--ex-memorable-bg)]">
          <h3 className="text-xl font-semibold mb-2 text-[var(--ex-memorable-title)]">
            Start your free trial
          </h3>
          <p className="text-sm mb-6 text-[var(--ex-memorable-body)]">
            Join thousands of teams already using our platform to boost productivity.
          </p>
          <button className="w-full px-6 py-3 rounded-lg text-sm font-medium transition-transform hover:scale-[1.02] bg-[var(--ex-memorable-button-bg)] text-[var(--ex-memorable-button-text)]">
            Get Started
          </button>
          <p className="text-xs text-center mt-3 text-[var(--ex-memorable-subtext)]">
            No credit card required
          </p>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Smooth flowing gradient border creates memorable visual interest
      </p>
    </div>
  );
}
```

## References

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