@gemboss/website-ui 0.0.0-stage → 0.2.0

package/system.json

@@ -0,0 +1,122 @@
+{
+  "$comment": "The GemBoss website system in one file. css/tokens.css, the docs and `gemboss-website check` all read these values: change a value here, never in one of them alone. Values measured on gemboss.ai and the GemBoss dashboard (DESIGN-LANGUAGE.md of gemboss-www, 15/10/2026).",
+  "version": 1,
+  "color": {
+    "light": {
+      "bg": "#ffffff",
+      "bg-soft": "#f2f3f5",
+      "surface": "#ffffff",
+      "ink": "#1b1c1e",
+      "ink-2": "#3b3d42",
+      "muted": "#686b71",
+      "line": "#e5e7ea",
+      "line-strong": "#d5d8dd",
+      "action": "#1b1c1e",
+      "action-hover": "#000000",
+      "on-action": "#ffffff",
+      "accent": "#5661f5",
+      "accent-strong": "#3a44de",
+      "accent-soft": "#eef0fe",
+      "on-accent": "#ffffff",
+      "success": "#007f5f",
+      "success-soft": "#e3f1df",
+      "warning": "#9a6700",
+      "night": "#0c0e14",
+      "night-2": "#141722",
+      "on-night": "#e3e4e8",
+      "on-night-muted": "#9aa3ff"
+    },
+    "dark": {
+      "bg": "#0d0d12",
+      "bg-soft": "#121318",
+      "surface": "#16171d",
+      "ink": "#e3e4e8",
+      "ink-2": "#c4c6cc",
+      "muted": "#9a9ca6",
+      "line": "#2a2b33",
+      "line-strong": "#383944",
+      "action": "#f2f3f5",
+      "action-hover": "#ffffff",
+      "on-action": "#0d0d12",
+      "accent": "#7c84ff",
+      "accent-strong": "#a3a9ff",
+      "accent-soft": "#1f2140",
+      "on-accent": "#0d0d12",
+      "success": "#34c38f",
+      "success-soft": "#132a22",
+      "warning": "#e0b341",
+      "night": "#0a0b10",
+      "night-2": "#12141c",
+      "on-night": "#e3e4e8",
+      "on-night-muted": "#9aa3ff"
+    },
+    "wash": {
+      "$comment": "Secondary hues. ONE job: the hero wash and illustrations. Never chrome, text, borders or buttons.",
+      "pink": "#ff6f5e",
+      "violet": "#7c8af7",
+      "sky": "#43b0ff",
+      "mint": "#1fcf9f"
+    },
+    "roles": {
+      "action": "The thing you click. Ink, not the accent.",
+      "accent": "Links, focus rings, active state, a chart line, the 8px label square. Never a button fill, never body text.",
+      "success/warning": "State only.",
+      "wash": "The hero wash and illustrations only."
+    }
+  },
+  "radius": {
+    "scale": [0, 4, 6, 8, 12, 16, 20, 999],
+    "action": 8,
+    "chip": 999,
+    "card": 12,
+    "panel": 16
+  },
+  "shadow": {
+    "rest": "0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06)",
+    "sm": "0 1px 2px rgba(31,30,29,.04)",
+    "raised": "0 4px 16px rgba(31,30,29,.10)",
+    "$comment": "The whole budget for chrome. A card sits; it does not hover. An illustration may light itself."
+  },
+  "type": {
+    "family": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+    "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+    "weights": [400, 500, 600, 650, 700],
+    "scale": [11, 12, 13, 14, 16, 18, 20, 22, 24, 30],
+    "display_above": 30,
+    "display": {
+      "h1": "clamp(40px, 4.6vw, 68px)",
+      "h2": "clamp(32px, 3.4vw, 52px)",
+      "weight": 600,
+      "tracking": "-0.03em"
+    },
+    "heading": { "weight": 650, "tracking": "-0.022em", "line_height": 1.08 },
+    "subhead": { "weight": 600 },
+    "body": { "size": 18, "line_height": 1.6 },
+    "label": { "size": 13, "weight": 500, "case": "sentence", "$comment": "muted, led by the 8px accent square; never uppercase tracking" },
+    "button": { "size": 14, "weight": 600, "case": "sentence" }
+  },
+  "space": {
+    "scale": [0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120],
+    "section": "clamp(56px, 38px + 5vw, 110px)",
+    "$comment": "4px base; 2px steps only below 8. Section rhythm comes from --space-section; the scale is for everything inside a section."
+  },
+  "layout": {
+    "wrap": 1120,
+    "wrap_narrow": 780,
+    "gutter": 22,
+    "header_height": 64,
+    "breakpoints": [480, 768, 1080],
+    "test_widths": [320, 390, 768, 1366]
+  },
+  "control": {
+    "button_height": 40,
+    "tap_target_min": 44
+  },
+  "motion": {
+    "properties": ["transform", "opacity"],
+    "ease": "cubic-bezier(.22,1,.36,1)",
+    "reveal_ms": 700,
+    "spin_ms": 700,
+    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion (a busy button's ring turns once every spin_ms, as the dashboard's spinner, and stands still as an ellipsis)."
+  }
+}

