# Drop the Eyebrow Chip

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

> NEVER: Put a tracked-caps eyebrow or pill chip immediately above a hero headline — font-size <= 14px combined with either uppercase plus letter-spacing >= 1.6px, or font-weight >= 700 in an accent color; 3 or more such kickers on one page is the same failure at page scale. Fold its content ("Now in beta") into the subhead or a real nav-level badge, and separate sections with structure (a rule, spacing, a genuine `<h2>`).

Remove the tracked-caps label above the hero headline and put its content where it belongs

The detector fires on a sibling immediately before a heading with font-size <= 14px AND either (a) uppercase with letter-spacing >= 1.6px, or (b) font-weight >= 700 in an accent color. A companion rule, repeated-section-kickers, fires when 3 or more such kickers appear on one page — which is what happens the moment the pattern becomes the page's section separator. The eyebrow is usually smuggling real information ("Now in beta", "New") that deserves a real home: fold the status into the subhead as a sentence, or surface it as a genuine nav-level badge next to the product name. Sections should separate on structure — a rule, spacing, a real h2 — not on a decorative kicker.

## Bad — do not do this

`aesthetics-hero-eyebrow-bad`

```tsx
const sections = ['Features', 'Pricing', 'Testimonials'];

export function HeroEyebrowBad() {
  return (
    <div className="w-full">
      <div className="rounded-lg border border-border bg-card p-6">
        {/* Tell #1: the eyebrow — 12px, uppercase, wide tracking, accent color, right above the h1 */}
        <p className="text-[12px] font-bold uppercase tracking-[0.2em] text-violet-600 dark:text-violet-400 mb-3">
          Now in Beta
        </p>
        <h1 className="text-3xl font-semibold tracking-tight text-foreground leading-tight">
          Build faster
        </h1>
        <p className="text-sm text-muted-foreground mt-3">
          The workflow platform for modern teams.
        </p>

        {/* Tell #2: the same shape repeats as a kicker above every section — 4 total, past the 3+ threshold */}
        {sections.map((s) => (
          <div key={s} className="mt-6 pt-5 border-t border-border">
            <p className="text-[12px] font-bold uppercase tracking-[0.2em] text-violet-600 dark:text-violet-400 mb-2">
              {s}
            </p>
            <div className="h-2 w-3/4 rounded bg-muted" />
            <div className="h-2 w-1/2 rounded bg-muted mt-1.5" />
          </div>
        ))}
      </div>
      <p className="text-xs text-error mt-4">
        Four tracked-caps chips, each an immediately-preceding sibling of a heading at 12px with
        0.2em tracking and bold accent color. One fires the eyebrow detector; four fire the
        repeated-section-kickers rule on top of it.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-hero-eyebrow-good`

```tsx
const sections = [
  { title: 'Features', body: 'Branch previews, typed pipelines, and rollbacks that take one click.' },
  { title: 'Pricing', body: 'Free while you are under ten thousand runs a month.' },
  { title: 'Testimonials', body: 'Teams at Linear and Vercel run their release trains on it.' },
];

export function HeroEyebrowGood() {
  return (
    <div className="w-full">
      <div className="rounded-lg border border-border bg-card">
        {/* Beta lives where status belongs: in the nav, next to the product name */}
        <div className="flex items-center gap-2 px-6 py-3 border-b border-border">
          <span className="text-sm font-semibold text-foreground">Relay</span>
          <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
            Beta
          </span>
        </div>

        <div className="p-6">
          <h1 className="text-3xl font-semibold tracking-tight text-foreground leading-tight">
            Build faster
          </h1>
          {/* The beta fact is folded into the subhead as a sentence, not staged as a chip */}
          <p className="text-sm text-muted-foreground mt-3 max-w-prose">
            The workflow platform for modern teams. It is in beta, so pricing is still free and the
            API can still move under you.
          </p>

          {/* Sections separate on structure: a rule and a real heading. No kickers. */}
          {sections.map((s) => (
            <section key={s.title} className="mt-6 pt-5 border-t border-border">
              <h2 className="text-base font-semibold text-foreground">{s.title}</h2>
              <p className="text-xs text-muted-foreground mt-1 max-w-prose">{s.body}</p>
            </section>
          ))}
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Zero eyebrows. Status is a real nav-level badge, the beta caveat is a sentence in the
        subhead, and sections are told apart by rules and headings — so nothing sits above a
        heading in tracked caps.
      </p>
    </div>
  );
}
```

## References

- [impeccable](https://impeccable.style/)
- [Practical Typography](https://practicaltypography.com/)