Brand system
Page recipes
A recipe shows a proven page shape, built only from decided components. It is a starting point, not a template: start from the closest recipe, choose the components that fit the content, combine them as needed and leave out what does not fit. Each recipe has the sections of its base page, its rules, the live page, and notes: copy issues, dynamic parts that need code, and what the hs_mcp validator must allow.
Recipes
Base pages and copy are from prod on 2026-10-14. Sample people are fictional.
R1
Hub landing
A hub that lists a family of child pages in groups. Grouped link cards, steps, stat, recipient cards, FAQ.
R2
Award detail
One award: award hero with amount and deadline, requirements, steps, recipients, related awards, FAQ.
R3
Directory
A grouped list of people. Collection cards, letter groups of member cards, profile steps, FAQ. Build it in code.
R4
Trust page
One question, answered first, then the proof: outside ratings with dates and sources, identity, terms, FAQ.
R5
Membership explainer
What membership gives, free and paid side by side, how to join, a member quote, FAQ.
R6
Audience and about page
Goals as links, one resource card per goal, free and paid side by side, steps, FAQ.
Article
Standard article
Page head with category and byline, lead image, body in prose: headings, lists, links, blockquote, table, figure.
R7
Account pages
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
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
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.
Rules for every recipe
- Classes from the components only. No inline
style, no<script>, no page CSS. - Band order is not fixed. Only the component rules are: grounds, one gold element per viewport (the site header's Join button does not count), heading order, marks and the rules on each component page.
- One head band holds the page’s only H1. The template prints it, or a page built from the body alone starts with it: the page head, the hero or the award hero. Every other band opens with h2.
- The H1 names the page. Each page has its own title, description and share image.
- Every band carries a
data-sectionslug. Grounds rotate: no two neighbouring bands share a ground. A CTA band is the closing band. - One button per band. A page built from the body alone carries no tracking attributes; templates in code add them.
- Every price, count and score comes from site facts. A figure without a source ships as a marked placeholder, never as fact.
- Put every piece of text in its own element (
p,li, a heading). Nothing adds paragraphs or line breaks for you.