Brand exploration · 14 October 2026
Editorial and member components. Each choice shows today’s versions and the proposals side by side on the same real copy, with exact CSS, contrast and a house-style check. Ten of the eleven choices are decided. The decided version is outlined in navy; it is what components/ builds, and its HTML follows the comparison. The losing versions stay here for the record. The award hero is still open: more options are in progress on a separate page. Member names are fictional. All components, with code: components gallery. Round 1: decided.
| Choice | Decision | Status |
|---|---|---|
| 1. Recognition plate | C: profile spec, name at the H1 token (36→52px); no tier badge on the plate | Decided |
| 2. Tier badge | B: solid tier fill, 12px/600/0.12em, inset edge on silver and gold; credential card, never the plate | Decided |
| 3. Avatar sizes | C: 40, 64 and a fluid 112→184px | Decided |
| 4. Member and recipient card | C: horizontal link card, Didot name | Decided |
| 5. Quote | D: Didot italic pull quote; prose blockquote stays for articles | Decided |
| 6. Stat band | C: Didot figure 48→64px, white on navy | Decided |
| 7. Steps | D: navy ring numerals, Didot titles, rail | Decided |
| 8. FAQ | C: open list, answers in ink; D accordion for long sets | Decided |
| 9. Anchor nav | D: quiet navy links, no gold | Decided |
| 10. CTA band | A: navy, centred, no rule | Decided |
| 11. Award hero | C on the award hero page: navy hero, white deadline card that overlaps the next band | Decided |
| Settled | Credential card | Decided |
Decided: C, without the tier badge
Which name size, weight and tracking does the cream plate use, now that the hub and the profile each build it?
Today on: A on /my-membership (.hs-activation-plate, hs_user.membership.css:75). B on /members/<handle> and its Articles tab (.hs-member-id, hs_user.profile.css:117). Both share the plate #FAF3E9, the #EADFC8 edge, the 56×4 honor-gold rule and the letterpress shadow.
Honor Society® member
Avery Example
Member since March 2024
clamp(2.375rem, 4vw, 3.25rem), from 992px clamp(3rem, 5vw, 4rem) = 38→64px; weight 400 written, the 700 cut renders; line-height 1.113px/700, 0.06em, #8A5A0012px/700, 0.1em #5D6478; date Didot 18pxHonor Society® member
Avery Example
Member since March 2024
clamp(2rem, 4vw, 3rem) = 32→48px, 700, line-height 1.0513px/600, 0.12em, #8A5A0012px/600, 0.12em #5D6478; date Didot 17px 700Honor Society® member
Avery Example
Member since March 2024
var(--hs-text-h1) = clamp(2.25rem, 2.2vw + 1.1rem, 3.25rem), 36→52px, 700, line-height 1.05.hs-eyebrow: 13px/600/0.12em, gold ink from the plate ground12px/600, 0.12em; date Didot 17px 700, pressedDecided version, live, then its HTML
Honor Society® member
Avery Example
Nursing student at Example State University
Member since March 2024
<header class="hs-band hs-band--plate hs-plate" data-section="identity">
<div class="hs-container hs-plate__inner">
<div class="hs-plate__identity">
<img class="hs-avatar hs-avatar--lg" src="/placeholders/avatar.svg" width="184" height="184" alt="">
<div class="hs-plate__text">
<p class="hs-eyebrow">Honor Society® member</p>
<h1 class="hs-plate__name">Avery Example</h1>
<p class="hs-plate__headline">Nursing student <span class="hs-plate__at">at Example State University</span></p>
<p class="hs-plate__since"><span class="hs-plate__since-label">Member since</span> <span class="hs-plate__since-date">March 2024</span></p>
</div>
</div>
</div>
</header>Decided: B, never on the plate
How does a tier name look as a badge, and how do the pale tiers stay legible?
Today on: A on /benefits (.hs-bf-tierbadge, .hs-bf-lockbadge, hs_benefits.css:568) and on coupon pages. The hub ladder shows tier colour only as a dot with a dark outline (hs_user.membership.css:255). The tier pages use a 4px tier rail.
On white
On plate
0.72rem/700, 0.06em, uppercase, padding 0.25rem 0.6rem, line-height 1On white
On plate
12px/600, 0.12em, uppercase, padding 4px 12px, pillOn white
On plate
14px/600 ink on soft, 1px line, 8px dot in the tier colour with the B edgeDecided version, live, then its HTML
<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>Decided: C
How many avatar sizes does the system need?
Today on: 32px blog cover drop and small rows; 40px header (.hs-nav-avatar) and article card; 44px article byline; 48px My Feed; 64px author card; 80×96 portraits on /featured-members; 88px blog author; 112, 160 and 184px profile photo by breakpoint. All are circles except the featured-members portraits.
Header, on navy
AE--hs-control-h), 64px (--hs-space-8), clamp(7rem, 4rem + 10vw, 11.5rem) = 112→184pxDecided version, live, then its HTML
AE
<img class="hs-avatar" src="/placeholders/avatar.svg" width="40" height="40" alt="Avery Example">
<img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="">
<span class="hs-avatar hs-avatar--initials hs-avatar--md" role="img" aria-label="Avery Example">AE</span>
<img class="hs-avatar hs-avatar--lg" src="/placeholders/avatar.svg" width="184" height="184" alt="Avery Example">Decided: C
What does one member look like in a directory (recipe R3), and one scholarship recipient on an award page?
Today on: A on /featured-members (106 cards, inline styles). B on /scholarship-recipients-all (131 rows). Recipient cards with initials, award, school, story link and a YouTube link on /scholarships, /study-abroad-scholarship and /scholarship-recipients-all (3 each). The people shown here are fictional.
.hs-card--link + row: 64px avatar, gap 16px; hover navy border, no lift--hs-text-lead), navy 12.4:1Decided version, live, then its HTML
<ul class="hs-card-grid hs-card-grid--3">
<li>
<a class="hs-card hs-card--link hs-member-card" href="/members/avery-example" data-ph-capture-attribute-cta="member-profile" data-ph-capture-attribute-cta-loc="directory">
<img class="hs-avatar hs-avatar--md" src="/placeholders/avatar.svg" width="64" height="64" alt="" loading="lazy" decoding="async">
<span class="hs-member-card__body">
<h3 class="hs-member-card__name">Avery Example</h3>
<span class="hs-member-card__meta">Nursing</span>
<span class="hs-member-card__meta">Example State University</span>
</span>
</a>
</li>
<li>
<a class="hs-card hs-card--link hs-member-card hs-member-card--recipient" href="/scholarship-recipient/avery-example" data-ph-capture-attribute-cta="recipient-story" data-ph-capture-attribute-cta-loc="recipients">
<span class="hs-avatar hs-avatar--initials hs-avatar--md" aria-hidden="true">AE</span>
<span class="hs-member-card__body">
<span class="hs-eyebrow">Study Abroad Scholarship</span>
<h3 class="hs-member-card__name">Avery Example</h3>
<span class="hs-member-card__meta">Example State University</span>
</span>
<p class="hs-member-card__story">Avery describes a sample study program abroad and her plans for a future in teaching.</p>
</a>
</li>
</ul>Decided: D, with C for quotes inside articles
How does a member testimonial look on an explainer or trust page?
Today on: A on /reviews (6 quotes in cards). B on /prospective-members (1 quote). C is round 1's .hs-prose blockquote, for quotes inside article copy.
Membership experience
“Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.”
Morgan Example
Example State University
“Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.”
Morgan Example
Example State University
clamp(20px, 2.4vw, 26px)/1.55 #162351Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.
Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.
clamp(1.375rem, 1vw + 1.1rem, 1.75rem) = 22→28px/1.35, navy 12.4:1; opening mark Didot 700 64px--card: bordered panel, quote at 22pxDecided version, live, then its HTML
Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.
The steps are clear and easy to follow.
<figure class="hs-quote">
<blockquote class="hs-quote__text">
<p>Joining HonorSociety.org gave me a clear place to plan my next steps, and I’m glad I did.</p>
</blockquote>
<figcaption class="hs-quote__cite">
<span class="hs-quote__name">Morgan Example</span>
Example State University
</figcaption>
</figure>
<figure class="hs-quote hs-quote--card">
<blockquote class="hs-quote__text"><p>The steps are clear and easy to follow.</p></blockquote>
<figcaption class="hs-quote__cite"><span class="hs-quote__name">Riley Sample</span> Example review site, November 2025</figcaption>
</figure>Decided: C
What size and face does a big checkable figure use, and is it gold?
Today on: A on /scholarships (#hs-giving, 64px). B on /study-abroad-scholarship (#hs-sa-giving, 56px). The same “$1M+” appears in copy on /university-relations and /scam. The homepage trust bar sets its figures in Didot with a gold underline (.hs-trust__figure). “$1M+” is not in site facts yet.
A broader commitment to opportunity
$1M+
Given to nonprofits & other honor societies.
Honor Society® has given more than $1 million to nonprofit organizations and other honor societies.
clamp(24px, 4vw, 44px); h2 Arial 32px whiteOur broader commitment
$1M+
Donated to nonprofits & other honor societies.
Honor Society® has given more than $1 million to nonprofit organizations and other honor societies.
clamp(24px, 3vw, 34px); h2 28pxA broader commitment to opportunity
$1M+
Given to nonprofits and other honor societies.
Honor Society® has given more than $1 million to nonprofit organizations and other honor societies.
clamp(3rem, 2.5vw + 2.25rem, 4rem) = 48→64px/1, lining figures, white.hs-band--navy (treatment B), eyebrow gold, h2 whiteA broader commitment to opportunity
$1M+
Given to nonprofits and other honor societies.
Honor Society® has given more than $1 million to nonprofit organizations and other honor societies.
Decided version, live, then its HTML
<section class="hs-band hs-band--navy" data-section="giving">
<div class="hs-container">
<p class="hs-eyebrow">A broader commitment to opportunity</p>
<p class="hs-stat__figure">$1M+</p>
<h2 class="hs-heading hs-heading--h2">Given to nonprofits and other honor societies.</h2>
<p class="hs-lead">Honor Society® has given more than $1 million to nonprofit organizations and other honor societies.</p>
</div>
</section>
<dl class="hs-stats">
<div class="hs-stat"><dt class="hs-stat__label">given to nonprofits and other honor societies</dt><dd class="hs-stat__figure">$1M+</dd></div>
<div class="hs-stat"><dt class="hs-stat__label">scholarship programs</dt><dd class="hs-stat__figure">20</dd></div>
</dl>Decided: D
How does a numbered how-to-apply procedure look?
Today on: A on /scholarships (4) and /study-abroad-scholarship (3): numbered soft cards. B on 10 editor pages (/prospective-members, /memberdues, /email-acceptance-letter, /reviews, /ForProfessionals, /honorsocietyorg-life, /career-services, /members, /scam-watch, /featured-members in part): a plain <ol>. C on /featured-members. In code: the certificate gate (navy ring numerals, hs_user.certificate_gate.css:77) and the ring size tool (Mukta numerals over a hairline).
01
Choose your scholarship
Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.
02
Prepare your materials
Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.
03
Sign in when prompted
Open the application from the program page. If the form asks you to sign in or register, do that first.
04
Review and submit
Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.
list-style: decimal, padding-left 24px; 16px/1.75 #27334B; bold lead-in01 / CHOOSE YOUR SCHOLARSHIP
Choose your scholarship
Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.
02 / PREPARE YOUR MATERIALS
Prepare your materials
Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.
03 / SIGN IN WHEN PROMPTED
Sign in when prompted
Open the application from the program page. If the form asks you to sign in or register, do that first.
04 / REVIEW AND SUBMIT
Review and submit
Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.
Choose your scholarship
Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.
Prepare your materials
Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.
Sign in when prompted
Open the application from the program page. If the form asks you to sign in or register, do that first.
Review and submit
Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.
--4: four from 62rem) with a 1px line-strong rail to the next stepDecided version, live, then its HTML
Choose your scholarship
Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.
Prepare your materials
Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.
Sign in when prompted
Open the application from the program page. If the form asks you to sign in or register, do that first.
Review and submit
Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.
Select “Activate your membership” and choose a membership tier.
Complete your payment.
Open this page again. Your certificate downloads as a PDF that you can print.
<ol class="hs-steps hs-steps--4">
<li class="hs-steps__item">
<h3 class="hs-steps__title">Choose your scholarship</h3>
<p class="hs-steps__text">Read the program page. Check the award’s focus, eligibility, deadline, and application instructions before you begin.</p>
</li>
<li class="hs-steps__item">
<h3 class="hs-steps__title">Prepare your materials</h3>
<p class="hs-steps__text">Write down the prompt and word limit. Draft your answers in a document you can save, and gather transcripts or videos when requested.</p>
</li>
<li class="hs-steps__item">
<h3 class="hs-steps__title">Sign in when prompted</h3>
<p class="hs-steps__text">Open the application from the program page. If the form asks you to sign in or register, do that first.</p>
</li>
<li class="hs-steps__item">
<h3 class="hs-steps__title">Review and submit</h3>
<p class="hs-steps__text">Answer the specific questions, verify your contact details and attachments, and submit. Save a copy and any confirmation you receive.</p>
</li>
</ol>
<ol class="hs-steps hs-steps--list">
<li class="hs-steps__item"><p class="hs-steps__text">Select “Activate your membership” and choose a membership tier.</p></li>
<li class="hs-steps__item"><p class="hs-steps__text">Complete your payment.</p></li>
<li class="hs-steps__item"><p class="hs-steps__text">Open this page again. Your certificate downloads as a PDF that you can print.</p></li>
</ol>Decided: C as the default, D for long sets
Is a FAQ an open list, a set of cards, or an accordion?
Today on: A on /faqs (hs_pages faqs.css; every answer open by design, the template forbids “collapsible”). B on /study-abroad-scholarship (7 cards). Plain h3 + p on the other 16 editor pages. No page uses <details> today.
How much is the Study Abroad Scholarship?
Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
When is the next application deadline?
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
Do I need confirmed enrollment when I apply?
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
inset 0 1px 0 #E6E8EF, 24px above and belowHow much is the Study Abroad Scholarship?
Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
When is the next application deadline?
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
Do I need confirmed enrollment when I apply?
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
How much is the Study Abroad Scholarship?
Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
When is the next application deadline?
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
Do I need confirmed enrollment when I apply?
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
hs-qa: hs-faq is taken by the /faqs pageHonor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
Decided version, live, then its HTML
How much is the Study Abroad Scholarship?
Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
When is the next application deadline?
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
Do I need confirmed enrollment when I apply?
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.
This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.
You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.
<div class="hs-qa">
<div class="hs-qa__item" id="faq-1">
<h3 class="hs-qa__question">How much is the Study Abroad Scholarship?</h3>
<div class="hs-qa__answer"><p>Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.</p></div>
</div>
<div class="hs-qa__item" id="faq-2">
<h3 class="hs-qa__question">When is the next application deadline?</h3>
<div class="hs-qa__answer"><p>This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.</p></div>
</div>
<div class="hs-qa__item" id="faq-3">
<h3 class="hs-qa__question">Do I need confirmed enrollment when I apply?</h3>
<div class="hs-qa__answer"><p>You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.</p></div>
</div>
</div>
<div class="hs-qa hs-qa--accordion">
<details class="hs-qa__item" open>
<summary class="hs-qa__question">How much is the Study Abroad Scholarship?</summary>
<div class="hs-qa__answer"><p>Honor Society® offers this $1,000 scholarship. The award is administered independently by Honor Society and its designated scholarship review committee.</p></div>
</details>
<details class="hs-qa__item">
<summary class="hs-qa__question">When is the next application deadline?</summary>
<div class="hs-qa__answer"><p>This scholarship has rolling monthly deadlines on the 28th. Applications may remain under consideration for up to 3 months after submission.</p></div>
</details>
<details class="hs-qa__item">
<summary class="hs-qa__question">Do I need confirmed enrollment when I apply?</summary>
<div class="hs-qa__answer"><p>You must describe your planned program and dates when applying. Confirmation of enrollment in that program is required before scholarship funds are released.</p></div>
</details>
</div>Decided: A
Which ground and layout does the closing apply or join band use?
Today on: Navy on 13 editor pages (#162351 on 8, #1F2F6E on 5, some with a 4–5px gold top or bottom border). B (cream panel) on /study-abroad-scholarship and /scholarships. C (soft) on /featured-members and /ForProfessionals. The pages built in code end on a disclaimer band instead.
Ready to apply?
Study Abroad Scholarship
Review the requirements, prepare your materials, and share the goals you are working toward.
No purchase or membership payment is required to apply or win.
.hs-band--navy, treatment BReady to apply?
Study Abroad Scholarship
Review the requirements, prepare your materials, and share the goals you are working toward.
Have a question? Visit the Help Center →
Apply now →No purchase or membership payment is required to apply or win.
Ready to apply?
Study Abroad Scholarship
Review the requirements, prepare your materials, and share the goals you are working toward.
Ready to apply?
Study Abroad Scholarship
Review the requirements, prepare your materials, and share the goals you are working toward.
Decided version, live, then its HTML
<section class="hs-band hs-band--navy hs-cta-band" data-section="apply">
<div class="hs-container hs-cta-band__inner">
<p class="hs-eyebrow">Ready to apply?</p>
<h2 class="hs-heading hs-heading--h2">Study Abroad Scholarship</h2>
<p class="hs-lead">Review the requirements, prepare your materials, and share the goals you are working toward.</p>
<div class="hs-actions hs-cta-band__actions">
<a class="hs-button" href="/study-abroad-scholarship-0" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="apply">Apply now</a>
<a class="hs-link" href="https://support.honorsociety.org/hc/en-us" data-ph-capture-attribute-cta="help-center" data-ph-capture-attribute-cta-loc="apply">Visit the Help Center</a>
</div>
<p class="hs-cta-band__note">No purchase or membership payment is required to apply or win.</p>
</div>
</section>Decided: C — see award-hero.html
How does an award detail page open, and where do the amount and the deadline go?
Today on: A on /study-abroad-scholarship (php_code computes the next 28th). /scholarships has a smaller featured-award card in its hero. About 20 sibling award pages use the same php_code pattern.
Honor Society® scholarships
$1,000
The Study Abroad Scholarship from Honor Society® supports students pursuing a study abroad program that connects with their education, personal development, and future goals.
clamp(44px, 5vw, 60px) whiteclamp(26px, 2.8vw, 34px); navy button radius 6pxHonor Society® scholarships
Study Abroad Scholarship
A $1,000 award for students pursuing a study abroad program that connects with their education, personal development, and future goals.
.hs-award-facts: white panel, 1px line, 8px radius; labels 13px slate 6.2:1, values Mukta 600 22px ink, lining figures<time> when computed; the rolling rule in the noteHonor Society® scholarships
Study Abroad Scholarship
A $1,000 award for students pursuing a study abroad program that connects with their education, personal development, and future goals.
Honor Society® scholarships
Study Abroad Scholarship
A $1,000 award for students pursuing a study abroad program that connects with their education, personal development, and future goals. Next deadline: October 28, 2026.
Recommended version, live, then its HTML
<header class="hs-band hs-band--soft hs-page-head" data-section="hero">
<div class="hs-container">
<p class="hs-eyebrow">Honor Society® scholarships</p>
<h1 class="hs-heading hs-heading--h1 hs-heading--rule">Study Abroad Scholarship</h1>
<p class="hs-lead hs-page-head__lead">A $1,000 award for students pursuing a study abroad program that connects with their education, personal development, and future goals.</p>
<div class="hs-actions hs-page-head__actions">
<a class="hs-button" href="/study-abroad-scholarship-0" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="hero">Apply now</a>
<a class="hs-link" href="#requirements" data-ph-capture-attribute-cta="requirements" data-ph-capture-attribute-cta-loc="hero">See what you’ll need</a>
</div>
</div>
</header>
<section class="hs-band" data-section="award-facts">
<div class="hs-container">
<dl class="hs-award-facts">
<div class="hs-award-facts__item">
<dt class="hs-award-facts__label">Award</dt>
<dd class="hs-award-facts__value">$1,000</dd>
</div>
<div class="hs-award-facts__item">
<dt class="hs-award-facts__label">Next deadline</dt>
<dd class="hs-award-facts__value"><time datetime="2026-10-28">October 28, 2026</time></dd>
<dd class="hs-award-facts__note">Rolling: the 28th of every month</dd>
</div>
<div class="hs-award-facts__item">
<dt class="hs-award-facts__label">Membership</dt>
<dd class="hs-award-facts__value">Not required</dd>
<dd class="hs-award-facts__note">No purchase or payment is needed to apply or win.</dd>
</div>
</dl>
</div>
</section>The site has one version of these, and it already follows the decisions.
Credential
Gold Member Gold
One version today: the profile aside (.hs-member-card--credential, hs_user.profile.css:933). Compose it as
hs-card hs-credential: 4px honor-gold top bar (decoration, 2.4:1), gold-ink eyebrow (5.9:1), Didot title, two facts, links under
a hairline. One fix: fact labels move from slate 500 (3.7:1, fails at 12px) to slate (6.2:1). File: components/credential.css.
<section class="hs-card hs-credential" aria-labelledby="credential-title">
<p class="hs-eyebrow">Credential</p>
<h2 class="hs-card__title hs-credential__title" id="credential-title">Gold Member <span class="hs-tier-badge hs-tier-badge--gold">Gold</span></h2>
<dl class="hs-credential__facts">
<div><dt>Member since</dt><dd>March 2024</dd></div>
<div><dt>Articles</dt><dd>3</dd></div>
</dl>
<ul class="hs-credential__links">
<li><a class="hs-link" href="https://www.linkedin.com/profile/add" data-ph-capture-attribute-cta="linkedin_add" data-ph-capture-attribute-cta-loc="profile-credential">Add to LinkedIn</a></li>
</ul>
</section>