# Honor Society brand system: full docs > Every component doc, then every page recipe. Version 0.6.4. Index: https://brand.honorsociety.org/llms.txt. Bundled CSS: https://brand.honorsociety.org/brand.css. Rules for recipes: - Recipes are inspiration, not templates. A recipe shows a proven page shape: start from the closest one, choose the components that fit the content, combine them as needed and leave out what does not fit. Band order is not fixed. - Only the component rules are fixed: grounds rotate (no two neighbouring bands share one), one gold element per viewport (the site header’s Join button is chrome and does not count), headings in order under one h1, marks (Honor Society® on the first visible reference), and the rules on each component page. - A page built from the body alone starts with one head band that holds the page's only h1: the page head, the hero or the award hero. Copy its snippet whole, breadcrumb included where the component has one. Every other band opens with h2. - The H1 names the page. Each page has its own title, description and share image. # Button > The pill for the one action a band asks for, in gold primary, navy, on-navy and secondary styles. - Block class: `.hs-button` - CSS: `components/button.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: Primary, Navy, On navy, Secondary, Secondary on navy, Small, Full width, Disabled, Action row - HTML page: https://brand.honorsociety.org/components/button/ ## What it is A pill for the one action a band asks for. `.hs-button` alone is the gold primary. Every other route is a text link. ## When to use - The one action a band asks for: `Start Free Membership` in a hero, `Apply now` in a CTA band or in the award hero card. - The submit control of a form, as a ` ``` ### Disabled Use the native `disabled` on a button. On a link, use `aria-disabled="true"` and remove the `href`. ```html ``` ### Action row One button, then at most one text link. Below 576px the button is full width and the link sits under it, centred. ```html
Start Free Membership Member sign in
``` --- # Text link > The text link for every route that is not the band’s one button: navy, weight 600, gold underline. - Block class: `.hs-link` - CSS: `components/link.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: On light, On navy, Inline, in prose - HTML page: https://brand.honorsociety.org/components/link/ ## What it is Every route that is not the band’s one button. Navy (white on navy), 600 weight, 2px action-gold underline. Hover changes only the underline. ## When to use - The second route next to a button, in the same `.hs-actions` row: `Member sign in` after `Start Free Membership`. - The one route of a band that has no button, such as `Compare Professional Track™ Options`. - The route under the Apply button in the award hero card. ## When not to use - The band’s one action: use a [Button](/components/button/). - Two or more links together: use a [Link list](/components/link-list/). Stacked gold underlines break “one gold element per viewport”. - “On this page” links: use the [Anchor nav](/components/anchor-nav/). - A link inside a paragraph: write a plain `` in [Prose](/components/prose/). - A repeated action in a card or a dialog: use `.hs-button--secondary` ([Button](/components/button/)). A text link is not a tap-size control. ## Rules - Use `.hs-link` with no modifier on every ground. The ground sets the colour through `--hs-ctx-link`. - Put at most one `.hs-link` after the button in an `.hs-actions` row. - Write the label as a verb plus the noun the visitor gets. No “Click here” and no “Learn more”. - Give every route `data-ph-capture-attribute-cta` and `data-ph-capture-attribute-cta-loc` (the band’s `data-section` slug). - Inside `.hs-prose`, leave the class off. The prose rule styles a plain ``. ## Accessibility - The text is navy on white, 12.4:1, at rest and on hover. Hover changes only the underline: to navy on light, to white on navy. - The 2px gold underline shows at rest, so a touch user sees the link without hover. - In prose a link carries two cues, the gold underline and weight 500, because navy against ink text is 1.04:1. - `aria-current` on a `.hs-link` sets the underline to the hover colour. - Focus uses the shared ring from `base.css`. `prefers-reduced-motion: reduce` removes the underline transition. ## Variants ### On light Hover turns the underline navy. ```html Compare Professional Track™ Options ``` ### On navy No modifier: the navy ground sets the colours. Hover turns the underline white. ```html See it in the Member Shop ``` ### Inline, in prose Links inside `.hs-prose` get a text-decoration underline instead, so they wrap across lines. See Prose below. ```html

Honor societies reflect this shift by aligning recognition with a more comprehensive understanding of success.