package/templates/footer.html

@@ -0,0 +1,40 @@
+<!--
+  Footer: one per site, the same on every page. A brand block, three to five link columns, a bottom row.
+  Limits: column headings are one or two words in sentence case; four to seven links per column; the bottom row
+  holds the copyright, the legal links and the social links, nothing else. Replace every [bracketed] placeholder.
+-->
+<footer class="gw-footer">
+  <div class="gw-wrap">
+    <div class="gw-footer__grid">
+      <div class="gw-footer__brand">
+        <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+        <p>[One sentence on what the brand does for the reader.]</p>
+      </div>
+      <nav class="gw-footer__col" aria-label="[Column heading]">
+        <h2 class="gw-footer__heading">[Column heading]</h2>
+        <ul>
+          <li><a href="[/page]">[Page title]</a></li>
+          <li><a href="[/page]">[Page title]</a></li>
+          <li><a href="[/page]">[Page title]</a></li>
+        </ul>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Column heading]">
+        <h2 class="gw-footer__heading">[Column heading]</h2>
+        <ul>
+          <li><a href="[/page]">[Page title]</a></li>
+          <li><a href="[/page]">[Page title]</a></li>
+        </ul>
+      </nav>
+    </div>
+    <div class="gw-footer__bottom">
+      <span>© [Year] [Company]. All rights reserved.</span>
+      <ul aria-label="Legal">
+        <li><a href="[/privacy]">Privacy</a></li>
+        <li><a href="[/terms]">Terms</a></li>
+      </ul>
+      <ul aria-label="Social">
+        <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
+      </ul>
+    </div>
+  </div>
+</footer>

package/templates/header.html

