@gemboss/website-ui 0.1.0 → 0.3.0

package/css/components.css

@@ -1,6 +1,8 @@
 /* components: buttons, links, chips, badges, cards, windows, icons, lists, tables, FAQ. */
 
-/* actions are rectangles: 40px, radius 8, 14px/600, sentence case, ink fill (never the accent) */
+/* actions are rectangles: 40px, the action radius of the site's profile (8, 12 in soft), 14px/600, sentence case.
+   The fill is the action colour: ink, or the brand's accent under data-gw-action="accent" (tokens.css). Never a
+   gradient, a wash hue or a shadow. */
 .gw-btn {
   position: relative;
   display: inline-flex;
@@ -35,6 +37,43 @@
 .gw-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
 .gw-btn--block { display: flex; width: 100%; }
 .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
+/* pressed: the ink one step darker (the hover ink, as the dashboard's primary), nothing moves; the frameless variants
+   take one more step of tint */
+.gw-btn:active { background: var(--gw-action-hover); }
+.gw-btn--secondary:active { background: var(--gw-bg-soft); border-color: var(--gw-ink); }
+.gw-btn--ghost:active { background: var(--gw-line); }
+.gw-btn--on-night:active { background: var(--gw-on-night); opacity: 0.76; }
+/* loading: aria-busy="true" on the <button>. The label stays (it keeps the width and the accessible name) but is not
+   painted; a 16px ring in the button's own ink turns in its place, the dashboard's spinner. ::before, because
+   .gw-btn--sm draws its hit area with ::after. website.js ignores presses on a busy button (no double submit). */
+.gw-btn[aria-busy="true"] { cursor: progress; -webkit-text-fill-color: transparent; }
+.gw-btn[aria-busy="true"] svg { opacity: 0; }
+.gw-btn[aria-busy="true"]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
+  border-top-color: currentColor;
+  border-radius: var(--gw-radius-chip);
+  animation: gw-spin var(--gw-spin-ms) linear infinite;
+}
+@keyframes gw-spin { to { transform: rotate(360deg); } }
+/* reduced motion: the ring stands still as an ellipsis, three dots in the button's ink */
+@media (prefers-reduced-motion: reduce) {
+  .gw-btn[aria-busy="true"]::before {
+    border: 0;
+    border-radius: var(--gw-radius-0);
+    background:
+      radial-gradient(circle at 3px 50%, currentColor 1.5px, transparent 2px),
+      radial-gradient(circle at 8px 50%, currentColor 1.5px, transparent 2px),
+      radial-gradient(circle at 13px 50%, currentColor 1.5px, transparent 2px);
+    animation: none;
+  }
+}
 
 /* inline text link with an arrow that moves 2px on hover */
 .gw-link--arrow {
@@ -72,6 +111,45 @@
   color: var(--gw-accent-strong);
 }
 
