@gemboss/website-ui 0.0.0-stage → 0.1.0

package/docs/theming.md

@@ -0,0 +1,95 @@
+# Theming for a brand other than GemBoss
+
+A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and changes four things: **its accent colour**, **the
+wash hues**, **its logo** and **its favicon**. Everything else stays the kit's: the shapes, the scales, the ink
+buttons, the white canvas, the type. That is what makes the sites look like one family, and it is why a site built
+by someone with no design training still looks careful.
+
+Working example: `demo/theme-example.html` (the demo's hero, buttons and cards with a GemPages-style blue).
+
+## What you may override
+
+Put these in the site's own CSS (`site.css`, linked **after** `website.css`), in **one `:root {}` block**, and nowhere
+else.
+
+| variable | what it is | GemBoss value |
+|---|---|---|
+| `--gw-accent-light` | the accent on light pages: links, focus ring, active item, label square, chart line | `#5661f5` |
+| `--gw-accent-strong-light` | the accent on hover and as text on `--gw-accent-soft` | `#3a44de` |
+| `--gw-accent-soft-light` | the accent's tint: active chip, accent badge, icon hover | `#eef0fe` |
+| `--gw-on-accent-light` | text on a solid accent (rare; the kit never fills a button with it) | `#ffffff` |
+| `--gw-accent-dark` | the accent in dark mode **and inside night bands** | `#7c84ff` |
+| `--gw-accent-strong-dark` | its hover / strong form | `#a3a9ff` |
+| `--gw-accent-soft-dark` | its tint | `#1f2140` |
+| `--gw-on-accent-dark` | text on it | `#0d0d12` |
+| `--gw-wash-pink`, `--gw-wash-violet`, `--gw-wash-sky`, `--gw-wash-mint` | the secondary hues of the hero wash and illustrations | `#ff6f5e`, `#7c8af7`, `#43b0ff`, `#1fcf9f` |
+
+Why the `-light` / `-dark` names and not `--gw-accent` itself: the kit sets `--gw-accent` from these in four places
+(the light default, dark from the system setting, dark from the toggle, light from the toggle) and in every night
+band. Override the eight primitives once and all of them follow. Overriding `--gw-accent` directly works only until
+someone presses the theme toggle.
+
+The logo and the favicon are files, not variables: the `<img class="gw-brand__mark">` (26×26, SVG preferred, with
+`alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
+partials, and `<link rel="icon">` in the page head.
+
+## What you may not change
+
+- **Neutrals**: `--gw-bg`, `--gw-bg-soft`, `--gw-surface`, `--gw-ink`, `--gw-ink-2`, `--gw-muted`, `--gw-line`,
+  `--gw-line-strong`, and the night colours. No cream or grey page, no brand-coloured ink.
+- **The action**: `--gw-action`, `--gw-action-hover`, `--gw-on-action`. Buttons stay ink. Your accent never fills a
+  button, a section or a header.
+- **State**: `--gw-success`, `--gw-warning` and their tints. Green and amber mean state on every GemCommerce site.
+- **Scales and shapes**: type sizes and weights, spacing, radii, shadows, widths, the header height, the
+  font family. No rounder buttons, no bigger shadows, no other font.
+- **Kit classes**: never restyle a `.gw-*` class. If the kit cannot do what your brand needs, that is a gap
+  (`AGENTS.md` section 9), not a theme.
+
+`npx gemboss-website check` reports colours outside the tokens, overrides of `.gw-*` classes and accent-filled
+buttons.
+
+## A full example
+
+```css
+/* site.css, linked after website.css. The whole theme of a GemPages-style site. */
+:root {
+  /* accent, light pages: #1e5eff on #ffffff is 5.1:1 */
+  --gw-accent-light: #1e5eff;
+  --gw-accent-strong-light: #1547d1;
+  --gw-accent-soft-light: #eaf0ff;
+  --gw-on-accent-light: #ffffff;
+  /* accent, dark mode and night bands: #6b98ff on #0d0d12 is 7.0:1 */
+  --gw-accent-dark: #6b98ff;
+  --gw-accent-strong-dark: #a8c0ff;
+  --gw-accent-soft-dark: #16213d;
+  --gw-on-accent-dark: #0d0d12;
+  /* wash: only if the brand has its own secondary hues; otherwise leave the kit's */
+  --gw-wash-violet: #7b9cff;
+}
+```
+
+```html
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+…
+<a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="26" height="26"><span class="gw-brand__name">GemPages</span></a>
+```
+
+## Check the contrast before you ship
+
+The accent family is read as text: the kit draws links, step numbers, active menu items and badge words in
+`--gw-accent-strong`, and the label square, focus ring, check marks and the featured plan's hairline in `--gw-accent`.
+So:
+
+1. **Accent text on white at least 4.5:1**: `--gw-accent-light` and `--gw-accent-strong-light` on `#ffffff`.
+   Check `--gw-accent-strong-light` on `--gw-bg-soft` (`#f2f3f5`) too, where links sit in soft sections.
+2. `--gw-accent-strong-light` on `--gw-accent-soft-light`: at least 4.5:1 (the accent badge and the active chip).
+3. `--gw-accent-dark` and `--gw-accent-strong-dark` on `#0d0d12` (dark page) and on `#0c0e14` (night band): at
+   least 4.5:1.
+4. `--gw-accent-strong-dark` on `--gw-accent-soft-dark`: at least 4.5:1.
+
+Any WCAG contrast checker works (paste the two hex values). A bright brand colour (yellow, light green, cyan) almost
+never passes on white: darken it for `-light` and keep the bright one for `-dark`. If you cannot get 4.5:1 without
+changing the brand colour beyond recognition, keep the kit's accent and use the brand colour only in the logo and
+illustrations.
+
+Then open the site in light and dark (the toggle in the header), at 320px and at 1366px, and look at a night band.

package/js/website.js

@@ -0,0 +1,149 @@
+/*! @gemboss/website-ui website.js | spec: docs/markup-contract.md | load with defer */
+(function () {
+  'use strict';
+  if (window.gwWebsite) return;
+  window.gwWebsite = { version: '0.1.0' };
+  var doc = document, root = doc.documentElement;
+  function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
+  function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
+  function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
+  function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
+  function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
+  function esc(e) { return e.key === 'Escape'; }
+  function link(e) { return e.target.closest('a[href]'); }
+
+  // Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open".
+  function mega() {
+    var fine = mq('(hover: hover) and (pointer: fine)'), open = null, timer = 0;
+    var menus = all('[data-gw-mega]').map(function (t) {
+      var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+      return p && { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
+    }).filter(Boolean);
+    if (!menus.length) return;
+    function set(m, show, mode) {
+      m.p.hidden = !show;
+      m.t.setAttribute('aria-expanded', String(show));
+      m.item.classList.toggle('is-open', show);
+      m.mode = mode;
+      open = show ? m : open === m ? null : open;
+    }
+    function show(m, mode) {
+      clearTimeout(timer);
+      if (open === m) { if (mode === 'click') m.mode = mode; return; }
+      if (open) set(open, false);
+      set(m, true, mode);
+    }
+    function hide(focus) {
+      var m = open;
+      clearTimeout(timer);
+      if (!m) return;
+      set(m, false);
+      if (focus === true) m.t.focus();
+    }
+    function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
+    menus.forEach(function (m) {
+      on(m.t, 'click', function () { if (open === m && m.mode !== 'hover') hide(); else show(m, 'click'); });
+      (m.item.contains(m.p) ? [m.item] : [m.item, m.p]).forEach(function (el) {
+        on(el, 'mouseenter', function () {
+          if (fine.matches) { clearTimeout(timer); if (open !== m) timer = setTimeout(function () { show(m, 'hover'); }, 80); }
+        });
+        on(el, 'mouseleave', function () {
+          if (fine.matches) { clearTimeout(timer); if (open === m && m.mode === 'hover') timer = setTimeout(hide, 160); }
+        });
+      });
+      on(m.item, 'focusout', function (e) { if (open === m && e.relatedTarget && !inside(m, e.relatedTarget)) hide(); });
+      on(m.p, 'click', function (e) { if (link(e)) hide(); });
+    });
+    on(doc, 'click', function (e) { if (open && !inside(open, e.target)) hide(); });
+    on(doc, 'keydown', function (e) { if (open && esc(e)) hide(inside(open, doc.activeElement) || open.mode === 'click'); });
+  }
+
+  // Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English.
+  function mobile() {
+    var btn = doc.querySelector('[data-gw-menu-toggle]');
+    var menu = btn && doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
+    if (!menu) return;
+    var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
+    var wide = mq('(min-width: 1080px)');
+    function isOpen() { return !menu.hidden; }
+    function set(o, focus) {
+      menu.hidden = !o;
+      btn.setAttribute('aria-expanded', String(o));
+      btn.setAttribute('aria-label', label[+o]);
+      root.classList.toggle('is-menu-open', o);
+      if (focus) btn.focus();
+    }
+    on(btn, 'click', function () { set(!isOpen()); });
+    on(doc, 'keydown', function (e) { if (esc(e) && isOpen()) set(false, true); });
+    on(menu, 'click', function (e) { if (link(e)) set(false); }); // same-page anchors do not reload
+    watch(wide, function () { if (wide.matches && isOpen()) set(false); });
+    on(window, 'pageshow', function (e) { if (e.persisted && isOpen()) set(false); });
+  }
+
+  // Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English.
+  function theme() {
+    var sys = mq('(prefers-color-scheme: dark)'), stored = null;
+    try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
+    if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
+    var btns = all('[data-gw-theme-toggle]'), labels = btns.map(function (b) {
+      return [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')];
+    });
+    function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
+    function relabel() { btns.forEach(function (b, i) { b.setAttribute('aria-label', labels[i][+dark()]); }); }
+    btns.forEach(function (b) {
+      on(b, 'click', function () {
+        var next = dark() ? 'light' : 'dark';
+        root.setAttribute('data-theme', next);
+        try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
+        relabel();
+      });
+    });
+    watch(sys, relabel);
+    relabel();
+  }
+
+  // Reveal at 15% visible, once. Failsafe: all shown after 2.5s, or at once without IntersectionObserver.
+  function reveal() {
+    var els = all('.gw-reveal'), io = null;
+    function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+    if (!els.length) return;
+    if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+    io = new IntersectionObserver(function (list) {
+      list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+    }, { threshold: 0.15 });
+    els.forEach(function (el) { io.observe(el); });
+    setTimeout(showAll, 2500);
+  }
+
+  // Header: .is-scrolled past 8px, read once per frame.
+  function header() {
+    var h = doc.querySelector('[data-gw-header]'), state = false, queued = false;
+    if (!h) return;
+    function update() {
+      var s = window.scrollY > 8;
+      queued = false;
+      if (s !== state) h.classList.toggle('is-scrolled', (state = s));
+    }
+    on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(update); } }, { passive: true });
+    update();
+  }
+
+  // aria-current="page" on nav links to this path, unless the markup marked one.
+  function current() {
+    var menu = doc.getElementById('gw-mobile-menu');
+    var links = all('.gw-nav__link[href], .gw-mega__link[href]').concat(menu ? all('a[href]', menu) : []);
+    function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
+    if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
+    links.forEach(function (a) {
+      if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
+      if (norm(a.pathname) === norm(location.pathname)) a.setAttribute('aria-current', 'page');
+    });
+  }
+
+  function init() {
+    [mega, mobile, theme, reveal, header, current].forEach(function (f) {
+      try { f(); } catch (e) { console.error('[gw-website]', e); }
+    });
+  }
+  if (doc.readyState === 'loading') on(doc, 'DOMContentLoaded', init); else init();
+})();

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "website.css",
+    "website.min.css",
+    "css/",
+    "js/",
+    "system.json",
+    "AGENTS.md",
+    "CHANGELOG.md",
+    "README.md",
+    "templates/",
+    "demo/",
+    "docs/",
+    "bin/",
+    "skill/"
+  ],
+  "exports": {
+    "./website.css": "./website.css",
+    "./website.min.css": "./website.min.css",
+    "./website.js": "./js/website.js",
+    "./system.json": "./system.json",
+    "./css/*": "./css/*",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "gemboss-website": "bin/gemboss-website.mjs"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "node test/run.mjs",
+    "prepack": "node scripts/build.mjs --check && node test/run.mjs"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chriskoh26/gemboss-www.git",
+    "directory": "packages/website-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gemboss": {
+    "gapRepo": "chriskoh26/gemboss-www"
+  }
+}