@@ -0,0 +1,60 @@
+<!--
+  Header: one per site, the same on every page. Keep it in one partial or component, never copied per page.
+  A flat 64px bar with one hairline. Below 1080px the nav and Sign in hide and the menu button opens #gw-mobile-menu,
+  which repeats the same links. website.js runs the mega menus, the mobile menu and the theme toggle.
+  Limits: at most five top-level items, one .gw-btn (the primary action), one .gw-btn--secondary. Each mega panel:
+  two or three columns of four or five links, at most one feature card. The announcement bar is optional: one sentence.
+  Replace every [bracketed] placeholder; delete what you do not use.
+-->
+<div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
+<header class="gw-header" data-gw-header>
+  <div class="gw-wrap gw-header__bar">
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+    <nav class="gw-nav" aria-label="Main">
+      <ul class="gw-nav__list">
+        <li class="gw-nav__item">
+          <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">[Product menu item]</button>
+          <div class="gw-mega" id="gw-mega-product" hidden>
+            <div class="gw-wrap gw-mega__grid">
+              <div class="gw-mega__col">
+                <p class="gw-mega__heading">[Group]</p>
+                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+              </div>
+              <div class="gw-mega__col">
+                <p class="gw-mega__heading">[Group]</p>
+                <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+              </div>
+              <a class="gw-mega__feature" href="[/page]"><b>[Feature title]</b><i>[One line on why to open it]</i><span class="gw-link gw-link--arrow">[Where it goes]</span></a>
+            </div>
+          </div>
+        </li>
+        <li class="gw-nav__item"><a class="gw-nav__link" href="[/pricing]">[Pricing]</a></li>
+      </ul>
+    </nav>
+    <div class="gw-header__actions">
+      <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+      <a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
+      <a class="gw-btn gw-btn--secondary gw-btn--sm" href="[/contact]">[Book a demo]</a>
+      <a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
+      <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+    </div>
+  </div>
+  <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+    <nav class="gw-wrap" aria-label="Main, mobile">
+      <details class="gw-mobile-menu__group">
+        <summary>[Product menu item]</summary>
+        <ul class="gw-mobile-menu__list">
+          <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
+          <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
+        </ul>
+      </details>
+      <a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
+      <div class="gw-mobile-menu__actions">
+        <a class="gw-btn gw-btn--block" href="[sign-up URL]">[Start free]</a>
+        <a class="gw-btn gw-btn--secondary gw-btn--block" href="[/contact]">[Book a demo]</a>
+        <a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
+      </div>
+    </nav>
+  </div>
+</header>

package/templates/page.html

@@ -0,0 +1,134 @@
+<!doctype html>
+<!--
+  Page skeleton: start every new page from this file.
+  Serve website.css and website.js from node_modules/@gemboss/website-ui/ at the [/kit] path below (copy or route them),
+  then link the site's own CSS after the kit. Fill the header and footer once, in a shared partial.
+  One <h1> per page (in the hero), sections in the order the page needs, then delete every unused part.
+  Replace every [bracketed] placeholder. No lorem ipsum, no invented facts.
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>[Page title] · [Brand]</title>
+  <meta name="description" content="[One sentence, under 160 characters, on what this page offers the reader.]">
+  <link rel="icon" href="[/favicon.svg]" type="image/svg+xml">
+  <!-- the stored theme, applied before first paint (website.js keeps it in localStorage "gw-theme") -->
+  <script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
+  <link rel="stylesheet" href="[/kit]/website.css">
+  <link rel="stylesheet" href="[/assets]/site.css">
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+
+  <div class="gw-announce" role="region" aria-label="Announcement">[One sentence of news.] <a href="[link]">[Where the link goes]</a></div>
+  <header class="gw-header" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+      <nav class="gw-nav" aria-label="Main">
+        <ul class="gw-nav__list">
+          <li class="gw-nav__item">
+            <button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">[Product menu item]</button>
+            <div class="gw-mega" id="gw-mega-product" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">[Group]</p>
+                  <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                  <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">[Group]</p>
+                  <a class="gw-mega__link" href="[/page]"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>[Page title]</b><i>[One line on what it does]</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="[/page]"><b>[Feature title]</b><i>[One line on why to open it]</i><span class="gw-link gw-link--arrow">[Where it goes]</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="[/pricing]">[Pricing]</a></li>
+        </ul>
+      </nav>
+      <div class="gw-header__actions">
+        <button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+        <a class="gw-nav__link gw-header__signin" href="[sign-in URL]">Sign in</a>
+        <a class="gw-btn gw-btn--secondary gw-btn--sm" href="[/contact]">[Book a demo]</a>
+        <a class="gw-btn gw-btn--sm" href="[sign-up URL]">[Start free]</a>
+        <button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+      </div>
+    </div>
+    <div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
+      <nav class="gw-wrap" aria-label="Main, mobile">
+        <details class="gw-mobile-menu__group">
+          <summary>[Product menu item]</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
+            <li><a class="gw-mobile-menu__link" href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="[/pricing]">[Pricing]</a>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="[sign-up URL]">[Start free]</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="[/contact]">[Book a demo]</a>
+          <a class="gw-mobile-menu__link" href="[sign-in URL]">Sign in</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <!-- sections from templates/sections/: hero first, then proof, features, a split or showcase, FAQ, CTA -->
+    <section class="gw-hero">
+      <div class="gw-hero__wash" aria-hidden="true"></div>
+      <div class="gw-wrap">
+        <p class="gw-label">[Short label]</p>
+        <h1><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h1>
+        <p class="gw-lead">[One or two lines on what it does for the reader.]</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="[link]">[Primary action]</a>
+          <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__grid">
+        <div class="gw-footer__brand">
+          <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+          <p>[One sentence on what the brand does for the reader.]</p>
+        </div>
+        <nav class="gw-footer__col" aria-label="[Column heading]">
+          <h2 class="gw-footer__heading">[Column heading]</h2>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </nav>
+        <nav class="gw-footer__col" aria-label="[Column heading]">
+          <h2 class="gw-footer__heading">[Column heading]</h2>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </nav>
+      </div>
+      <div class="gw-footer__bottom">
+        <span>© [Year] [Company]. All rights reserved.</span>
+        <ul aria-label="Legal">
+          <li><a href="[/privacy]">Privacy</a></li>
+          <li><a href="[/terms]">Terms</a></li>
+        </ul>
+        <ul aria-label="Social">
+          <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+
+  <script src="[/kit]/website.js" defer></script>
+</body>
+</html>