+/* segmented control: one choice out of two to four (Monthly / Yearly), a radio group of buttons. The dashboard's look
+   (@gemboss/ui .ui-seg): one hairline group, the action radius, a hairline between options, the chosen one on the
+   accent tint, so it follows a brand's accent. The weight never changes with the choice: the labels do not move. */
+.gw-segmented {
+  display: inline-flex;
+  max-width: 100%;
+  border: 1px solid var(--gw-line-strong);
+  border-radius: var(--gw-radius-action);
+  background: var(--gw-surface);
+  overflow: hidden;
+  overflow: clip;
+  vertical-align: middle;
+}
+.gw-segmented--block { display: flex; width: 100%; }
+.gw-segmented > button {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: calc(var(--gw-button-height) - 2px);
+  padding: 0 16px;
+  border: 0;
+  background: transparent;
+  color: var(--gw-muted);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.gw-segmented--block > button { flex: 1 1 0; }
+.gw-segmented > button + button { border-left: 1px solid var(--gw-line-strong); }
+.gw-segmented > button:hover { background: var(--gw-bg-soft); color: var(--gw-ink); }
+.gw-segmented > button:active { background: var(--gw-line); }
+/* inside the group: the group clips its corners, so the ring sits within the option */
+.gw-segmented > button:focus-visible { outline-offset: -2px; }
+.gw-segmented > button[aria-checked="true"] { background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
+
 /* badges: small status, pill */
 .gw-badge {
   display: inline-flex;
@@ -94,8 +172,8 @@
 .gw-badge--success::before, .gw-badge--warning::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-success); }
 .gw-badge--warning::before { background: var(--gw-warning); }
 
-/* cards sit: white, 1px hairline, radius 12, the dashboard's resting shadow (Chris 24/10/2026: one language with the
-   app); no hover lift. A soft card is a tint and carries no shadow. */
+/* cards sit: white, 1px hairline, the card radius of the site's profile (12, 20 in soft), the dashboard's resting
+   shadow (Chris 24/10/2026: one language with the app); no hover lift. A soft card is a tint and carries no shadow. */
 .gw-card {
   padding: 24px;
   border: 1px solid var(--gw-line);
@@ -145,6 +223,17 @@
 .gw-window__body { padding: 16px; }
 .gw-window__body:has(> img:only-child) { padding: 0; }
 .gw-window__body > img { width: 100%; }
+/* what the numbers in the window are: "Illustrative data." under a drawn mock-up, or the source of real ones. The
+   last child of .gw-window, after __body (a <figcaption> when the window is a <figure>). */
+.gw-window__caption {
+  margin: 0;
+  padding: 0 16px 12px;
+  color: var(--gw-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: end;
+}
+.gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
 /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
 .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
@@ -233,4 +322,5 @@
   }
   .gw-btn--lg { min-height: 48px; }
   :is(a, button, label).gw-chip { min-height: var(--gw-tap-min); }
+  .gw-segmented > button { height: auto; min-height: var(--gw-tap-min); padding-block: 8px; white-space: normal; text-wrap: balance; }
 }

package/css/header.css

@@ -1,5 +1,6 @@
 /* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu below 1080px.
-   Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. */
+   Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
+   other shape, .gw-header--float (an inset card from 1080px, at the end of this file). */
 .gw-announce {
   padding: 8px var(--gw-gutter);
   border-bottom: 1px solid var(--gw-line);
@@ -83,9 +84,9 @@
   text-underline-offset: 8px;
 }
 
-/* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, radius 20,
-   the raised shadow (it is a popover), 32px inside. The bridge (::before) keeps the pointer inside while it crosses
-   the 8px gap from the trigger. */
+/* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, the popover
+   radius of the site's profile (20, 24 in soft), the raised shadow (it is a popover), 32px inside. The bridge
+   (::before) keeps the pointer inside while it crosses the 8px gap from the trigger. */
 .gw-mega {
   position: absolute;
   top: calc(100% + 8px);
@@ -95,7 +96,7 @@
   overflow-y: auto;
   transform: translateX(-50%);
   border: 1px solid var(--gw-line);
-  border-radius: 20px;
+  border-radius: var(--gw-radius-popover);
   background: var(--gw-surface);
   box-shadow: var(--gw-shadow-raised);
 }
@@ -229,3 +230,34 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 @media (max-width: 768px), (pointer: coarse) {
   .gw-theme-toggle, .gw-menu-toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
 }
+
+/* floating header (0.3.0), a brand's header profile: <header class="gw-header gw-header--float">. The same bar, mega
+   menu and script, drawn from 1080px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
+   surface at 85% over a 10px blur, one hairline, the raised shadow, a 16px gap above it and when it sticks. It is
+   wrap + 2 x 24px + its border wide, so the bar's content lines up with the page's from 1170px. Below 1080px it is
+   the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and where the
+   browser cannot blur. No other floating or blurred header: it is a profile, not a style to copy. */
+@media (min-width: 1080px) {
+  .gw-header--float {
+    top: var(--gw-header-gap);
+    width: min(100% - 32px, var(--gw-wrap) + 50px);
+    margin: var(--gw-header-gap) auto 0;
+    border: 1px solid var(--gw-line);
+    border-radius: var(--gw-radius-panel);
+    background: color-mix(in srgb, var(--gw-surface) var(--gw-header-surface), transparent);
+    -webkit-backdrop-filter: blur(var(--gw-header-blur));
+    backdrop-filter: blur(var(--gw-header-blur));
+    box-shadow: var(--gw-shadow-raised);
+  }
+  .gw-header--float.is-scrolled { border-color: var(--gw-line-strong); }
+  .gw-header--float > .gw-header__bar { width: auto; padding-inline: 24px; }
+  .gw-header--float .gw-mega { max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px); }
+  /* an anchor lands below the card, not under it */
+  :root:has(.gw-header--float) [id] { scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px); }
+}
+@media (min-width: 1080px) and (prefers-reduced-transparency: reduce) {
+  .gw-header--float { background: var(--gw-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .gw-header--float { background: var(--gw-surface); }
+}

package/css/layout.css

@@ -19,7 +19,7 @@
 @media (min-width: 768px) { .gw-section__head:not(:last-child) { margin-bottom: 48px; } }
 
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-feature, .gw-plan) > * + * { margin-top: 16px; }
-:where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-actions { margin-top: 32px; }
+:where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > :is(.gw-actions, .gw-segmented) { margin-top: 32px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-list--check { margin-top: 24px; }
 
 /* a row of actions: one .gw-btn, then a secondary or a link */

package/css/prose.css

@@ -0,0 +1,120 @@
+/* prose: long-form reading (a blog post, a docs page, terms and privacy) inside one wrapper, .gw-prose. The plain HTML a
+   CMS or a markdown renderer writes is styled as it comes: headings, paragraphs, lists, quotes, code, tables, images
+   and captions, on the kit's scales. The rules sit at :where() weight and reach bare elements only (lists without a
+   class, the wrapper's own headings, quotes and tables), so a kit component placed inside the prose (.gw-table,
+   .gw-window, .gw-list--check, .gw-quote, .gw-btn) keeps its own look. --sm: a 16px body for docs and legal. */
+.gw-prose {
+  max-width: 68ch;
+  min-width: 0;
+  color: var(--gw-ink);
+  font-size: var(--gw-body-size);
+  line-height: var(--gw-body-leading);
+  overflow-wrap: break-word;
+}
+.gw-prose--sm { font-size: 16px; }
+
+/* the flow: each block 20px below the one before it (16px in --sm); more air around headings and large blocks */
+:where(.gw-prose) > * + * { margin-top: 20px; }
+:where(.gw-prose--sm) > * + * { margin-top: 16px; }
+:where(.gw-prose) > * + :where(figure, img, video, pre, table, hr, .gw-table, .gw-window),
+:where(.gw-prose) > :where(figure, img, video, pre, table, hr, .gw-table, .gw-window) + * { margin-top: 32px; }
+:where(.gw-prose) > * + h2 { margin-top: 48px; }
+:where(.gw-prose) > * + h3 { margin-top: 40px; }
+:where(.gw-prose) > * + h4 { margin-top: 32px; }
+:where(.gw-prose--sm) > * + h2 { margin-top: 40px; }
+:where(.gw-prose--sm) > * + h3 { margin-top: 32px; }
+:where(.gw-prose--sm) > * + h4 { margin-top: 24px; }
+:where(.gw-prose) > h1 + * { margin-top: 24px; }
+:where(.gw-prose) > :is(h2, h3, h4) + * { margin-top: 12px; }
+
+/* headings: the article's own steps of the type scale, not the page's display sizes (an h2 in a post is not a
+   section headline); h1 is the article's title at the section-headline size */
+:where(.gw-prose) > :is(h1, h2, h3, h4) {
+  color: var(--gw-ink);
+  font-weight: var(--gw-heading-weight);
+  letter-spacing: var(--gw-heading-tracking);
+  line-height: 1.25;
+}
+:where(.gw-prose) > h1 { font-size: var(--gw-display-h2); font-weight: var(--gw-display-weight); letter-spacing: var(--gw-display-tracking); line-height: var(--gw-heading-leading); }
+:where(.gw-prose) > h2 { font-size: 30px; line-height: 1.2; }
+:where(.gw-prose) > h3 { font-size: 24px; }
+:where(.gw-prose) > h4 { font-size: 20px; }
+:where(.gw-prose--sm) > h2 { font-size: 24px; }
+:where(.gw-prose--sm) > h3 { font-size: 20px; }
+:where(.gw-prose--sm) > h4 { font-size: 18px; }
+
+/* lists without a class: plain bullets and numbers, the markers muted */
+:where(.gw-prose :is(ul, ol):not([class])) { padding-left: 24px; }
+:where(.gw-prose ul:not([class])) { list-style: disc; }
+:where(.gw-prose ol:not([class])) { list-style: decimal; }
+:where(.gw-prose :is(ul, ol):not([class]) > li + li),
+:where(.gw-prose :is(ul, ol):not([class]) > li > * + *),
+:where(.gw-prose :is(ul, ol):not([class]) > li > :is(ul, ol)) { margin-top: 8px; }
+:where(.gw-prose :is(ul, ol):not([class]) > li)::marker { color: var(--gw-muted); font-variant-numeric: tabular-nums; }
+
+/* a quotation: a rule on its left and muted words, as the dashboard's reader draws it */
+:where(.gw-prose) > blockquote { padding-left: 20px; border-left: 3px solid var(--gw-line-strong); color: var(--gw-muted); }
+:where(.gw-prose) > blockquote > * + * { margin-top: 12px; }
+
+:where(.gw-prose) > hr { height: 0; border: 0; border-top: 1px solid var(--gw-line); }
+:where(.gw-prose) :is(sup, sub) { line-height: 0; }
+
+/* code: inline, a tint chip that wraps on a phone (radius 6 in every profile: it follows the text, not the shapes);
+   a block scrolls inside its own box */
+:where(.gw-prose) :is(pre, code, kbd, samp) { font-family: var(--gw-font-mono); }
+:where(.gw-prose) code {
+  padding: 2px 6px;
+  border-radius: var(--gw-radius-6);
+  background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
+  color: var(--gw-ink);
+  font-size: 16px;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+:where(.gw-prose--sm) code { font-size: 14px; }
+:where(.gw-prose) :is(h1, h2, h3, h4) code { font-size: inherit; }
+:where(.gw-prose) figcaption code { font-size: 13px; }
+/* in a table a name stays whole: the table scrolls instead */
+:where(.gw-prose) :is(th, td) code { font-size: 13px; overflow-wrap: normal; white-space: nowrap; }
+:where(.gw-prose) pre {
+  overflow-x: auto;
+  padding: 16px 20px;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-bg-soft);
+  color: var(--gw-ink);
+  font-size: 14px;
+  line-height: 1.6;
+  tab-size: 2;
+}
+:where(.gw-prose) pre code { padding: 0; border-radius: var(--gw-radius-0); background: none; font-size: inherit; overflow-wrap: normal; }
+
+/* images and captions (an image inside a .gw-window keeps the window's square edges) */
+:where(.gw-prose) > :is(img, video),
+:where(.gw-prose) > :is(p, figure) > :is(img, video) { border-radius: var(--gw-radius-card); }
+:where(.gw-prose) figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
+/* a table straight from markdown scrolls inside its own box, never the page. When you write the markup, the .gw-table
+   wrapper (a region with a name and tabindex="0") is the better choice. */
+:where(.gw-prose) > table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-surface);
+  border-collapse: collapse;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-overflow-scrolling: touch;
+}
+:where(.gw-prose) > table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
+:where(.gw-prose) > table thead th { background: var(--gw-bg-soft); color: var(--gw-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
+:where(.gw-prose) > table tbody th { font-weight: 500; }
+:where(.gw-prose) > table td { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
+:where(.gw-prose) > table tbody tr:last-child > * { border-bottom: 0; }
+:where(.gw-prose) > table caption { padding: 12px 16px; color: var(--gw-muted); font-size: 13px; text-align: left; }
+/* on a phone a cell keeps room for a few words a line: the table scrolls further instead of squeezing its text */
+@media (max-width: 767px) { :where(.gw-prose) > table td { min-width: 160px; } }

package/css/tokens.css

@@ -2,6 +2,7 @@
 :root {
   color-scheme: light;
   --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --gw-text-11: 11px;
   --gw-text-12: 12px;
   --gw-text-13: 13px;
@@ -45,11 +46,13 @@
   --gw-radius-12: 12px;
   --gw-radius-16: 16px;
   --gw-radius-20: 20px;
+  --gw-radius-24: 24px;
   --gw-radius-999: 999px;
   --gw-radius-action: 8px;
   --gw-radius-chip: 999px;
   --gw-radius-card: 12px;
   --gw-radius-panel: 16px;
+  --gw-radius-popover: 20px;
   --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
   --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
   --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
@@ -57,10 +60,14 @@
   --gw-wrap-narrow: 780px;
   --gw-gutter: 22px;
   --gw-header-height: 64px;
+  --gw-header-gap: 16px;
+  --gw-header-surface: 85%;
+  --gw-header-blur: 10px;
   --gw-button-height: 40px;
   --gw-tap-min: 44px;
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
+  --gw-spin-ms: 700ms;
   --gw-wash-pink: #ff6f5e;
   --gw-wash-violet: #7c8af7;
   --gw-wash-sky: #43b0ff;
@@ -196,3 +203,17 @@
   --gw-success-soft: #132a22;
   --gw-warning: #e0b341;
 }
+/* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
+:root[data-gw-action="accent"],
+:root[data-gw-action="accent"] :is(.gw-band--night, .gw-showcase) {
+  --gw-action: var(--gw-accent);
+  --gw-action-hover: var(--gw-accent-strong);
+  --gw-on-action: var(--gw-on-accent);
+}
+/* radius profile "soft": data-gw-radius="soft" on <html> */
+:root[data-gw-radius="soft"] {
+  --gw-radius-action: 12px;
+  --gw-radius-card: 20px;
+  --gw-radius-panel: 24px;
+  --gw-radius-popover: 24px;
+}

package/demo/brand-profiles.html

@@ -0,0 +1,199 @@
+<!doctype html>
+<!-- Kit demo: one brand that chose all three profiles (docs/theming.md). The profiles are two attributes on <html> and
+     one class on the header; the only CSS of the brand is the accent family below. Sample text, not a brand's copy. -->
+<html lang="en" data-gw-action="accent" data-gw-radius="soft">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GemPages-style example · website UI kit</title>
+  <meta name="description" content="A kit demo with all three brand profiles on: the accent action, soft corners and the floating header, with a GemPages-style blue.">
+  <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="../website.css">
+  <style>
+    /* The brand's whole CSS: the accent family, light and dark, in one :root block (docs/theming.md).
+       Light: #3c67ff fills the primary button, white words on it are 4.58:1 (6.36:1 on the hover #2f52d6).
+       #2f52d6 as accent-strong is an EXAMPLE, not confirmed by the GemPages team: accent text needs it, because
+       #3c67ff is 4.13:1 on --gw-bg-soft; #2f52d6 is 6.36:1 on white, 5.73:1 on --gw-bg-soft, 5.54:1 on its tint.
+       Dark and night bands: #7c9bff is 7.37:1 on the dark page, and #0d0d12 words on it are 7.37:1. */
+    :root {
+      --gw-accent-light: #3c67ff;
+      --gw-accent-strong-light: #2f52d6;
+      --gw-accent-soft-light: #eaefff;
+      --gw-on-accent-light: #ffffff;
+      --gw-accent-dark: #7c9bff;
+      --gw-accent-strong-dark: #a9beff;
+      --gw-accent-soft-dark: #16213d;
+      --gw-on-accent-dark: #0d0d12;
+    }
+  </style>
+</head>
+<body class="gw-page">
+  <a class="gw-skip" href="#main">Skip to content</a>
+
+  <div class="gw-announce" role="region" aria-label="Announcement">Kit demo: a GemPages-style brand with all three profiles on. Sample text, not a brand's page. <a href="index.html">Back to the full demo</a></div>
+  <header class="gw-header gw-header--float" data-gw-header>
+    <div class="gw-wrap gw-header__bar">
+      <a class="gw-brand" href="brand-profiles.html"><svg class="gw-brand__mark" viewBox="0 0 26 26" aria-hidden="true"><rect width="26" height="26" rx="7" style="fill:var(--gw-accent)"/><path d="M8 9h10M8 13h10M8 17h6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/></svg><span class="gw-brand__name">Example 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-kit" data-gw-mega="gw-mega-kit">The kit</button>
+            <div class="gw-mega" id="gw-mega-kit" hidden>
+              <div class="gw-wrap gw-mega__grid">
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">See it</p>
+                  <a class="gw-mega__link" href="index.html#components-h"><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="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg></span><span><b>Components</b><i>Buttons, chips, cards, tables</i></span></a>
+                  <a class="gw-mega__link" href="index.html#features-h"><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>Sections</b><i>Hero, features, pricing, FAQ</i></span></a>
+                </div>
+                <div class="gw-mega__col">
+                  <p class="gw-mega__heading">Brands</p>
+                  <a class="gw-mega__link" href="theme-example.html"><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="8"/><path d="M12 4a8 8 0 0 1 0 16z"/></svg></span><span><b>Accent only</b><i>A brand that changed one colour</i></span></a>
+                  <a class="gw-mega__link" href="#profiles"><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="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg></span><span><b>All three profiles</b><i>This page</i></span></a>
+                </div>
+                <a class="gw-mega__feature" href="#profiles"><b>Three named choices</b><i>Action colour, corners and header. Chosen once per site.</i><span class="gw-link gw-link--arrow">See the profiles</span></a>
+              </div>
+            </div>
+          </li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="index.html">Default demo</a></li>
+          <li class="gw-nav__item"><a class="gw-nav__link" href="theme-example.html">Accent only</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-btn gw-btn--secondary gw-btn--sm" href="index.html">Default demo</a>
+        <a class="gw-btn gw-btn--sm" href="#profiles">See the profiles</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>The kit</summary>
+          <ul class="gw-mobile-menu__list">
+            <li><a class="gw-mobile-menu__link" href="index.html#components-h">Components</a></li>
+            <li><a class="gw-mobile-menu__link" href="index.html#features-h">Sections</a></li>
+            <li><a class="gw-mobile-menu__link" href="#profiles">All three profiles</a></li>
+          </ul>
+        </details>
+        <a class="gw-mobile-menu__top" href="index.html">Default demo</a>
+        <a class="gw-mobile-menu__top" href="theme-example.html">Accent only</a>
+        <div class="gw-mobile-menu__actions">
+          <a class="gw-btn gw-btn--block" href="#profiles">See the profiles</a>
+          <a class="gw-btn gw-btn--secondary gw-btn--block" href="index.html">Default demo</a>
+        </div>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="gw-hero" aria-labelledby="hero-h">
+      <div class="gw-hero__wash" aria-hidden="true"></div>
+      <div class="gw-wrap">
+        <p class="gw-label">Brand profiles</p>
+        <h1 id="hero-h"><span class="gw-dim">The same kit, three named choices.</span> Still one family.</h1>
+        <p class="gw-lead">This brand fills its primary button with its accent, rounds its corners one step and floats its header as a card. Everything else is the kit as it ships.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="#profiles">See the three profiles</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-section--soft" id="profiles" aria-labelledby="profiles-h">
+      <div class="gw-wrap">
+        <div class="gw-section__head">
+          <p class="gw-label">Three knobs</p>
+          <h2 id="profiles-h"><span class="gw-dim">Set once for the site.</span> Every component follows.</h2>
+          <p class="gw-lead">Each knob is a named profile, not a free value. A brand picks one of each, and the kit does the rest.</p>
+        </div>
+        <div class="gw-grid--3">
+          <div class="gw-card">
+            <h3>Action colour</h3>
+            <p>The primary button takes the accent. Its label must reach 4.5:1 on the fill in light and dark, or the check fails.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Soft corners</h3>
+            <p>Actions 12px, cards 20px, panels 24px. Chips stay pills, and nothing else is allowed in between.</p>
+          </div>
+          <div class="gw-card">
+            <h3>Floating header</h3>
+            <p>An inset card over a light blur, from 1080px. The same bar and mega menu; phones keep the flat bar.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section" aria-labelledby="shapes-h">
+      <div class="gw-wrap gw-split">
+        <div>
+          <p class="gw-label">Radius profiles</p>
+          <h2 id="shapes-h">Two sets of corners, nothing in between.</h2>
+          <p class="gw-lead">Tight is the default. Soft rounds every action, card and panel by one step.</p>
+          <div class="gw-actions">
+            <button class="gw-chip" type="button" aria-pressed="false">Tight</button>
+            <button class="gw-chip" type="button" aria-pressed="true">Soft</button>
+            <span class="gw-badge gw-badge--accent">Chosen on the page</span>
+          </div>
+          <div class="gw-actions">
+            <a class="gw-btn" href="#rules-h">See what stays fixed</a>
+            <a class="gw-btn gw-btn--ghost" href="theme-example.html">Accent only</a>
+          </div>
+        </div>
+        <div class="gw-table" role="region" aria-labelledby="shapes-h" tabindex="0">
+          <table>
+            <thead><tr><th scope="col">Profile</th><th scope="col">Action</th><th scope="col">Card</th><th scope="col">Panel</th></tr></thead>
+            <tbody>
+              <tr><th scope="row">Tight, the default</th><td>8px</td><td>12px</td><td>16px</td></tr>
+              <tr><th scope="row">Soft</th><td>12px</td><td>20px</td><td>24px</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-section--soft" aria-labelledby="rules-h">
+      <div class="gw-wrap gw-wrap--narrow">
+        <div class="gw-section__head">
+          <p class="gw-label">Still fixed</p>
+          <h2 id="rules-h"><span class="gw-dim">Three knobs, no more.</span> The rest is the kit's.</h2>
+        </div>
+        <div class="gw-faq">
+          <details class="gw-faq__item"><summary>Can a brand choose its own radius?</summary><p>No. It picks tight or soft. A radius of its own, or a token it redefines, is reported by the check.</p></details>
+          <details class="gw-faq__item"><summary>Can a heading use the accent?</summary><p>No. Words in a heading stay ink or muted, never the accent or a gradient. Bands are white, soft grey or night, never the accent. Labels stay in sentence case.</p></details>
+          <details class="gw-faq__item"><summary>What changes on a phone?</summary><p>Nothing. Below 1080px the floating header is the flat bar, and the menu opens the same way.</p></details>
+          <details class="gw-faq__item"><summary>What if a visitor turns transparency off?</summary><p>The header becomes a solid card. A browser that cannot blur gets the same solid card.</p></details>
+        </div>
+      </div>
+    </section>
+
+    <section class="gw-section gw-band--night" aria-labelledby="cta-h">
+      <div class="gw-wrap gw-cta">
+        <p class="gw-label">Night band</p>
+        <h2 id="cta-h">The accent button keeps its contrast at night.</h2>
+        <p class="gw-lead">In a night band and in dark mode it takes the dark accent with dark words, also checked at 4.5:1.</p>
+        <div class="gw-actions">
+          <a class="gw-btn" href="theme-example.html">Open the accent example</a>
+          <a class="gw-btn gw-btn--secondary" href="index.html">Open the default demo</a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="gw-footer">
+    <div class="gw-wrap">
+      <div class="gw-footer__bottom">
+        <span>Website UI kit demo. Sample text.</span>
+        <ul aria-label="Demo pages">
+          <li><a href="index.html">Default demo</a></li>
+          <li><a href="theme-example.html">Accent only</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+
+  <script src="../js/website.js" defer></script>
+</body>
+</html>