Brand system · version 0.6.4
One set of tokens and components for every Honor Society® surface.
Plain HTML and CSS, no framework. Coding agents read this site and copy snippets and tokens into hs_theme (Drupal 7), Laravel, Sulu, the Shopify theme and the Zendesk Guide theme. Nothing imports from this site at run time.
For Claude Code and other agents
How to use this site
- Fetch /llms.txt. It lists every page with one line on what it holds.
- Fetch the Markdown twin of a page: add
.mdto the path, for example /components/button.md. It holds the rules and the exact HTML. One request, no JavaScript. - For a whole page, start from the closest recipe: it shows a proven page shape. Choose the components that fit the content, combine them as needed and leave out what does not fit. Then replace the copy and the sample data.
- Copy the snippet as it is. Change text, URLs and the
data-ph-capture-attribute-ctavalues; keep the classes and the structure. - Take token values from /tokens.json or /tokens.css. Use the custom property, never a raw hex.
- For a platform that cannot load the bundle, read Platforms.
Conventions
- One prefix:
hs-. Classes are BEM (hs-block__element--modifier); states areis-*; tokens are--hs-*. - A band (
.hs-band) sets the ground. Components read the ground through--hs-ctx-*properties, so most need no on-navy modifier. - Body HTML for the Drupal
hs_html_pagetype uses classes only: no<script>, no inlinestyle, no page CSS. - Four components need a small script: dialog, code box, password field and video facade. Each works, or stays hidden, without it. Load a script only on a page that has its component.
- Every route carries
data-ph-capture-attribute-ctaanddata-ph-capture-attribute-cta-locfor PostHog. - Status decided means the version won a comparison. Built means it is built and still open to change. See Decisions.
- Sample people are fictional. Placeholder images live under
/placeholders/: replace them.
Files
Copy from these files. Short cache: they always match the current version.
/brand.css
Tokens, base and every component in one file, in load order. Fonts are not inside.
/brand.js
Every component script in one file. Prefer one script per component from
/js/./tokens.json
Every token, resolved, keyed by its custom property name.
/tokens.css
The
:rootblock of--hs-*custom properties./llms.txt
The index of this site for agents.
/llms-full.txt
Every component and recipe doc in one text file.
55 components, 10 recipes
- R1 Hub landing
- R2 Award detail
- R3 Directory
- R4 Trust page
- R5 Membership explainer
- R6 Audience and about page
- Standard article
- R7 Account pages
- R8 Catalog
- R9 Item detail
Components: Button, Text link, Eyebrow, Heading, Band and container, Card, Page head, Hero, Callout, Prose, Recognition plate, Credential card, Tier badge, Avatar, Member card, Quote, Stat, Steps, FAQ, Anchor nav, CTA band, Award hero, Tabs, Filter chips and tags, Form, Table, Load more, Breadcrumb, Numbered pager, Code box, Empty state, Dialog, Figure, Fine print, Byline, Link list and link row, Back link, Social links, Disclosure, Group heading, Rating proof card, Plan compare, Leader profile, Video facade, Auth card, Form link, divider and support note, Confirmation panel, Search, Filter, Results bar, Status, Result, Detail layout, Facts, Utilities.