package/templates/sections/cta.html

@@ -0,0 +1,15 @@
+<!--
+  CTA: the closing call to action, the last section before the footer. One headline, one line, the same primary
+  action as the hero. Put it in a night band (the closing CTA does not count toward the three night bands; never right after another night band)
+  or in .gw-section--soft. Limits: one .gw-btn and at most one secondary; no forms that collect nothing.
+-->
+<section class="gw-section gw-band--night">
+  <div class="gw-wrap gw-cta">
+    <h2>[Headline: the outcome, one more time]</h2>
+    <p class="gw-lead">[One line on the first step.]</p>
+    <div class="gw-actions">
+      <a class="gw-btn" href="[link]">[Primary action]</a>
+      <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
+    </div>
+  </div>
+</section>

package/templates/sections/faq.html

@@ -0,0 +1,24 @@
+<!--
+  FAQ: the questions a reader really asks before they act, answered in two to four sentences each, with the same
+  facts as the rest of the site. Native details/summary: no script. Limits: four to eight questions, questions as
+  the reader would ask them, no marketing claims hidden in answers. Mark it up as FAQPage JSON-LD only if every
+  answer is visible on the page.
+-->
+<section class="gw-section">
+  <div class="gw-wrap gw-wrap--narrow">
+    <div class="gw-section__head">
+      <p class="gw-label">FAQ</p>
+      <h2>[Headline, e.g. Good to know]</h2>
+    </div>
+    <div class="gw-faq">
+      <details class="gw-faq__item">
+        <summary>[A question the reader asks?]</summary>
+        <p>[The answer in two to four sentences.]</p>
+      </details>
+      <details class="gw-faq__item">
+        <summary>[A question the reader asks?]</summary>
+        <p>[The answer.]</p>
+      </details>
+    </div>
+  </div>
+</section>

package/templates/sections/features.html

