# Not Every Page Needs a Hero Metric

**NEVER** · **ID:** `aesthetics-impeccable-hero-metric-template` · **Category:** aesthetics
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-impeccable-hero-metric-template

> NEVER: Ship a decorative hero metric — a round, unsourced "10x faster" / "99.99%" / "500M+" with no denominator, no window, and no source, dressed in a gradient accent. A prominent number is allowed on exactly one condition: it shows actual user data (this account, this window, live, timestamped). Otherwise replace the stat row with one concrete product screenshot.

Show a prominent number only when it comes from real data, not as decorative gradient furniture

The skill permits a prominent metric under exactly one condition: it shows actual user data. The failure mode is the decorative, unsourced number — "10x faster", "99.99%", "500M+" — a round figure with no denominator, no window, and no source, used as visual furniture to make a hero feel substantiated. It belongs to the same family as identical repeated card grids: three cells that look like evidence and carry none. So either the number is real (this account, this week, live, timestamped, with the series behind it), or it should not be there at all — replace the stat row with one concrete product screenshot, which at least shows the thing you are selling.

## Bad — do not do this

`aesthetics-hero-metric-template-bad`

```tsx
const stats = [
  { value: '10x', label: 'Faster deploys' },
  { value: '99.99%', label: 'Uptime SLA' },
  { value: '500M+', label: 'Events processed' },
];

export function HeroMetricTemplateBad() {
  return (
    <div className="w-full">
      <div className="rounded-lg border border-border bg-card p-6 text-center">
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">Ship with confidence</h1>
        <p className="text-sm text-muted-foreground mt-2">The workflow platform for modern teams.</p>

        {/* Big number, small label, gradient accent, three across. The template. */}
        <div className="grid grid-cols-3 gap-3 mt-6">
          {stats.map((s) => (
            <div key={s.label} className="rounded-xl border border-border bg-gradient-to-b from-violet-500/10 to-transparent p-4">
              <div className="bg-gradient-to-r from-violet-500 to-fuchsia-500 bg-clip-text text-2xl font-bold text-transparent">
                {s.value}
              </div>
              <div className="text-[11px] text-muted-foreground mt-1">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Three identical gradient-accented stat blocks, and not one of them is measured. 10x faster
        than what? Whose uptime, over which window? These are round, unsourced numbers doing the
        job of visual furniture — the hero-metric template, decoration wearing the costume of proof.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-hero-metric-template-good`

```tsx
const week = [
  { day: 'Mon', runs: 62 },
  { day: 'Tue', runs: 81 },
  { day: 'Wed', runs: 74 },
  { day: 'Thu', runs: 96 },
  { day: 'Fri', runs: 100 },
];

export function HeroMetricTemplateGood() {
  return (
    <div className="w-full">
      <div className="rounded-lg border border-border bg-card p-6">
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">Ship with confidence</h1>
        <p className="text-sm text-muted-foreground mt-2 max-w-prose">
          The workflow platform for modern teams.
        </p>

        {/* One metric, and it is real: this account's own data, sourced and timestamped */}
        <div className="mt-6 rounded-md border border-border p-4">
          <div className="flex items-baseline justify-between">
            <div>
              <div className="text-2xl font-semibold tabular-nums text-foreground">2,847</div>
              <div className="text-[11px] text-muted-foreground mt-0.5">
                deploys your team shipped this week
              </div>
            </div>
            <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
              <span className="h-1.5 w-1.5 rounded-full bg-success" aria-hidden="true" />
              live · updated 2 min ago
            </span>
          </div>

          <div className="flex items-end gap-1.5 h-12 mt-4" role="img" aria-label="Deploys per day, Monday through Friday">
            {week.map((d) => (
              <div key={d.day} className="flex-1 flex flex-col items-center gap-1">
                <div className="w-full rounded-sm bg-muted-foreground/30" style={{ height: `${d.runs}%` }} />
                <span className="text-[9px] text-muted-foreground">{d.day}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        One prominent number, and it is the user&rsquo;s own: a real count, from live data, with a
        timestamp and the series behind it. A metric earns hero placement when it is evidence; when
        it cannot be sourced, cut it and show the product instead.
      </p>
    </div>
  );
}
```

## References

- [impeccable](https://impeccable.style/)
- [pbakaus/impeccable](https://github.com/pbakaus/impeccable)