A. Homepage
Free to join
Turn your achievement into opportunity.
- CSS
0.72rem/700, 0.16em, uppercase, #1F2F6E- Size
- 11.5px
- Contrast
- 12.4:1 on white
Eyebrow spec
Decided: B
Which size, weight, tracking and colour does the label above a heading use?
Today on: A on / (homepage). B on the page head of /benefits, /membership-tiers, /certificate-and-frames, /faqs. C on /articles and the member profile cards. D on /my-membership. The ring size tool also uses 14px action gold on white (1.19:1), which fails, so it is not shown.
B. Page head
DecidedFree to join
Turn your achievement into opportunity.
- CSS
0.8125rem/600, 0.12em, uppercase, #596172- Size
- 13px
- Contrast
- 6.2:1 on white, 5.9:1 on soft
C. Gold ink
Free to join
Turn your achievement into opportunity.
- CSS
0.75rem/600, 0.12em, uppercase, #8A5A00- Size
- 12px
- Contrast
- 5.9:1 on white, 5.4:1 on plate
D. Hub
Free to join
Turn your achievement into opportunity.
- CSS
0.8125rem/700, 0.06em, uppercase, #8A5A00- Size
- 13px
- Contrast
- 5.9:1 on white
Secondary button style
Decided: D
What does an action look like when it is not the primary one, but a text link is too weak (a repeated card action, the second action in a dialog)?
Today on: No secondary style exists in the house rules. Today: B on /benefits (29 per page, .hs-bf-btn--outline); C on the editor page /ForProfessionals; white-fill secondaries on 7 editor-page heroes; the navy-outline “See more” pager on /articles.
A. No button: text link
Careers
Career Insider
Job listings, resume upload and Career Insider guidebooks from Vault.
- CSS
.hs-link: 600 navy, 2px #FAF053 underline- Height
- 24px line, not a tap-size control
- Contrast
- label 12.4:1
B. Grey outline (Benefits today)
Careers
Career Insider
Job listings, resume upload and Career Insider guidebooks from Vault.
- CSS
transparent; border 1.5px #CFD5E6; color #1F2F6E; hover navy fill- Height
- 38px
- Contrast
- label 12.4:1; border 1.5:1 on white
C. Navy outline
Careers
Career Insider
Job listings, resume upload and Career Insider guidebooks from Vault.
- CSS
transparent; border 1.5px #1F2F6E; color #1F2F6E- Height
- 40px
- Contrast
- label and border 12.4:1
D. Tint (proposed)
DecidedCareers
Career Insider
Job listings, resume upload and Career Insider guidebooks from Vault.
- CSS
.hs-button--secondary: fill and 1.5px border #EAF0FF, navy label; hover border navy. On navy: white 8% fill, white label- Height
- 40px (
--sm) or 48px - Contrast
- label 10.9:1 on #EAF0FF
Button sizes
Decided: B
How many button heights does the system carry?
Today on: Three gold sizes today: 51px on /, 48px on the page head of /benefits, /membership-tiers, /certificate-and-frames, 38px on /benefits cards and the blog.
A. One size
- CSS
- 48px:
12px 32px, 17px/600 - Note
- A 48px pill in every card is heavy in a grid of 30
B. Two sizes
Decided- CSS
- 48px default;
--sm40px:8px 24px, 16px/600 - Note
- 40px is the house minimum tap target
C. Three sizes (today)
- CSS
- 51px
14px 30px17px; 48px12px 28px; 38px10px 20px14.72px - Note
- The 51px and 48px steps look the same
Text link hover
Decided: B
What changes when the pointer is on a text link?
Today on: A on / (.hb-link) and /membership-tiers. B on the page head “Member sign in” link (/benefits, /faqs). C in the site footer (a.animate).
A. Colour and underline to navy deep
- CSS
- rest:
#1F2F6E, 2px #FAF053; hover: text and underline#172456 - Contrast
- navy to navy deep is 1.19:1: the text change is not visible
B. Underline only, to navy
Decided- CSS
- rest:
#1F2F6E, 2px #FAF053; hover: underline#1F2F6E, text unchanged. On navy: underline turns white - Contrast
- text 12.4:1 in both states
C. Gold bar grows from the left
- CSS
- rest: no underline; hover: 3px #FAF053 bar grows 0→100% (
background-size) - Note
- Needs a reduced-motion fallback
Link inside body copy
Decided: B
How does a link inside a paragraph stand out from the text around it?
Today on: The article body (/articles/honor-societies-and-changing-definition-achievement) uses the theme rule .content a: an underline in the text colour. Navy link text against ink body text is 1.04:1, so colour alone never marks a link.
A. Gold underline
Honor societies reflect this shift by aligning recognition with a more comprehensive understanding of success.
- CSS
text-decoration: underline 2px #FAF053; text-underline-offset: 0.2em; 400- Cue
- underline only: 1.19:1 against white
B. Gold underline and weight 500
DecidedHonor societies reflect this shift by aligning recognition with a more comprehensive understanding of success.
- CSS
- as A, plus
font-weight: 500; hover: underline navy - Cue
- two cues: underline and weight
C. Navy underline, gold on hover
Honor societies reflect this shift by aligning recognition with a more comprehensive understanding of success.
- CSS
text-decoration: underline 1px #1F2F6E; hover: #FAF053- Cue
- underline 12.4:1
Link card hover
Decided: B
What reacts when the pointer is on a card that is one link?
Today on: A on / (.hb-card) and the old magazine cards. B is not used yet. C is the literal VISUAL.md rule (“only its text label reacts: the gold underline turns navy”), not built anywhere.
A. Lift: navy border and a deeper shadow
- CSS
- hover:
border-color #1F2F6E; box-shadow 0 8px 24px rgba(31,47,110,.12) - Shadow
- a second card shadow
B. Border only, to navy
Decided- CSS
- rest: 1px #E6E8EF, shadow
0 1px 2px rgba(31,47,110,.06); hover:border-color #1F2F6E - Motion
- colour only, 200ms
C. Label only: gold underline turns navy
- CSS
- title: 2px #FAF053 underline at rest; hover: underline #1F2F6E; card unchanged
Tab and chip active state
Decided: B for chips, C for tabs
How does the current item in a row of tabs or filter chips show that it is current?
Today on: A on the category bar of /articles and the article page. B on the Articles tab filter of the member profile. C on the member profile tabs (Profile, Articles). The Benefits jump pills fill with the tier colour, a fourth version.
A. Gold fill
- CSS
- pill, 12px/700 uppercase; current:
background #FAF053, navy text - Contrast
- 10.4:1
B. Navy fill
Decided- CSS
- pill, 15px/600, 1px #E6E8EF, 40px tall; current:
background #1F2F6E, white text - Contrast
- 12.4:1
C. Navy underline
Decided- CSS
- 16px/600 slate; current: navy text,
3px #1F2F6Ebottom border - Contrast
- slate 6.2:1, navy 12.4:1
Neutral note (callout)
Decided: C (D stays the info status)
What does a plain note look like, when it is not a status message?
Today on: A on the editor pages /what-honorsocietyorg, /study-abroad-scholarship, /career-services, /society-leadership and 4 more (4–6px bars, 3 radii). C on /faqs (.hs-faq-help). D is the info status colour.
A. Cream and action gold (editor pages)
- CSS
#FFFDF5, 4px #FAF053 bar, radius 0 8px 8px 0- Bar
- 1.17:1 on cream: almost invisible
B. Plate and honor gold
- CSS
#FAF3E9, 4px #C9A227 bar- Bar
- 2.2:1 on plate
C. Soft and line-strong (FAQ)
Decided- CSS
#F7F8FB, 4px #D9DDE7 bar, slate icon, ink text- Text
- ink 12.2:1
D. Info surface and blue
- CSS
#EAF0FF, 4px #175CFF bar- Bar
- 4.6:1
Body text colour
Decided: A
Is running text ink or slate?
Today on: A (ink) on the homepage bands, the article body and the profile prose. B (slate) is the VISUAL.md palette entry for body text, and is used on page-head leads, card lines and FAQ answers.
A. Ink
DecidedSuccess is built on focus, balance and resilience. Honor Society® encourages a balanced approach to growth, so you stay on track toward your goals.
- CSS
color: #2B3142, 17px/1.7- Contrast
- 13.0:1 on white
B. Slate
Success is built on focus, balance and resilience. Honor Society® encourages a balanced approach to growth, so you stay on track toward your goals.
- CSS
color: #596172, 17px/1.7- Contrast
- 6.2:1 on white, 5.9:1 on soft
Page head H1 size on utility pages
Decided: A
Does a utility page (FAQ, ring sizer, contact) get a smaller H1 than other pages?
Today on: A is built: every page head (/benefits, /membership-tiers, /faqs, /certificate-and-frames) uses the hero H1 clamp. B was in the old house style only.
A. One H1 step
DecidedFrequently Asked Questions
Answers about joining Honor Society®, member benefits, scholarships and your account. If your question is not here, Member Services can help.
- CSS
clamp(2.25rem, 2.2vw + 1.1rem, 3.25rem)= 36→52px
B. Smaller utility H1
Frequently Asked Questions
Answers about joining Honor Society®, member benefits, scholarships and your account. If your question is not here, Member Services can help.
- CSS
clamp(1.75rem, 3.4vw, 2.25rem)= 28→36px
Settled
These follow the decisions already made, or the site has one version only. Each is shown once.
Primary, navy and on-navy buttons
Gold #FAF053, label navy deep (12.4:1), hover #F2E63A (11.4:1), glow kept. Navy: hover navy deep. On navy: white fill, navy label.
Marking the moment.
Heading and gold rule
Didot 700 only. One heading colour, navy: the article and profile use ink today, and ink to navy is 1.04:1. The rule is 56×4px, 2px radius.
Avery Example
Honor rule
Honor gold #C9A227 under member names and on credentials. Automatic on a plate band.
Class Ring
Recognize your journey.
Navy ground: treatment B
Token --hs-ground-navy, painted over flat navy. Body text 6.4:1 at the lightest corner, gold eyebrow 6.8:1.
White
Soft
Navy
Plate
Band grounds and container
White, soft, navy, plate. Padding clamp(2.5rem, 5vw, 4rem). Container at Bootstrap widths with a 12px gutter. No borders between bands.
Mentorship
Resume critiques, mock interviews and first-hand advice from people already in the role.
Card shape
8px radius, 1px #E6E8EF, padding 20px (24px from 768px). Shadow only on link cards.
Focus
3px action gold outline, 3px offset, plus a 1px navy ring for light grounds. One rule in base.css.
Status callouts
Info, success, warning, danger: tinted surface, 4px bar in the status colour, ink text. Blue only as a bar, never as small text.