@@ -0,0 +1,32 @@
+<!--
+  Features: what the product does, three to six short items in a grid (.gw-grid--3, or --2 / --4).
+  Each: a 20px stroke icon (aria-hidden), a title of two to five words, one or two lines. Say what it does today,
+  not a promise. Add .gw-card to each .gw-feature only when the section background is soft and they need a frame.
+  Limits: one section head, no buttons inside the items (one action under the grid at most).
+-->
+<section class="gw-section gw-section--soft">
+  <div class="gw-wrap">
+    <div class="gw-section__head">
+      <p class="gw-label">[Short label]</p>
+      <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
+      <p class="gw-lead">[One or two lines.]</p>
+    </div>
+    <div class="gw-features gw-grid--3">
+      <div class="gw-feature">
+        <span class="gw-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span>
+        <h3>[Feature title]</h3>
+        <p>[One or two lines on what it does for the reader.]</p>
+      </div>
+      <div class="gw-feature">
+        <span class="gw-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span>
+        <h3>[Feature title]</h3>
+        <p>[One or two lines.]</p>
+      </div>
+      <div class="gw-feature">
+        <span class="gw-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
+        <h3>[Feature title]</h3>
+        <p>[One or two lines.]</p>
+      </div>
+    </div>
+  </div>
+</section>

package/templates/sections/hero.html

@@ -0,0 +1,27 @@
+<!--
+  Hero: the first screen of a page, and the only place for the <h1>. Use once per page, at the top of <main>.
+  Variants: .gw-hero--center (centred, for short promises), .gw-hero--compact (subpages: less height, h2-sized h1).
+  Add .gw-band--night for a dark hero (it counts as one of the page's three night bands).
+  Limits: a short label, a two-part headline (muted first sentence, ink second), at most two lines under it,
+  one .gw-btn and one secondary action. The optional window holds a real product screen (img with alt, width, height)
+  or a drawn mock-up. Numbers in it that are not real get the caption "Illustrative data." (vi: "Dữ liệu minh hoạ.",
+  zh: "示意数据。"); real ones get their source there. Never tuck the hero under the header.
+-->
+<section class="gw-hero">
+  <div class="gw-hero__wash" aria-hidden="true"></div>
+  <div class="gw-wrap">
+    <p class="gw-label">[Short label]</p>
+    <h1><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h1>
+    <p class="gw-lead">[One or two lines on what it does for the reader.]</p>
+    <div class="gw-actions">
+      <a class="gw-btn" href="[link]">[Primary action]</a>
+      <a class="gw-btn gw-btn--secondary" href="[link]">[Second action]</a>
+    </div>
+    <p class="gw-note">[One short reassurance, e.g. the trial terms. Delete if there is none.]</p>
+    <div class="gw-window">
+      <div class="gw-window__bar">[Where this screen lives, e.g. the app section]</div>
+      <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1200]" height="[750]"></div>
+      <p class="gw-window__caption">[Illustrative data. Or the source of the numbers. Delete when the screen shows no numbers.]</p>
+    </div>
+  </div>
+</section>

package/templates/sections/logos.html

@@ -0,0 +1,15 @@
+<!--
+  Logos: a proof strip right under the hero. Real customers or partners only, each logo used with permission,
+  or the brand's own product wordmarks. Never a made-up brand, never "as seen in" without the source.
+  Limits: one short line above, four to eight logos, all at the same height (28px), in their single-colour version.
+-->
+<section class="gw-logos" aria-label="[What these logos are, e.g. Customers]">
+  <div class="gw-wrap">
+    <p>[One short line, e.g. Trusted by]</p>
+    <ul>
+      <li><img src="[/img/logo-1.svg]" alt="[Company name]" width="[112]" height="28"></li>
+      <li><img src="[/img/logo-2.svg]" alt="[Company name]" width="[112]" height="28"></li>
+      <li>[Wordmark as text]</li>
+    </ul>
+  </div>
+</section>

package/templates/sections/pricing.html

