Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

aestheticsimpeccable

Drop the Eyebrow Chip

NEVER

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

Bad

Good

Why it matters

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.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.