``` --- # Eyebrow > A short uppercase label above a heading; the ground sets its colour. - Block class: `.hs-eyebrow` - CSS: `components/eyebrow.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: On light, On navy, On plate - HTML page: https://brand.honorsociety.org/components/eyebrow/ ## What it is A short label above a heading. Write it in sentence case; CSS uppercases it. 13px, 600, 0.12em. The colour follows the ground. ## When to use - Above the H1 of a page head, above a band’s opening h2, and above the h2 of a CTA band. - On a plate, above the member’s name. - At the top of a light panel, such as “Next deadline” in the award hero card. ## When not to use - The heading of a band: write a [Heading](/components/heading/). The eyebrow only labels it. - A tier name: use the [Tier badge](/components/tier-badge/). - The label of “On this page” links: the [Anchor nav](/components/anchor-nav/) has its own `__label`. ## Rules - Write it in sentence case. CSS uppercases it. - Put it directly above the heading it labels, as `

`. - Keep it to a short label, not a sentence. - Use no colour modifier. The ground sets `--hs-ctx-eyebrow`: slate on white and soft, action gold on navy, gold ink on plate. - Keep gold ink on recognition grounds. On white it reads as an honor mark. ## Accessibility - CSS uppercases the text, so a screen reader says words, not letters. - Contrast: slate 6.2:1 on white and 5.9:1 on soft; action gold 10.5:1 on flat navy and 6.8:1 at the navy gradient’s lightest corner; gold ink 5.4:1 on plate. - A `

` keeps the label out of the heading outline. ## Variants ### On light Slate, 6.2:1. ```html

Participation tiers

``` ### On navy Action gold, 10.5:1. ```html

Beyond recognition

``` ### On plate Gold ink, 5.4:1. ```html

Member recognition

``` --- # Heading > Didot 700 headings at the h1, h2 and h3 steps, with an optional gold or honor rule. - Block class: `.hs-heading` - CSS: `components/heading.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: H1 with gold rule, H2 with gold rule, eyebrow and lead, H2 centred, H2 on navy, H3, Honor rule - HTML page: https://brand.honorsociety.org/components/heading/ ## What it is Didot 700. The size class (`--h1`, `--h2`, `--h3`) is separate from the element, so the outline stays correct. `--rule` adds the 56×4 bar under a page H1 or a band’s opening H2. ## When to use - The H1 of a page head, with `--rule`. - A band’s opening h2 in `.hs-band__head`, with `--rule`. - An h3 inside a band, with no rule. - A member’s name or a credential on a recognition ground, with `--honor`. ## When not to use - A separator between bands: change the ground of the [Band](/components/band/). The rule is a brand mark, not a separator. - The title of a group with a count, such as a directory letter: use the [Group heading](/components/group-head/). - A figure that proves a claim: use the [Stat](/components/stat/). - The label above a heading: use the [Eyebrow](/components/eyebrow/). ## Rules - Pick the element for the outline, then the size class for the look. A band opens with an h2, even where it looks like an h1. Use h3 only inside a band. - Use `--rule` only under a page head H1 or a band’s opening h2. The titles of the hero, the CTA band and the award hero take no rule: the gold button is the accent there. - Use `--honor` for recognition only (member names, credentials), and always with `--rule`. On a plate band the rule is honor gold without the modifier. - Use no colour modifier. The ground sets the colour: navy on light, white on navy. Keep the weight at 700: Didot has one bold cut. - Write ® and ™ as the plain character (`®`, `™`), in headings and body text alike. Never wrap them in ``. The plain glyph keeps the type’s own size and weight. - Put the one paragraph under a heading in `.hs-lead`. ## Accessibility - The size class is separate from the element, so the document outline stays correct. - The rule is an `::after` pseudo-element. A screen reader does not read it. - Navy on white is 12.4:1. On navy the heading is white. ## Variants ### H1 with gold rule The page head H1. ```html

Honor Society® Membership Tiers

``` ### H2 with gold rule, eyebrow and lead A band’s opening head. ```html

Free to join

Turn your achievement into opportunity.

Membership is free. Professional Track™ is an optional upgrade.

``` ### H2 centred For a band whose content is centred (tier cards). ```html

Honor Your Ambition™

``` ### H2 on navy No modifier: white heading, gold rule. ```html

Support that comes with membership.

``` ### H3 Inside a band only. No rule. ```html

Mentorship

``` ### Honor rule Recognition only: a member’s name, a credential. `--honor` needs `--rule`. On a plate band the rule is honor gold without the modifier. The name is a sample. ```html

Honor Society® member

Avery Example

``` --- # Band and container > A full-width section with one ground and one idea; a page is a stack of bands. - Block class: `.hs-band` - CSS: `components/band.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: White, Soft, Navy (treatment B), Plate, Bleed, Anchor nav in a compact band - HTML page: https://brand.honorsociety.org/components/band/ ## What it is A page is a stack of bands. A band is a full-width `
` with one ground and one idea; `.hs-container` holds the content at Bootstrap widths. A change of ground is the only separator. Every band carries a `data-section` slug. `.hs-band--compact`: 16px top and bottom, 24px from 48rem, for a band that holds one row (the anchor nav). Combine it with a ground modifier. ## When to use - Every section of every page, one idea per band. - `--soft` to rotate with white. `--navy` for the hero, the closing CTA band and support bands. `--plate` for member identity, the certificate and credentials. - `--bleed` for a band inside a narrower page column, such as Drupal `#content`. - `--compact` for a band that holds one row: the anchor nav or a link row. ## When not to use - A border, rule or gold hairline between bands: change the ground instead. - A light panel inside a band: use a [Card](/components/card/) or a [Callout](/components/callout/). - The opening band: compose the [Page head](/components/page-head/), the [Hero](/components/hero/) or the [Award hero](/components/award-hero/) on a band. - The closing band: use the [CTA band](/components/cta-band/). ## Rules - Mark up each band as `
` with a `data-section` slug that names the idea (`hero`, `what-you-get`). The slug is the analytics contract: a rename breaks history. The `data-ph-capture-attribute-cta-loc` of each route in the band repeats it. - Put the content in `.hs-container`. It mirrors the Bootstrap `.container` widths, so every edge lines up with the header. - Give a band at most one ground modifier. `--compact` and `--bleed` combine with it. - Open the band with `.hs-band__head`: an optional eyebrow, one h2, an optional lead. - Blocks after the band head (card grid, prose, callout, steps, link row) sit 24px apart (`--hs-space-5`) with no extra class. Do not add margins between them. A container that holds an h1/h2 or eyebrow directly (hero, page head, CTA band, stat) keeps its own spacing. - Load `band.css` before `page-head.css`, `hero.css` and `award-hero.css`. They have the same specificity, so source order sets the padding. ## Accessibility - Each ground sets the `--hs-ctx-*` properties. Headings, eyebrows, links and cards read them, so they keep their contrast on every ground with no modifier. - On navy, body text is white 86%: 6.4:1 at the gradient’s lightest corner. - `--navy` paints the gradient over flat navy. Where a client strips gradients (email, some editors), the text still sits on navy. - `base.css` gives every `[id]` a `scroll-margin-top` of the header height plus 16px, so an anchor target clears the site header. ## Variants ### White The default ground. ```html

Free to join

Turn your achievement into opportunity.

Put your achievements, goals and potential in one place.

``` ### Soft `#f7f8fb`. Rotates with white. ```html

Why members join

Honor Your Ambition™

Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.

``` ### Navy (treatment B) Gradient over flat navy (`--hs-ground-navy`). Sets white headings, gold eyebrow and rule, 86% white text for everything inside. ```html

Beyond recognition

Support that comes with membership.

Success is built on focus, balance and resilience. Honor Society® encourages a balanced approach to growth, so you stay on track toward your goals.

``` ### Plate Recognition grounds only: member identity, certificate, credentials. Gold-ink eyebrow, honor-gold rule. ```html

Member recognition

Display your membership.

Display your membership with an official certificate, then choose a diploma-quality frame or engraved keepsake to showcase it.

``` ### Bleed For a band inside a narrower page column (Drupal `#content`): the ground spans the viewport, the content keeps the column edges. Here the frame clips it. ```html

We’re always here to help

Member Services answers questions about membership, benefits, billing and your account.