@@ -0,0 +1,51 @@
+<!--
+  Pricing: plan cards with the brand's real plan names and prices, exactly as billed. A missing price is [PRICE]
+  and a question to the person, never a guess. One plan may be .gw-plan--featured (an accent hairline, never a fill)
+  and only that one gets the filled .gw-btn; the others get .gw-btn--secondary.
+  Monthly / yearly: the .gw-segmented radio group, only when the brand really bills yearly for less, with the real
+  discount in its label. Every price is in the markup twice, data-gw-show="billing:monthly" and
+  data-gw-show="billing:yearly" (hidden): the page reads the monthly prices without the script, and website.js
+  swaps them on a choice. Under the price, say what is billed ("Billed $470.40 a year"). No yearly billing: delete
+  the control and every data-gw-show="billing:yearly" element.
+  Limits: two to four plans, four to six lines per plan, the same lines in the same order on every plan.
+-->
+<section class="gw-section">
+  <div class="gw-wrap">
+    <div class="gw-section__head gw-section__head--center">
+      <p class="gw-label">Pricing</p>
+      <h2>[Headline about how pricing works]</h2>
+      <p class="gw-lead">[One line: trial, billing, what every plan includes.]</p>
+      <div class="gw-segmented" role="radiogroup" aria-label="[Billing period]" data-gw-segmented="billing">
+        <button type="button" role="radio" aria-checked="true" value="monthly">[Monthly]</button>
+        <button type="button" role="radio" aria-checked="false" value="yearly">[Yearly –DISCOUNT%]</button>
+      </div>
+    </div>
+    <div class="gw-pricing">
+      <div class="gw-plan">
+        <h3>[Plan]</h3>
+        <p>[Who it is for, in one line]</p>
+        <p class="gw-plan__price"><span data-gw-show="billing:monthly">[PRICE]</span><span data-gw-show="billing:yearly" hidden>[PRICE A MONTH, BILLED YEARLY]</span> <small>/ month</small></p>
+        <p><span data-gw-show="billing:monthly">[Billed monthly]</span><span data-gw-show="billing:yearly" hidden>[Billed $X a year]</span></p>
+        <a class="gw-btn gw-btn--secondary gw-btn--block" href="[link]">[Action]</a>
+        <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
+      </div>
+      <div class="gw-plan gw-plan--featured">
+        <span class="gw-badge gw-badge--accent">[Why this one, e.g. Recommended for …]</span>
+        <h3>[Plan]</h3>
+        <p>[Who it is for]</p>
+        <p class="gw-plan__price"><span data-gw-show="billing:monthly">[PRICE]</span><span data-gw-show="billing:yearly" hidden>[PRICE A MONTH, BILLED YEARLY]</span> <small>/ month</small></p>
+        <p><span data-gw-show="billing:monthly">[Billed monthly]</span><span data-gw-show="billing:yearly" hidden>[Billed $X a year]</span></p>
+        <a class="gw-btn gw-btn--block" href="[link]">[Action]</a>
+        <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
+      </div>
+      <div class="gw-plan">
+        <h3>[Plan]</h3>
+        <p>[Who it is for]</p>
+        <p class="gw-plan__price"><span data-gw-show="billing:monthly">[PRICE]</span><span data-gw-show="billing:yearly" hidden>[PRICE A MONTH, BILLED YEARLY]</span> <small>/ month</small></p>
+        <p><span data-gw-show="billing:monthly">[Billed monthly]</span><span data-gw-show="billing:yearly" hidden>[Billed $X a year]</span></p>
+        <a class="gw-btn gw-btn--secondary gw-btn--block" href="[link]">[Action]</a>
+        <ul class="gw-list--check"><li>[What is included]</li><li>[What is included]</li></ul>
+      </div>
+    </div>
+  </div>
+</section>

package/templates/sections/prose.html

