Section badge — .hexfill, 10 options

The badge that opens a section (.cards-sec and the practice-area sections use it four times on the homepage). Every option keeps the brand hexagon — pointy-top, the same proportion as polygon.svg — and only changes how it is drawn: filled, outlined, paired, clustered, inline, or reduced to a watermark. Stages are on the new off-white (#F9F9F9), not the replica's plain white. Cards below each heading are abbreviated — they are context for the badge, not the thing being judged.

Today: a 95×110 solid teal cell with a white FontAwesome icon, centred, 22px above the heading — a straight carry-over from the current site. It is the least considered element on the page: the icon is generic (fa-rss, fa-youtube-play) and the teal is the brand's minor accent doing major work.

Round 2 — with hover

The rule, corrected. An earlier draft of this page said hover belongs only on links. That was too wide, and it is not a rule this project inherited — the standards library only requires that hover states stay legible and derive their colour from tokens. The accurate line is narrower: a decorative element may respond to hover; what it must not do is signal that it is a control. Lift-and-shadow, a sliding arrow, a growing underline, the heading changing colour, cursor: pointer — that is the vocabulary of things you click, and spending it on a badge that goes nowhere teaches visitors that this site's signals cannot be trusted. Atmosphere is fine; mimicry is not.

What that means here. .hexfill is decoration — it links nowhere. So the live candidates are the section-triggered ones: X11, X14, X15, X16, X17. The cursor entering the section wakes the badge, nothing claims to be clickable, and the effect rewards reading rather than hunting. X12, X13 and X18 are kept for comparison but are link-only: each uses control vocabulary, so each is valid only if we decide the section header itself becomes a link to its archive (which would be a separate, defensible decision — "Read Our Featured Articles" is a reasonable thing to click).

Flag for Adi — check this round against the direction doc before it goes anywhere near the client. design-direction.md says the distinctiveness has to come from information design, not decoration, and it lists animation among the levers already ruled out. A hover round on a decorative badge sits directly against that sentence. Worth exploring internally, but it should not be presented as the answer to "a little different than most websites" — that answer has to come from typography, grid, density, and how the practice-area zones are handled.

Every effect is CSS-transition only and switches off under prefers-reduced-motion, same rule as the header and the B19 button. On touch there is no hover at all, so in every option the resting state has to carry the meaning on its own.