Eyebrow
The kicker. 11px / 500 / uppercase / 0.12em tracking / text-muted. It names the category a section belongs to in one to three words, and it is always skippable — a reader who ignores it loses nothing.
Never interactive, so it has no states. In the functional register it takes spacing="none" and becomes a panel label. tone="action" was renamed tone="link" — primary was already taken.
Specification
| Property | Value | Why |
|---|---|---|
| Size | --text-eyebrow · 11px | Small enough to subordinate to the heading, large enough to clear the 4.5:1 floor at text-muted. |
| Weight | 500 | 600 competes with the heading; 400 disappears under the tracking. |
| Tracking | --tracking-eyebrow · 0.12em | Uppercase without extra tracking reads as shouting; 0.12em reads as a label. |
| Case | text-transform: uppercase | A style, never a typed string. A screen reader announces HOW IT WORKS as an initialism. |
| Colour | --color-text-muted | 4.76:1. The eyebrow is context, not content. |
| Gap to heading | 12–16px | Closer to its heading than to anything above it — proximity is what makes the pair read as one unit. |
| Length | 1–3 words, ≤ 20 characters | Longer than that and it wraps, and a wrapped eyebrow looks like a broken heading. |
Do & don't
A concrete category noun. Two words. The heading stands alone without it.
One sentence split across the eyebrow and the heading. Neither half survives on its own, and screen readers announce them as two unrelated strings.
Naming the audience is a legitimate category. It tells a reader whether this section is for them.
A full sentence with a full stop. That is body copy wearing an eyebrow's slot — and the period is banned outright.
Layout guardrails
| Do | Don't | |
|---|---|---|
| Length | 1–3 words, 20 characters hard ceiling | Anything that wraps to a second line |
| Proximity | 12–16px to its heading, and more space above than below | Equal spacing above and below — the eyebrow then belongs to neither block |
| Wrapping | text-wrap: nowrap at 1–3 words; shorten the copy if it does not fit | Hyphenation, or a long compound breaking mid-word at 360px |
| Pairing | Exactly one eyebrow per heading | An eyebrow with no heading under it — that is a Badge |
| Nesting | One per section | Stacked eyebrows, or an eyebrow above a subheading inside a section that already has one |
Copywriting guardrails
- Concrete category nouns. "Rating scale", "Pricing", "For organisers", "API". A reader should be able to guess the section's content from the eyebrow alone.
- No punctuation. No full stop, no colon, no ellipsis, no exclamation mark. A middot separating two words is the only mark permitted, and only in nav-like contexts.
- Never a clause of the headline. Read the heading with the eyebrow covered. If it is now ungrammatical or meaningless, you have written one sentence in two components.
- Completely skippable. The eyebrow may add orientation. It may never carry information that appears nowhere else.
Anti-slop guardrails
The eyebrow is the highest-density slot on any page: three words, above the fold, in a style that says "this is important". That makes it the first place generic marketing filler appears, and the easiest place to catch it.
Banned words
These do not appear in a Sporting Scouter eyebrow. Not as a variant, not in title case, not translated. A pull request using one is rejected on sight — no discussion needed, which is the point of a list.
What they have in common: every one is a claim the product has not yet earned, made before the reader has been told what the product does. They also survive find-and-replace between industries unchanged — "Empower Teams" fits a payroll tool, a CRM and a rowing club equally well, which is the tell.
Delete the eyebrow. Then swap it with the eyebrow from an unrelated section. If the section's value is unchanged in either case, the eyebrow is decoration — remove it entirely. Ship the heading alone.
This is mandatory before any new eyebrow merges. Most eyebrows fail it, and a page with four honest eyebrows reads better than one with eleven decorative ones.
Slop vs. value
The trade in every row is the same: an abstract benefit adjective becomes a precise technical feature, a named audience, or a number.
| AI-generated pattern (slop) | Human-optimised pattern (value-driven) | What was traded |
|---|---|---|
| Introducing ScoreBar | Rating output | An announcement nobody asked for → the component's actual job |
| Streamline Your Workflow | Bulk reply | A benefit adjective → the feature that produces it |
| Empower Event Organizers | For organisers | A flattering verb → a named audience |
| Unlock Deeper Insights | Category breakdown | A locked-door metaphor → the seven-axis data |
| Transform Athlete Feedback | 412 debriefs | An unfalsifiable claim → a number |
| Next-Gen Rating Engine | Weighted average | A generation claim → the algorithm |
| Revolutionize Race Day | Live results | A revolution → a capability |
| Discover What Athletes Think | Recent reviews | An invitation to browse → what is on the screen |
| Elevate Your Event | Benchmarking | A vertical metaphor → the comparison feature |
| Smart, Seamless Embedding | Embed widget | Two adjectives → the noun |
| Driving Innovation in Sport | deleted | Failed the deletion test — the section lost nothing |
Note the right-hand column: nine of eleven are one or two words, and every one is a thing that exists in the product. If a proposed eyebrow cannot be traced to a screen, an audience or a figure, it is slop regardless of which words it uses.
Accessibility & semantics
An eyebrow must never use <h1> through <h6>. Heading tags build the document outline that screen-reader users navigate by — pressing H, or opening a headings list. An eyebrow in an <h3> injects "HOW IT WORKS" into that outline as though it were a section of its own, and the real heading below it then reads as a child of a two-word fragment.
Worse in practice: a page with six eyebrow-headline pairs produces twelve outline entries, half of them meaningless, and the outline stops being usable as a table of contents — which is the only reason it exists.
The required structure
Wrap the eyebrow in a non-semantic inline container — a <span> or <p> — inside a <header> or <div> that also encapsulates the true heading tag. The wrapper is what makes the pair one unit; the heading tag alone carries the outline.
<!-- The header block is the unit. Only the h2 enters the outline. --> <header class="section-head"> <span class="eyebrow">Rating scale</span> <h2>How a 4.7 is calculated</h2> </header>
A <p> is equally correct when the eyebrow sits on its own line and you want the block semantics:
<header class="section-head"> <p class="eyebrow">For organisers</p> <h2>Reply to a debrief in one click</h2> </header>
Wrong, and why
<!-- WRONG — two outline entries, the first meaningless -->
<h3 class="eyebrow">Rating scale</h3>
<h2>How a 4.7 is calculated</h2>
<!-- WRONG — heading order goes h3 then h2, skipping backwards -->
<!-- WRONG — aria-hidden hides it from screen readers but it is still
read by translation tools and still indexed; if it is worth
showing it is worth announcing, and if it is not, delete it -->
<span class="eyebrow" aria-hidden="true">Rating scale</span>
<!-- WRONG — a heading whose accessible name is the two halves glued
together, which is what happens when one sentence is split -->
<h2><span class="eyebrow">Learn how we calculate</span>
a rating from seven categories</h2>Rules
- Never
<h1>–<h6>.<span>or<p>, inside a<header>or<div>with the real heading. - Never
aria-hidden. If the eyebrow is worth displaying it is worth announcing. If it is not worth announcing, it failed the deletion test. - Uppercase by CSS only.
text-transform, never a typed uppercase string — some screen readers spell out all-caps words letter by letter. - Never a link, never a button, never focusable. No
tabindex. An eyebrow in the tab order is a control that does nothing. - The heading must be complete on its own. This is an accessibility rule as much as a copy rule: a screen-reader user landing on the heading via the outline never hears the eyebrow.
- Do not use
<hgroup>. Its support and semantics have changed twice; a plain wrapper plus a single heading is unambiguous everywhere.
theme.css.