{
  "title": "Approved section library",
  "note": "A page is assembled from this library, not designed from scratch. Each section has already been through brand review, accessibility review, and a responsive pass, so what is left to decide is which sections and in what order. The rules under each one are the reasons a section gets refused, written down so the same argument does not get had twice.",
  "sections": [
    {
      "id": "nav-bar", "name": "Navigation bar", "onPage": 1, "region": "nav-bar",
      "for": "The top bar. A wordmark, up to five section links, and one call to action.",
      "slots": ["wordmark", "2 to 5 section links", "primary action"],
      "rules": [
        "Never more than five links. A sixth is a sign the page should be two pages.",
        "Do not use it on a page reached from an email or an advertisement, where a nav bar mostly gives people somewhere else to go."
      ]
    },
    {
      "id": "hero-split", "name": "Split hero", "onPage": 2, "region": "hero-split",
      "for": "The opening block on a product page: a headline, a paragraph, two actions, and a figure beside them.",
      "slots": ["eyebrow", "headline", "lead paragraph", "primary action", "secondary action", "figure", "three facts"],
      "rules": [
        "Not for a page with nothing to show. The empty half reads as a mistake, and a placeholder image reads worse.",
        "One primary action. Two competing buttons halve both, so the second is always the quiet variant."
      ]
    },
    {
      "id": "value-three-up", "name": "Three up value blocks", "onPage": 3, "region": "value-three-up",
      "for": "Three short blocks saying what changes for the reader, each with an icon, a title, and about forty words.",
      "slots": ["section eyebrow", "section heading", "section lead", "three blocks of icon, title, body"],
      "rules": [
        "Three, not four. Four wraps badly on a tablet and turns into a feature list.",
        "Not for specifications. Numbers belong in the spec table where they can be scanned in a column."
      ]
    },
    {
      "id": "spec-table", "name": "Specification table", "onPage": 4, "region": "spec-table",
      "for": "The published specification as a two column table, with a caption naming what it was measured against.",
      "slots": ["section eyebrow", "section heading", "section lead", "table caption", "rows of label and value", "note under the table"],
      "rules": [
        "Every row has to match the certificate that ships with the product. If a figure cannot be sourced it does not go in the table.",
        "Not for pricing. A price comparison belongs in the plan block, where the reader is choosing rather than checking."
      ]
    },
    {
      "id": "testimonial-quote", "name": "Testimonial quote", "onPage": 5, "region": "testimonial-quote",
      "for": "One quotation on a dark band with the person, the role, and the organisation, and up to three figures beside it.",
      "slots": ["eyebrow", "organisation", "quotation", "name", "role", "up to 3 figures"],
      "rules": [
        "One quote per page. A wall of quotes reads as none of them.",
        "Never a quote without a named person and a role behind it. An unattributed quote is worse than no quote."
      ]
    },
    {
      "id": "plan-compare", "name": "Plan comparison", "onPage": 6, "region": "plan-compare",
      "for": "Two to four plans side by side, each with a price, a sentence, and the same feature rows in the same order.",
      "slots": ["section eyebrow", "section heading", "section lead", "per plan: badge, name, price, summary, feature rows, action"],
      "rules": [
        "Every plan carries the same rows in the same order, including the ones it does not have. A row that only appears on the expensive plan looks like a trick.",
        "Four plans is the limit. Past four the columns stop being comparable at 390px and the reader gives up."
      ]
    },
    {
      "id": "faq-list", "name": "Question list", "onPage": 7, "region": "faq-list",
      "for": "Six to ten questions in a disclosure list, opening on click and readable with no JavaScript at all.",
      "slots": ["section eyebrow", "section heading", "question and answer pairs"],
      "rules": [
        "Only questions somebody actually asked. Invented questions read as marketing copy in a costume.",
        "Not a place to bury a limitation that belongs higher up the page."
      ]
    },
    {
      "id": "contact-form", "name": "Contact block with form", "onPage": 8, "region": "contact-form",
      "for": "A short form beside the direct contact details, so the reader can use whichever they prefer.",
      "slots": ["heading", "lead", "email", "phone", "address", "form fields", "submit", "demonstration note"],
      "rules": [
        "Six fields is the limit. Every extra field costs replies, and the seventh is always the one nobody answers.",
        "A form on a demonstration page carries a visible note saying it does not submit, placed above the first field rather than under the button."
      ]
    },
    {
      "id": "footer-simple", "name": "Simple footer", "onPage": 9, "region": "footer-simple",
      "for": "The closing band: wordmark, one sentence, two short link columns, and the legal line.",
      "slots": ["wordmark", "sentence", "two link columns", "legal line"],
      "rules": [
        "Two link columns at most. A footer sitemap belongs on a site with more than one page in it.",
        "Never the first mention of anything. If it matters it goes in the body of the page."
      ]
    },
    {
      "id": "hero-centered", "name": "Centred hero", "onPage": null, "region": null,
      "for": "The same opening block without a figure, centred, for announcements, events, and single message pages.",
      "slots": ["eyebrow", "headline", "lead paragraph", "primary action"],
      "rules": [
        "Never on the same page as the split hero. Pick one and the page keeps its shape.",
        "Not for anything with a specification. A centred column makes the table that follows look like an afterthought."
      ]
    },
    {
      "id": "logo-strip", "name": "Logo strip", "onPage": null, "region": null,
      "for": "A quiet row of partner or certification marks, sitting under the hero.",
      "slots": ["label", "4 to 8 marks"],
      "rules": [
        "Only marks there is written permission to show, checked on the day the page ships.",
        "Not with fewer than four marks. Three reads as a page that ran out of partners."
      ]
    },
    {
      "id": "stat-band", "name": "Statistic band", "onPage": null, "region": null,
      "for": "A dark band carrying three to five figures, each with one line of context.",
      "slots": ["3 to 5 figures with captions"],
      "rules": [
        "Every figure has to be one somebody can source. A rounded guess on a dark band is still a guess.",
        "Not next to the testimonial quote, which is also a dark band. Two in a row read as one long band and neither lands."
      ]
    },
    {
      "id": "feature-split", "name": "Feature split", "onPage": null, "region": null,
      "for": "One feature at a time, figure on one side and copy on the other, alternating down the page.",
      "slots": ["figure", "heading", "body", "optional link"],
      "rules": [
        "Two or three at most. Beyond that the alternation becomes a rhythm the reader stops seeing.",
        "Not for a feature with no picture. An icon standing in for a screenshot fools nobody."
      ]
    },
    {
      "id": "cta-band", "name": "Call to action band", "onPage": null, "region": null,
      "for": "A single full width band with one line and one action, for the end of a long page.",
      "slots": ["line", "primary action"],
      "rules": [
        "Once per page, and never above the fold.",
        "Not on a page that already ends in the contact block, which is the stronger ask of the two."
      ]
    }
  ]
}