Tier badge

What it is

The tier name as a small solid pill: 12px/600/0.12em, uppercase. Silver and gold get a 1px inset edge so they stay visible on white. Use it on the credential card and in lists, never on the recognition plate.

When to use

• Use it in the credential card title, next to the tier name.
• Use it in lists that show a tier per row, such as benefits that a tier unlocks.
• Use it on the pages where the tier is the subject: the Benefits catalog, the membership hub, the dues page.

When not to use

• On the plate: the Recognition plate states the member, and the Credential card carries the badge.
• In a table head: use the 10px tier dot of the comparison Table.
• For a status label such as “Optional upgrade”: use the card tag of the Card.
• On the homepage, landing pages and join: those pages name no tiers. Professional Track™ is the only membership name there.

Rules

• Markup: <span class="hs-tier-badge hs-tier-badge--gold">Gold</span>. Use one of --bronze, --silver, --gold, --signature, --free.
• Write the tier name as text in sentence case. The CSS sets the uppercase.
• The fills come from the --hs-tier-* tokens. Free uses --hs-slate. Set no colour in markup.
• On a navy ground the Signature edge takes the ground’s line (--hs-ctx-line), so the pill stays visible.

Accessibility

• The text is the tier name, so the colour never carries the meaning alone.
• Labels: white on bronze 5.8:1, on signature 14.7:1, on slate 6.2:1; navy on silver 6.8:1, on gold 8.9:1.
• Silver and gold fills are pale (1.8:1 and 1.4:1 on white). Their 1px inset edge clears 3:1: slate 500 (3.7:1) and gold ink (5.9:1).
• The badge is a static <span>: not a link, no focus stop.

Variants

All tiers

Free uses slate.

<span class="hs-tier-badge hs-tier-badge--bronze">Bronze</span>
<span class="hs-tier-badge hs-tier-badge--silver">Silver</span>
<span class="hs-tier-badge hs-tier-badge--gold">Gold</span>
<span class="hs-tier-badge hs-tier-badge--signature">Signature</span>
<span class="hs-tier-badge hs-tier-badge--free">Free</span>