package/skill/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: gemboss-website-ui
+description: Use when building or changing pages of a website that uses @gemboss/website-ui (the GemCommerce website kit) - a new page, adding or changing a section, header, footer or copy, theming the kit for a brand, or reviewing a page before hand-over. Covers the kit's rules, its templates, the check, reporting a missing kit part (gap) and upgrading the kit.
+---
+<!-- managed by @gemboss/website-ui init -->
+
+# Website pages with @gemboss/website-ui
+
+The kit lives in `node_modules/@gemboss/website-ui/` (below: `KIT/`). The person asking is often not a designer;
+the kit and its rules are how the page ends up looking designed. Compose from the kit, do not invent.
+
+## Every time
+
+1. **Read `KIT/AGENTS.md`** completely before the first page change of the session. It wins over habit and over
+   generic design advice.
+2. **See what exists**: `KIT/demo/index.html` (every component) and `KIT/docs/components.md` (every class).
+3. **Build**:
+   - New page: copy `KIT/templates/page.html`, then add sections from `KIT/templates/sections/` in the order the page
+     needs. Fill the words, delete what you did not use.
+   - Changed page: keep its kit classes; change words, order and choice of sections.
+   - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
+     scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.
+   - Another brand: change only the accent family, wash hues, logo and favicon (`KIT/docs/theming.md`).
+4. **Words**: real facts only. A missing price, number, name or date becomes a visible `[PLACEHOLDER]` and a
+   question to the person. No em dash in visible text, no "Learn more" as a whole link.
+5. **Check**: `npx gemboss-website check` and fix every error (`--fix-list` gives a to-do list). Then look at the
+   page at 320px and 1366px. Only then say it is done.
+
+## When the kit is missing something
+
+1. Make sure it is really missing (demo, components doc, two existing parts together, a variant).
+2. A one-off illustration is a page thing: site CSS with tokens, stop.
+3. A reusable thing is a gap: build a stopgap in `kit-gaps.css` (classes `kitgap-…`, tokens only, a comment naming
+   the gap), then report it:
+
+   ```sh
+   npx gemboss-website gap --title "…" --kind component --need "…" --why "…" \
+     --page https://… --stopgap kit-gaps.css
+   ```
+
+   It files a GitHub issue (gh) or writes `kit-gaps/<slug>.md` to send. Put the printed `/* gap #N */` comment
+   above the stopgap. Tell the person what you reported.
+
+## Upgrading the kit
+
+`npx gemboss-website upgrade` shows what changed, the gaps the new version closes and the install command. Upgrade,
+replace the listed `kitgap-` stopgaps with the kit's classes, run `npx gemboss-website init` (refreshes this skill)
+and the check, and look at the pages again.

package/system.json

@@ -0,0 +1,120 @@
+{
+  "$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",
+    "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,
+    "$comment": "Animate transform and opacity only. Everything is still under prefers-reduced-motion."
+  }
+}

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>