# Numbers Must Mean Sequence

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

> NEVER: Stamp numbered markers (01 / 02 / 03) on a set whose order carries no information. The test takes a second: reorder the items — if nothing breaks, if Security could just as well be 01 and Analytics 03, the numerals are decoration wearing the costume of structure, and they lie to a reader who reads "01" as a promise that something follows. A real process (Push → Build → Promote) or a typed timeline earns them, because there the order IS the information. Same bar for eyebrows, dividers and labels: encode something true, or drop them.

Stamp 01 / 02 / 03 on a set only when the order actually carries information the reader needs

There is a one-second test: reorder the items. If nothing breaks — if Security could just as well be 01 and Analytics 03 — then the numerals are decoration wearing the costume of structure, and they are actively lying to the reader, who reads "01" as a promise that something comes next. A real process (Push → Build → Promote) or a typed timeline earns its numbers, because there the order IS the information. Same rule governs the eyebrow chip (`aesthetics-impeccable-hero-eyebrow`): structure or nothing. impeccable ships a mechanical threshold for the same tell (`numbered-section-markers`), and it is worth knowing where the line falls: it scans the page's text for zero-padded markers in the 01–12 range and fires only when 3 or more DISTINCT markers appear AND at least 2 of them are consecutive (01, 02, 03 → two sequential pairs). One stray "01" is not the pattern; a run of three is, because a run is what turns numerals into the page's section cadence. It classifies the result as the AI editorial scaffold one tier deeper than the tracked eyebrow chip — the same reflex, spent on a bigger typographic gesture.

## Bad — do not do this

`aesthetics-decorative-numbering-bad`

```tsx
const features = [
  { n: '01', title: 'Analytics', body: 'Track every event, funnel, and cohort.' },
  { n: '02', title: 'Collaboration', body: 'Comment, assign, and resolve in place.' },
  { n: '03', title: 'Security', body: 'SSO, audit logs, and scoped API keys.' },
];

export function DecorativeNumberingBad() {
  return (
    <div className="w-full">
      <h3 className="text-sm font-semibold text-foreground mb-3">Features</h3>

      {/* Three unrelated capabilities, stamped as if they were steps */}
      <div className="grid grid-cols-3 gap-3">
        {features.map((f) => (
          <div key={f.title} className="rounded-md border border-border bg-card p-3">
            <span className="block text-lg font-semibold tabular-nums text-muted-foreground">
              {f.n}
            </span>
            <p className="text-sm font-medium text-foreground mt-1">{f.title}</p>
            <p className="text-xs text-muted-foreground mt-1">{f.body}</p>
          </div>
        ))}
      </div>

      <p className="text-xs text-error mt-4">
        Reorder them &mdash; Security 01, Analytics 03 &mdash; and nothing breaks. Nothing follows
        from anything. The numerals are decoration wearing the costume of structure, and they lie to
        the reader, who reads &ldquo;01&rdquo; as a promise that something comes next.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-decorative-numbering-good`

```tsx
const features = [
  { title: 'Analytics', body: 'Track every event, funnel, and cohort.' },
  { title: 'Collaboration', body: 'Comment, assign, and resolve in place.' },
  { title: 'Security', body: 'SSO, audit logs, and scoped API keys.' },
];

const steps = [
  { title: 'Push', body: 'A commit lands on main.' },
  { title: 'Build', body: 'The commit is compiled and tested.' },
  { title: 'Promote', body: 'The passing build becomes production.' },
];

export function DecorativeNumberingGood() {
  return (
    <div className="w-full space-y-6">
      <section>
        <h3 className="text-sm font-semibold text-foreground mb-3">Features</h3>
        {/* An unordered set, so it is marked up and rendered as one: no numerals */}
        <ul className="grid grid-cols-3 gap-3">
          {features.map((f) => (
            <li key={f.title} className="rounded-md border border-border bg-card p-3">
              <p className="text-sm font-medium text-foreground">{f.title}</p>
              <p className="text-xs text-muted-foreground mt-1">{f.body}</p>
            </li>
          ))}
        </ul>
      </section>

      <section>
        <h3 className="text-sm font-semibold text-foreground mb-3">How deploys work</h3>
        {/* A real sequence: the order IS the information, so it earns its numbers */}
        <ol className="space-y-2">
          {steps.map((s, i) => (
            <li key={s.title} className="flex items-baseline gap-3">
              <span className="text-sm font-semibold tabular-nums text-primary shrink-0">
                {String(i + 1).padStart(2, '0')}
              </span>
              <span className="min-w-0">
                <span className="text-sm font-medium text-foreground">{s.title}</span>
                <span className="text-xs text-muted-foreground"> &mdash; {s.body}</span>
              </span>
              {i < steps.length - 1 && (
                <span aria-hidden="true" className="text-muted-foreground text-xs">
                  &darr;
                </span>
              )}
            </li>
          ))}
        </ol>
      </section>

      <p className="text-xs text-success">
        The features lost their numerals and lost nothing else. The deploy flow keeps them, because
        Build cannot precede Push &mdash; the order carries information the reader needs, and the
        markup (<code>&lt;ol&gt;</code> vs <code>&lt;ul&gt;</code>) says so too.
      </p>
    </div>
  );
}
```

## References

- [Anthropic frontend-design skill](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)
- [impeccable](https://impeccable.style/)
- [pbakaus/impeccable](https://github.com/pbakaus/impeccable)
- [MDN: The Ordered List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol)