# Honor Society brand system

> Design tokens, components and page recipes for HonorSociety.org. Plain HTML and CSS: copy the snippets and tokens into hs_theme (Drupal 7), Laravel, Sulu, the Shopify theme or the Zendesk Guide theme. Version 0.6.4.

Rules for agents:

- Fetch the .md link of a component or recipe: it holds the rules and the exact HTML in one request.
- Copy snippets as they are. Change text, URLs and data-ph-capture-attribute-cta values; keep classes and structure.
- Classes use one prefix, hs-, in BEM. Tokens are --hs-* custom properties; never write a raw hex.
- hs_html_page bodies use classes only: no <script>, no inline style.
- Sample people are fictional and images under /placeholders/ are placeholders: replace both.
- 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.

## Start here

- [Home](https://brand.honorsociety.org/): what this site is and how to use it
- [Tokens](https://brand.honorsociety.org/tokens/): colours, type, spacing, radii, shadows and layout, rendered from tokens.json
- [Platform mapping](https://brand.honorsociety.org/platforms/): how the tokens reach hs_theme, Laravel, Sulu, Shopify and Zendesk Guide

## Files

- [brand.css](https://brand.honorsociety.org/brand.css): tokens, base and every component in load order; no fonts
- [brand.js](https://brand.honorsociety.org/brand.js): every component script in one file
- [tokens.css](https://brand.honorsociety.org/tokens.css): the :root block of --hs-* custom properties
- [tokens.json](https://brand.honorsociety.org/tokens.json): every token, resolved, keyed by property name
- [llms-full.txt](https://brand.honorsociety.org/llms-full.txt): every component and recipe doc in one file

## Components: Page structure

- [Band and container](https://brand.honorsociety.org/components/band.md): A full-width section with one ground and one idea; a page is a stack of bands.
- [Page head](https://brand.honorsociety.org/components/page-head.md): The soft opening band of a conversion or utility page: eyebrow, ruled H1, lead, optional action row.
- [Hero](https://brand.honorsociety.org/components/hero.md): The navy opening band of an acquisition page: thesis H1, lead, one gold button, one text link.
- [CTA band](https://brand.honorsociety.org/components/cta-band.md): The navy, centred closing band of a page: it names the product and offers one action.
- [Award hero](https://brand.honorsociety.org/components/award-hero.md): The navy opening band of one award page: name, facts, and a deadline card with the Apply button.
- [Group heading](https://brand.honorsociety.org/components/group-head.md): The title and computed count of one group inside a band, such as a letter in a directory.
- [Detail layout](https://brand.honorsociety.org/components/detail.md): The body of an item page: a main column and a key-facts aside that sticks on desktop and comes first on phones.
- [Utilities](https://brand.honorsociety.org/components/utilities.md): Single-purpose classes that sit on any element, such as hiding a feature on phones.

## Components: Type and text

- [Text link](https://brand.honorsociety.org/components/link.md): The text link for every route that is not the band’s one button: navy, weight 600, gold underline.
- [Eyebrow](https://brand.honorsociety.org/components/eyebrow.md): A short uppercase label above a heading; the ground sets its colour.
- [Heading](https://brand.honorsociety.org/components/heading.md): Didot 700 headings at the h1, h2 and h3 steps, with an optional gold or honor rule.
- [Prose](https://brand.honorsociety.org/components/prose.md): The wrapper for long-form body copy: articles and editor pages, styled by element with no classes inside.
- [Figure](https://brand.honorsociety.org/components/figure.md): An image at full column width with an optional caption, for templates and article bodies.
- [Fine print](https://brand.honorsociety.org/components/fine-print.md): A short 14px muted note under content: conditions, sources and “as of” lines.
- [Byline](https://brand.honorsociety.org/components/byline.md): Who wrote a piece and when: a 40px avatar, the author name as a link, and the date.

## Components: Actions

- [Button](https://brand.honorsociety.org/components/button.md): The pill for the one action a band asks for, in gold primary, navy, on-navy and secondary styles.

## Components: Navigation

- [Anchor nav](https://brand.honorsociety.org/components/anchor-nav.md): “On this page” links to the bands below, in their own band directly under the page head.
- [Tabs](https://brand.honorsociety.org/components/tabs.md): Switches between sibling views of one subject, such as a member’s Profile and Articles, each at its own URL.
- [Filter chips and tags](https://brand.honorsociety.org/components/chips.md): Filter chips narrow one list by category; tags show static labels such as a skill or a language.
- [Load more](https://brand.honorsociety.org/components/load-more.md): One navy button under a card grid that shows the next page of cards, with the count above it.
- [Breadcrumb](https://brand.honorsociety.org/components/breadcrumb.md): Shows a trail of three or more steps above the eyebrow in the page head.
- [Numbered pager](https://brand.honorsociety.org/components/pager.md): Numbered links between the pages of a long list, each page at its own URL.
- [Link list and link row](https://brand.honorsociety.org/components/link-list.md): Two or more text links with no button: a vertical list of routes, or a short row of links.
- [Back link](https://brand.honorsociety.org/components/back-link.md): One route up to the parent page, above the eyebrow, in place of a two-step breadcrumb.
- [Social links](https://brand.honorsociety.org/components/social.md): Links to Honor Society’s own LinkedIn, Instagram, Facebook and YouTube channels.
- [Results bar](https://brand.honorsociety.org/components/results-bar.md): The line above a catalog's results: the count as a status line, the sort, and the active filters as removable chips.

## Components: Content blocks

- [Card](https://brand.honorsociety.org/components/card.md): A bordered 8px panel for one named item; the link form makes the whole card one route.
- [Callout](https://brand.honorsociety.org/components/callout.md): A light panel with a 4px bar that sets a note or a status message apart from the copy.
- [Quote](https://brand.honorsociety.org/components/quote.md): A member testimonial in Didot italic with a CSS opening mark; the card form fills a review grid.
- [Stat](https://brand.honorsociety.org/components/stat.md): A large checkable figure in Didot that anchors a navy band or a row of two to three figures.
- [Steps](https://brand.honorsociety.org/components/steps.md): A numbered procedure where order matters, with CSS numerals in navy rings.
- [FAQ](https://brand.honorsociety.org/components/faq.md): Questions with their answers; an open list by default, an accordion for long sets at a page foot.
- [Table](https://brand.honorsociety.org/components/table.md): A data table, or a tier comparison table, in a white panel that scrolls sideways on its own.
- [Empty state](https://brand.honorsociety.org/components/empty-state.md): What an empty list shows: one line on what is missing, one slate line, and the one action that fills it.
- [Disclosure](https://brand.honorsociety.org/components/disclosure.md): Legal and participation terms in their own quiet 14px band, after the FAQ and before the CTA band.
- [Plan compare](https://brand.honorsociety.org/components/plan-compare.md): Two memberships side by side as equal cards: the free membership first, the optional upgrade second.
- [Video facade](https://brand.honorsociety.org/components/video.md): A click-to-load video: a poster with a play button that swaps in the YouTube player on click.
- [Status](https://brand.honorsociety.org/components/status.md): A small pill that states where an item stands: open, closing soon, closed, new, locked or ready to use.
- [Result](https://brand.honorsociety.org/components/result.md): One row in a list of search results of mixed types: type label, title link, path and a snippet with the match in bold.
- [Facts](https://brand.honorsociety.org/components/facts.md): The key facts of one item in a bordered panel, with its one primary action and an optional note.

## Components: Recognition and people

- [Recognition plate](https://brand.honorsociety.org/components/plate.md): The cream recognition band that opens a member page, with the member’s name as the page H1.
- [Credential card](https://brand.honorsociety.org/components/credential.md): A card that states a member’s standing: the tier, two facts and the member’s links.
- [Tier badge](https://brand.honorsociety.org/components/tier-badge.md): The tier name as a small solid pill in the tier colour, on the credential card and in lists.
- [Avatar](https://brand.honorsociety.org/components/avatar.md): A member’s photo or initials in a circle, in three sizes: 40px, 64px and a fluid 112–184px.
- [Member card](https://brand.honorsociety.org/components/member-card.md): One member or scholarship recipient in a directory, as a horizontal card with avatar, Didot name and meta.
- [Rating proof card](https://brand.honorsociety.org/components/rating.md): One outside rating with its figure, source and date, linked to the live vendor profile.
- [Leader profile](https://brand.honorsociety.org/components/leader.md): One person in the society’s leadership: a 4:5 portrait beside the name, the role and the biography, or the text alone when no portrait exists.

## Components: Forms and controls

- [Form](https://brand.honorsociety.org/components/form.md): Labels, controls, checks, errors, the form alert and the password field for every form a member fills in.
- [Code box](https://brand.honorsociety.org/components/code-box.md): Shows the coupon or promotion code a member copies after they redeem a benefit.
- [Dialog](https://brand.honorsociety.org/components/dialog.md): A native modal for a short edit form or a confirm that keeps the member on the page.
- [Auth card](https://brand.honorsociety.org/components/auth-card.md): The one centred column of an account page: a bordered card with the heading, the form and the help line, and one quiet line under it.
- [Form link, divider and support note](https://brand.honorsociety.org/components/form-note.md): The quiet routes around a form, the hairline under it and the one line that says where to get help.
- [Confirmation panel](https://brand.honorsociety.org/components/confirmation-panel.md): What a page shows in place of its form after the form sent something: what happened, where it went, the next step.
- [Search](https://brand.honorsociety.org/components/search.md): One search field and its button in a GET form, for site search and the head of a catalog.
- [Filter](https://brand.honorsociety.org/components/filter.md): The filter panel above a catalog: one row of selects on wide screens, a Filters disclosure on phones, one GET form.

## Recipes

- [R1 Hub landing](https://brand.honorsociety.org/recipes/r1-hub-landing.md): A hub that lists a family of child pages in groups. Grouped link cards, steps, stat, recipient cards, FAQ.
- [R2 Award detail](https://brand.honorsociety.org/recipes/r2-award-detail.md): One award: award hero with amount and deadline, requirements, steps, recipients, related awards, FAQ.
- [R3 Directory](https://brand.honorsociety.org/recipes/r3-directory.md): A grouped list of people. Collection cards, letter groups of member cards, profile steps, FAQ. Build it in code.
- [R4 Trust page](https://brand.honorsociety.org/recipes/r4-trust-page.md): One question, answered first, then the proof: outside ratings with dates and sources, identity, terms, FAQ.
- [R5 Membership explainer](https://brand.honorsociety.org/recipes/r5-membership-explainer.md): What membership gives, free and paid side by side, how to join, a member quote, FAQ.
- [R6 Audience and about page](https://brand.honorsociety.org/recipes/r6-audience-page.md): Goals as links, one resource card per goal, free and paid side by side, steps, FAQ.
- [Standard article](https://brand.honorsociety.org/recipes/article.md): Page head with category and byline, lead image, body in prose: headings, lists, links, blockquote, table, figure.
- [R7 Account pages](https://brand.honorsociety.org/recipes/r7-account-pages.md): Sign in, password reset, one-time login, change password, change email and the sign-in-to-continue state, each in one centred auth card.
- [R8 Catalog](https://brand.honorsociety.org/recipes/r8-catalog.md): A filterable list: page head with search, filter panel, results bar, card grid, pager, a no-results state and the closing CTA band. Build it in code.
- [R9 Item detail](https://brand.honorsociety.org/recipes/r9-item-detail.md): One item from a catalog: page head with breadcrumb, main column and key-facts aside with the one action, related cards, a route back and the CTA band. Build it in code.

## Optional

- [Decision record: Blue treatments](https://brand.honorsociety.org/decisions/blue-treatments.html): Six ways to paint the navy grounds, each on a hero and a navy content band. B, the gradient from deep navy to a touch of blue, became the token --hs-ground-navy.
- [Decision record: Components round 1](https://brand.honorsociety.org/decisions/components-round-1.html): Ten competing or missing core components: eyebrow, heading, buttons, links, link card, tab and chip states, callout, body text, page-head H1. All ten decided; the decided versions are in components/.
- [Decision record: Components round 2a](https://brand.honorsociety.org/decisions/components-round-2a.html): Editorial and member components: plate, tier badge, avatar, member card, quote, stat, steps, FAQ, anchor nav, CTA band, award hero. All decided; the award hero was settled on its own page.
- [Decision record: Award hero with deadline](https://brand.honorsociety.org/decisions/award-hero.html): Seven ways to open an award page with the amount, the eligibility, the next deadline and one way to apply. C, a navy hero with a deadline card, built as .hs-award-hero.
- [Decision record: Components round 2b](https://brand.honorsociety.org/decisions/components-round-2b.html): Tabs, chips, form controls, tables, breadcrumb, pager, code box, empty state and dialog. All nine decided; the decided versions are in components/.
- [Decision record: Components round 3](https://brand.honorsociety.org/decisions/components-round-3.html): Gaps the page recipes found: rating proof card, plan compare, leader profile, two-link recipient card, video facade, plus simple additions. Option A is built for each; a different letter changes the component. Recipient row decided: A for short lists, B (row list) for long lists.
- [Decision record: Components round 4: account pages](https://brand.honorsociety.org/decisions/components-round-4.html): The sign-in and account page parts: auth card, password toggle, support note, secondary action line, confirmation panel, signed-in notice. Decided: B for the password toggle, the eye icon on every password field: one toggle pattern across the site. A for the other five; the support note puts its lead-in on its own line, and the confirmation panel sets its icon beside the heading. Full-width button, form link and divider are settled.
- [Decision record: Directories round](https://brand.honorsociety.org/decisions/directories-round.html): Twelve decisions for the catalog and item detail patterns: filter layout and mechanics, paging, one card family, detail layout, the scholarship directory first view, filters and amounts, benefits order and detail, search results and the no-results state. Decided: A for all twelve. Filter panel above the results, server-side GET, numbered pager of 24, one card family, main column with a key-facts aside, own scholarships first, three curated filters, amounts parsed from the name, ready-to-use benefits first, benefit facts hold the redeem area, one mixed search list with type chips, and a no-results state that helps. Built as hs-search, hs-filter, hs-results-bar, hs-status, the card catalog variants, hs-result, hs-detail, hs-facts and hs-empty--search; recipes R8 and R9.