``` ### Anchor nav in a compact band Under the award hero, `.hs-award-hero + .hs-band` still pads back the card overhang. ```html
``` --- # Card > A bordered 8px panel for one named item; the link form makes the whole card one route. - Block class: `.hs-card` - CSS: `components/card.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: Basic, Link cards in a grid, With a tag, With a small action, Media, On navy, Award, Offer, Offer, locked, Article, Place - HTML page: https://brand.honorsociety.org/components/card/ ## What it is A bordered 8px panel. Basic cards have no shadow. A link card is one `` around the whole card, with the card shadow; hover turns the border navy. No lift, no chevron, no “Learn more”. ## When to use - A grid of what-you-get items, each a named benefit plus one sentence (homepage, hub). - Routes to sibling pages, one card per route, in a `.hs-card-grid`. - A catalog item with its own repeated action, as on the Benefits catalog (basic card plus a small secondary button). - An article or story teaser with an image (`--media` with `--link`). - Short panels on a navy band: the card reads the ground with no modifier. - A catalog result: a scholarship (`--award`), a benefit (`--offer`), an article (`--article`), a university (`--place`). See [R8 Catalog](/recipes/r8-catalog/). ## When not to use - One member in a directory: use [Member card](/components/member-card/). - One outside rating with its source and date: use [Rating](/components/rating/). - Two memberships side by side: use [Plan compare](/components/plan-compare/). - A numbered procedure: use [Steps](/components/steps/). Numbered cards that lead nowhere look clickable. - A note set apart from the copy: use [Callout](/components/callout/). ## Rules - Write a link card as one `` around the whole card. Put no other link, button, chevron or "Learn more" inside it. - `.hs-card--award` is a flex column: the value slot keeps a minimum height and the foot pins to the bottom, so titles and foots line up across a grid row when a card has no value or meta. - A search button in a page head is the band's gold button (see [Search](/components/search/)). The site header's Join button is chrome and does not count. - A card with its own action is a basic `.hs-card`, not a link card. Give the action `.hs-button--secondary .hs-button--sm`. - Give each card link `data-ph-capture-attribute-cta` (the destination name) and `data-ph-capture-attribute-cta-loc` (the band's `data-section` slug). - Content order: optional `.hs-card__icon` or eyebrow, `.hs-card__title`, `.hs-card__text`, then an optional `.hs-card__tag` or action. In `hs_html_page` body HTML, leave out the SVG icon: its validator has no ``. - Shadow: a basic card and every other plain panel have no shadow. A link card takes `--hs-shadow-card`. A panel that floats over two bands, such as the [Award hero](/components/award-hero/) deadline card or a form card that overlaps two bands, takes `--hs-shadow-dialog`. - Put cards in `
    `: one column, two from 36rem, three from 62rem with `--3`. The `
  • ` can be the card, or hold it. - Catalog cards share one anatomy: type label or value, title, one line of facts, short text, tags, then the foot with a status or tier badge and at most one action. Leave out any slot with no data. - Slots: `p.hs-card__value` (the one key figure: "$2,500", "20% off"), `p.hs-card__meta` or `ul.hs-card__meta` (one row of facts, joined by a CSS dot), `div.hs-card__logo` > `img` (the partner's own logo, never redrawn; every logo fills the same 144 x 56px tile with `object-fit: contain`, so logos read one size), `ul.hs-card__tags` > `li.hs-tag`, `div.hs-card__foot`. - `--award` is a link card: the value first, then the title. The amount comes from data; with no amount, put an eyebrow ("Scholarship") in its place. Never invent a figure. When the value is parsed from the start of the name, the card title drops that amount; the detail page H1 keeps the full name. - `--offer` is a basic card with one small action, so the benefit page keeps its own route and the card can carry the tier. Add `is-locked` when the benefit needs a tier above the viewer's: the action routes to the tier page and a `--locked` [Status](/components/status/) names the tier. - `--article` combines with `--link` and `--media`; the image is 16:9. `--place` is a compact link card with the location first in the meta. - Write card copy as a named benefit plus one sentence. Use `.hs-card__tag` only for a status the reader must not miss ("Optional upgrade"), in sentence case: CSS uppercases it. ## Accessibility - The title is a heading one level under the band heading (`h3` under the band's `h2`). - Icons take `aria-hidden="true" focusable="false"`: the title names the card. - A `--media` image that only illustrates the title takes `alt=""`. Otherwise its `alt` describes the image and does not repeat the title. - `.hs-card--link:focus-visible` restates the gold outline and navy ring, because the card shadow would replace the base focus ring. - Hover changes only the border colour, so the card does not move. Reduced motion removes the 200ms border transition. - A link card is a real ``, so it works without JavaScript. ## Variants ### Basic A panel: information, no link. ```html

    Recognition profile

    Put your achievements, goals and potential in one place.

    ``` ### Link cards in a grid One column, two from 576px, three from 992px with `--3`. Hover a card to see the navy border. ```html     ``` ### With a tag A tag names a status the reader must not miss on a scan. ```html

    Professional Track™

    Add enhanced career and recognition features when useful.

    Optional upgrade     ``` ### With a small action A basic card with its own small secondary button, as on the Benefits catalog. The card itself is not a link here. ```html

    Careers

    Career Insider

    Job listings, resume upload and Career Insider guidebooks from Vault.

    ``` ### Media Image to the edges, 4:3, `object-fit: cover`. Combine with `--link`. The image path is a placeholder. ```html

    Articles

    Honor Societies and the Changing Definition of Achievement

    Achievement in higher education is no longer defined by a single measure.

     ``` ### On navy No modifier: the card reads the navy ground’s surface (white 8%) and line (white 24%). ```html

    • Mentorship

      Resume critiques, mock interviews and first-hand advice from people already in the role.

    • Scholarships

      Merit, service and study abroad awards, plus a free directory of more than 1,000 partner scholarships.

    • Career resources

      Job listings, resume upload and Career Insider guidebooks from Vault.

    ``` ### Award A scholarship in a catalog: value first, title, facts, status. One ``. Fictional sample. ```html ``` ### Offer A benefit: partner logo, value, partner name, tier, one small action. The logo is a placeholder. ```html

    20% off

    Example Learning Co.

    Online test prep courses for the GRE, GMAT and LSAT.

    Ready to use View benefit
    ``` ### Offer, locked A benefit above the viewer's tier. The logo greys; the action routes to the tier page. ```html

    $50 off

    Example Travel Co.

    A discount on a first booking of three nights or longer.

    Bronze and up See tiers
    ``` ### Article A media link card with a 16:9 image and a facts line. ```html

    Article

    How to write a scholarship essay

    • Avery Example
     ``` ### Place A university: compact link card, location first. ```html ``` --- # Page head > The soft opening band of a conversion or utility page: eyebrow, ruled H1, lead, optional action row. - Block class: `.hs-page-head` - CSS: `components/page-head.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: With actions (Visitor), Without actions, With breadcrumb - HTML page: https://brand.honorsociety.org/components/page-head/ ## What it is The light opening band of every page except the homepage. Compose it on a soft band. Eyebrow, H1 with the gold rule, lead, then an optional action row. No image, no split, no trust strip. ## When to use - The opening band of a conversion or utility page: benefits, membership tiers, certificate and frames, FAQs. - An article page, with the byline (`.hs-page-head__byline`) in place of the lead. - A page head inside a Drupal page column, with `hs-band--bleed` added. ## When not to use - The homepage or a landing page: use the [Hero](/components/hero/). - One award page: use the [Award hero](/components/award-hero/). - A member page: open with the [Plate](/components/plate/). - “On this page” links: put the [Anchor nav](/components/anchor-nav/) in its own band under the page head. ## Rules - Compose it as `class="hs-band hs-band--soft hs-page-head"` with `data-section="hero"`. Load `page-head.css` after `band.css`. - A page built from the body alone starts with this band. Copy the snippet whole, with the breadcrumb when the page sits three or more steps deep. It holds the page’s only `h1`; every other band opens with `h2`. - Keep this order: an optional [Breadcrumb](/components/breadcrumb/) or [Back link](/components/back-link/), the eyebrow, `.hs-heading--h1.hs-heading--rule`, `.hs-lead.hs-page-head__lead`, an optional `.hs-actions.hs-page-head__actions`. - A catalog page (a directory, site search) puts one `.hs-search.hs-search--large` after the lead in place of the action row. Its button is the band's one gold button. The site header's Join button is chrome and does not count. See [Search](/components/search/). - Put nothing else in it: no image, no split, no trust strip, no free/paid note. The H1 and the lead take the full container width; an empty right side on desktop is intended. - The action row holds one gold button and, for a Visitor, a `Member sign in` text link. Each route carries `data-ph-capture-attribute-cta-loc="hero"`. - The button follows the viewer state (Visitor, Free Member, Paid Member). A state with nothing to offer gets no action row. - In Drupal the theme hook is `hs_core_page_head`; keep the `hs-page-head` class. When the page head carries the membership button, add the page to the membership banner’s suppression list. ## Accessibility - The H1 is the page’s main heading. The gold rule is an `::after` and is not read. - The eyebrow and the lead are slate on soft: 5.9:1. - The button and the link use the shared focus ring. - It is CSS only, so it works without JavaScript. ## Variants ### With actions (Visitor) The button follows the viewer state; a state with nothing to offer gets no action row. ```html

    Participation tiers

    Honor Society® Membership Tiers

    Eligible members join as Basic Members at no cost. Bronze, Silver, Gold, and Signature are optional paid tiers with added benefits, discounts, and priority services.

    Start Free Membership Member sign in
    ``` ### Without actions A member who already holds what the page offers. ```html

    Member recognition

    Honor Society® Certificate & Frames

    Display your membership with an official certificate, then choose a diploma-quality frame or engraved keepsake to showcase it.

    ``` ### With breadcrumb A page three steps deep, built from the body alone. The breadcrumb comes first; its links carry the PostHog attributes with `cta-loc="hero"`. ```html

    Honor Society® scholarships

    Scholarship Directory

    Scholarships from other providers, each with its own eligibility, deadline and application.

    ``` --- # Hero > The navy opening band of an acquisition page: thesis H1, lead, one gold button, one text link. - Block class: `.hs-hero` - CSS: `components/hero.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: Hero - HTML page: https://brand.honorsociety.org/components/hero/ ## What it is The navy opening band of an acquisition page. Treatment B ground. The H1 is the thesis and has no rule: the gold button is the accent. ## When to use - The opening band of the homepage or a landing page. - A page whose one job is account creation, with `Start Free Membership` as the primary route. ## When not to use - A conversion or utility page: use the [Page head](/components/page-head/). - One award page: use the [Award hero](/components/award-hero/). - The closing band: use the [CTA band](/components/cta-band/). - A member page: use the [Plate](/components/plate/). ## Rules - Compose it as `class="hs-band hs-band--navy hs-hero"` with `data-section="hero"`. Load `hero.css` after `band.css`. - A page built from the body alone starts with this band. Copy the snippet whole. The hero has no breadcrumb: it opens the homepage or a landing page. It holds the page’s only `h1`; every other band opens with `h2`. - Keep this order: the H1 (`.hs-heading--h1.hs-hero__title`, no `--rule`), `.hs-hero__lead`, then `.hs-actions.hs-hero__actions` with one gold `.hs-button` and at most one `.hs-link`. - The H1 states the thesis and wraps at 22ch. On the homepage it is “Honor Society® is where achievement becomes opportunity.” - Make `Start Free Membership` the primary route, never a paid tier. Show no prices and no tier names: Professional Track™ is the only membership name. - Give each route the PostHog attributes, with `data-ph-capture-attribute-cta-loc="hero"`. - Put the trust bar directly under the hero. ## Accessibility - The H1 is the page’s main heading. - The lead is white 86% on navy: 6.4:1 at the gradient’s lightest corner. The gold button label is 12.4:1. - The gradient sits over flat navy, so the text keeps its contrast where a client strips gradients. - It is CSS only, so it works without JavaScript. ## Variants ### Hero Homepage copy. ```html

    Honor Society® is where achievement becomes opportunity.

    Join free to build your recognition profile and access scholarship opportunities, member benefits, mentorship, career resources and official graduation regalia. Professional Track™ is available when you want additional tools and benefits.

    Start Free Membership Member sign in
    ``` --- # Callout > A light panel with a 4px bar that sets a note or a status message apart from the copy. - Block class: `.hs-callout` - CSS: `components/callout.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-1.html - Variants: Note (neutral), Info, Success, Warning, Danger, On navy - HTML page: https://brand.honorsociety.org/components/callout/ ## What it is A note set apart from the copy. The title carries the meaning; the colour and the icon repeat it. Body text is ink on every surface. A callout stays light on any ground. ## When to use - A plain help note that is not a status, such as "We're always here to help" on a FAQ page (base `.hs-callout`). - A condition the reader must meet first, such as "Your certificate needs an active membership" (`--info`). - A confirmation after an action, such as a saved profile (`--success`). - A risk the reader must avoid, such as printing the ring size sheet at the wrong scale (`--warning`). - A form that failed: a danger callout at the top of the form, with one link per error to its field (`--danger`). ## When not to use - A short condition, source or "as of" line under content: use [Fine print](/components/fine-print/). - Legal or participation terms: use [Disclosure](/components/disclosure/). - A member testimonial: use [Quote](/components/quote/). - A list with nothing in it yet: use [Empty state](/components/empty-state/). ## Rules - Markup: `