@@ -0,0 +1,36 @@
+<!--
+  Prose: a page that is read rather than scanned (a blog post, a docs page, terms, privacy). Put the article's own
+  HTML inside .gw-prose as it comes from the CMS or the markdown renderer: no classes needed on its headings,
+  paragraphs, lists, quotes, code, tables or images. Add .gw-prose--sm (16px) for docs and legal pages.
+  The page's <h1> is the article title: in a .gw-hero--compact above, or as the first child of .gw-prose.
+  Limits: one article per page; headings in order (h2, then h3) and never used for size alone; every image with
+  alt, width and height; a wide table in the .gw-table wrapper (a bare table scrolls inside its own box too).
+-->
+<section class="gw-section">
+  <div class="gw-wrap gw-wrap--narrow">
+    <article class="gw-prose">
+      <h1>[Article title]</h1>
+      <p>[The first paragraph: what the reader will know or be able to do by the end.]</p>
+      <h2>[A section of the article]</h2>
+      <p>[Paragraphs of two to five sentences. Links go where they say: <a href="[link]">[the setup guide]</a>.]</p>
+      <ul>
+        <li>[A point, in one or two lines]</li>
+        <li>[A point]</li>
+      </ul>
+      <h3>[A step or a sub-topic]</h3>
+      <p>[Inline code for a command or a name the reader types: <code>[npx gemboss-website check]</code>.]</p>
+      <pre><code>[a block of code or a config the reader copies]</code></pre>
+      <blockquote><p>[A quotation, with its source in the text around it.]</p></blockquote>
+      <figure>
+        <img src="[/img/article-screen.webp]" alt="[What the picture shows]" width="[1200]" height="[750]" loading="lazy">
+        <figcaption>[What to notice in the picture, or where it comes from.]</figcaption>
+      </figure>
+      <div class="gw-table" role="region" aria-label="[What the table compares]" tabindex="0">
+        <table>
+          <thead><tr><th scope="col">[Column]</th><th scope="col">[Column]</th></tr></thead>
+          <tbody><tr><th scope="row">[Row]</th><td>[Value]</td></tr></tbody>
+        </table>
+      </div>
+    </article>
+  </div>
+</section>

package/templates/sections/quote.html

@@ -0,0 +1,13 @@
+<!--
+  Quote: one testimonial from a real customer who agreed to be quoted, word for word, with their real name, role
+  and company. Never write a quote for someone, never "a happy customer", never a stock photo as the face.
+  No real quote yet? Leave this section out. Limits: one quote per section, under 40 words.
+-->
+<section class="gw-section gw-section--soft">
+  <div class="gw-wrap">
+    <figure class="gw-quote">
+      <blockquote><p>[The customer's exact words.]</p></blockquote>
+      <figcaption><b>[Full name]</b>, [role], [company]</figcaption>
+    </figure>
+  </div>
+</section>

package/templates/sections/showcase.html

@@ -0,0 +1,25 @@
+<!--
+  Showcase: a night band with one large product screen and two or three points under it. Use for the one feature
+  the page is about. It counts as a night band: at most three per page, never two in a row.
+  Limits: centred head (label, h2, two lines), one window (a real screen, or a mock-up whose made-up numbers carry
+  the caption "Illustrative data."), two or three points (.gw-features in .gw-grid--3 or --2), at most one action pair.
+-->
+<section class="gw-section gw-band--night gw-showcase">
+  <div class="gw-wrap">
+    <div class="gw-section__head gw-section__head--center">
+      <p class="gw-label">[Short label]</p>
+      <h2><span class="gw-dim">[Muted first sentence.]</span> [Ink second sentence.]</h2>
+      <p class="gw-lead">[One or two lines.]</p>
+    </div>
+    <div class="gw-window">
+      <div class="gw-window__bar">[Where this screen lives]</div>
+      <div class="gw-window__body"><img src="[/img/screen.webp]" alt="[What the screen shows]" width="[1600]" height="[1000]" loading="lazy"></div>
+      <p class="gw-window__caption">[Illustrative data. Or the source of the numbers. Delete when the screen shows no numbers.]</p>
+    </div>
+    <div class="gw-features gw-grid--3">
+      <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
+      <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
+      <div class="gw-feature"><h3>[Point]</h3><p>[One line.]</p></div>
+    </div>
+  </div>
+</section>