@gemboss/website-ui 0.12.0 → 0.14.0

package/css/components.css

@@ -188,6 +188,29 @@
 .gw-badge--danger { background: var(--gw-danger-soft); color: var(--gw-ink); }
 .gw-badge--danger::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-danger); }
 
+/* Status chip (0.14.0): gemboss.ai's "pills", a state inside a drawn screen of the product (Live, a test, Early access), as
+   the GemBoss app draws it: a rounded rectangle (the action radius), 28px, 12px/500 words, neutral by default. --success is
+   live (its words in success's text form), --accent a test, --early neutral with the dot in the accent. The dot is an
+   optional `.gw-status__dot` before the words. A label that names a thing (New, Recommended) is a .gw-badge. */
+.gw-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 6px 8px;
+  border-radius: var(--gw-radius-action);
+  background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
+  color: var(--gw-ink-2);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+.gw-status--success { background: var(--gw-success-soft); color: var(--gw-success-strong); }
+.gw-status--accent { background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
+.gw-status__dot { width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: currentColor; }
+.gw-status--early .gw-status__dot { background: var(--gw-accent); }
+
 /* 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 {
@@ -221,35 +244,48 @@
 :where(.gw-card, .gw-feature) p { font-size: 16px; color: var(--gw-muted); }
 
 /* a framed screen: a browser or app window around a screenshot or a drawn mock-up */
+/* 0.14.0: gemboss.ai's frame, 1:1: it floats (the raised shadow), 13px at 20px lines; the bar 40px with 12px sides, three
+   8px dots 6px apart, the words 16px after them and 8px between the bar's parts, one line, cut when too long; bold words in
+   the bar in ink. */
 .gw-window {
+  position: relative;
   overflow: hidden;
   border: 1px solid var(--gw-line);
   border-radius: var(--gw-radius-card);
   background: var(--gw-surface);
   color: var(--gw-ink);
-  box-shadow: var(--gw-shadow);
+  box-shadow: var(--gw-shadow-raised);
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 20px;
 }
 .gw-window__bar {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   min-height: 40px;
-  padding: 8px 16px;
+  padding: 0 12px;
   border-bottom: 1px solid var(--gw-line);
   color: var(--gw-muted);
   font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .gw-window__bar::before {
   content: "";
   flex: none;
-  width: 36px;
+  width: 8px;
   height: 8px;
-  background:
-    radial-gradient(circle at 4px 4px, var(--gw-line-strong) 4px, transparent 4px),
-    radial-gradient(circle at 18px 4px, var(--gw-line-strong) 4px, transparent 4px),
-    radial-gradient(circle at 32px 4px, var(--gw-line-strong) 4px, transparent 4px);
+  margin-right: 36px;
+  border-radius: var(--gw-radius-chip);
+  background: var(--gw-line-strong);
+  box-shadow: 14px 0 0 var(--gw-line-strong), 28px 0 0 var(--gw-line-strong);
+}
+.gw-window__bar > :first-child { min-width: 0; overflow: hidden; }
+.gw-window__bar b { color: var(--gw-ink); font-weight: 600; }
+/* up to 560px the bar's words wrap rather than being cut: the bar grows, its parts at the top (gemboss.ai) */
+@media (max-width: 560px) {
+  .gw-window__bar { align-items: flex-start; padding-block: 8px; white-space: normal; }
+  .gw-window__bar > :first-child { overflow: visible; }
 }
 .gw-window__body { padding: 16px; }
 .gw-window__body:has(> img:only-child) { padding: 0; }
@@ -266,24 +302,43 @@
 }
 .gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
+/* figure (0.13.0, Gemians): a photo and its caption where a section shows one outside the prose (beside words in a
+   split, under a hero's actions): the picture at the card radius, the caption 14px, muted, 12px under it, as a figure
+   in .gw-prose. A screen of the product goes in .gw-window instead. */
+.gw-figure > :is(img, video, picture) { display: block; width: 100%; height: auto; border-radius: var(--gw-radius-card); }
+.gw-figure > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
+.gw-figure > figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
 /* 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; }
 .gw-icon svg { width: 20px; height: 20px; }
 
 /* list with check marks */
-.gw-list--check { display: grid; gap: 12px; padding: 0; list-style: none; }
-.gw-list--check > li { position: relative; padding-left: 24px; }
+/* 0.14.0: gemboss.ai's, 1:1: 14px at 1.5 lines, the words 28px in (a 20px column for the mark, 8px after it); the mark a
+   16px tile on the accent's tint, 4px down, with the tick in the accent (the tick follows the theme and the brand). The mark
+   is out of the flow, so an item may hold words and links side by side. */
+.gw-list--check { display: grid; gap: 12px; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
+.gw-list--check > li { position: relative; padding-left: 28px; }
 .gw-list--check > li::before {
   content: "";
   position: absolute;
   left: 0;
-  top: 6px;
-  top: calc((1lh - 16px) / 2);
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--gw-radius-4);
+  background: var(--gw-accent-soft);
+}
+.gw-list--check > li::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
   width: 16px;
   height: 16px;
   background: var(--gw-accent);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
 }
 
 /* table: the wrapper scrolls inside its own box on phones, the page never does */
@@ -306,10 +361,12 @@
 .gw-table--compare thead th:not(:first-child) { text-align: center; }
 .gw-table--compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--gw-surface); min-width: 160px; }
 
-/* FAQ: native details/summary, no script */
+/* FAQ: native details/summary, no script. 0.14.0: gemboss.ai's, 1:1 (the question in the brand face alone, at the line
+   height around it; the + is the face's own glyph in the accent, turned 45 degrees when open; the answer 33em wide,
+   rising in as the item opens) */
 .gw-faq { display: grid; gap: 12px; }
 .gw-faq__item {
-  padding: 0 24px;
+  padding: 2px 24px;
   border: 1px solid var(--gw-line);
   border-radius: var(--gw-radius-card);
   background: var(--gw-surface);
@@ -322,25 +379,28 @@
   gap: 16px;
   min-height: 44px;
   padding: 20px 0;
+  font-family: var(--gw-font-action);
   font-size: 18px;
   font-weight: 600;
-  line-height: 1.4;
   list-style: none;
   cursor: pointer;
 }
 .gw-faq__item > summary::-webkit-details-marker { display: none; }
 .gw-faq__item > summary::after {
-  content: "";
-  flex: none;
-  width: 16px;
-  height: 16px;
-  background:
-    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 16px 2px no-repeat,
-    linear-gradient(var(--gw-accent), var(--gw-accent)) center / 2px 16px no-repeat;
-  transition: transform 0.2s var(--gw-ease);
+  content: "+";
+  color: var(--gw-accent);
+  font-size: 24px;
+  font-weight: 400;
+  transition: transform 0.2s ease;
 }
 .gw-faq__item[open] > summary::after { transform: rotate(45deg); }
-.gw-faq__item > :not(summary) { margin: 0 0 20px; max-width: 68ch; color: var(--gw-muted); font-size: 16px; }
+.gw-faq__item > :not(summary) { margin: 0 0 20px; color: var(--gw-muted); font-size: 16px; }
+.gw-faq__item > p { max-width: 33em; }
+@keyframes gw-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.gw-faq__item[open] > :not(summary) { animation: gw-faq-in 0.28s ease; }
+@media (prefers-reduced-motion: reduce) { .gw-faq__item[open] > :not(summary) { animation: none; } }
+/* phones: the rows tighten (gemboss.ai), never under the 44px a finger needs */
+@media (max-width: 560px) { .gw-faq__item > summary { padding-block: 4px; } }
 
 /* touch: every control is at least 44px tall. A button up to 768px (0.12.0, as gemboss.ai: by the width, not the
    pointer), its label wrapping (and tighter) from 480px down in the page's <main>, so a long one never pushes the page

package/css/header.css

@@ -703,3 +703,16 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   :root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
   :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
 }
+
+/* ---- 0.13.0: the brand's logo as one drawing (Gemians): the mark and the wordmark in one file, in place of the mark and
+   the name, 26px tall, its width the file's. Its alt is the brand's name. A logo drawn for dark grounds only (a white
+   wordmark) comes as a second file, .gw-brand__logo--dark, right after the first: it shows in dark (the system's or the
+   toggle's) and the first one hides, the toggle icons' rule. One file that reads on both: no --dark. */
+.gw-brand__logo { display: block; flex: none; width: auto; height: 26px; }
+.gw-brand__logo--dark { display: none; }
+:root[data-theme="dark"] .gw-brand__logo--dark { display: block; }
+:root[data-theme="dark"] .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-brand__logo--dark { display: block; }
+  :root:not([data-theme="light"]) .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+}

package/css/ratings.css

@@ -26,7 +26,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  margin: 0;
   padding: 0;
   list-style: none;
 }

package/css/sections.css

@@ -13,7 +13,7 @@
     radial-gradient(420px 320px at 52% 118%, color-mix(in srgb, var(--gw-wash-mint) 10%, transparent), transparent 62%);
 }
 .gw-hero h1 .gw-dim { display: block; }
-.gw-hero > .gw-wrap > .gw-window { margin-top: 48px; }
+.gw-hero > .gw-wrap > :is(.gw-window, .gw-figure) { margin-top: 48px; }
 .gw-hero--center { text-align: center; }
 .gw-hero--center > .gw-wrap > * { margin-inline: auto; }
 .gw-hero--center .gw-actions { justify-content: center; }
@@ -46,7 +46,7 @@
 .gw-logos img { width: auto; height: 28px; }
 
 /* stats: three or four facts, each with its source */
-.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
+.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; list-style: none; }
 .gw-stats__value { font-size: var(--gw-display-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
 .gw-stats__label { margin-top: 8px; max-width: 28ch; color: var(--gw-muted); font-size: 14px; }
 .gw-stats__source { margin-top: 8px; color: var(--gw-muted); font-size: 12px; }
@@ -79,7 +79,6 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px 24px;
-  margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: gw-step;

package/css/tokens.css

@@ -126,6 +126,7 @@
   --gw-on-accent: var(--gw-on-accent-light);
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
+  --gw-success-strong: #0a6a4c;
   --gw-warning: #9a6700;
   --gw-warning-soft: #fbf1dc;
   --gw-danger: #b42318;
@@ -158,6 +159,7 @@
     --gw-on-accent: var(--gw-on-accent-dark);
     --gw-success: #34c38f;
     --gw-success-soft: #132a22;
+    --gw-success-strong: #34c38f;
     --gw-warning: #e0b341;
     --gw-warning-soft: #2b2410;
     --gw-danger: #ff6b5a;
@@ -193,6 +195,7 @@
   --gw-on-accent: var(--gw-on-accent-dark);
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
+  --gw-success-strong: #34c38f;
   --gw-warning: #e0b341;
   --gw-warning-soft: #2b2410;
   --gw-danger: #ff6b5a;
@@ -227,6 +230,7 @@
   --gw-on-accent: var(--gw-on-accent-light);
   --gw-success: #007f5f;
   --gw-success-soft: #e3f1df;
+  --gw-success-strong: #0a6a4c;
   --gw-warning: #9a6700;
   --gw-warning-soft: #fbf1dc;
   --gw-danger: #b42318;
@@ -259,6 +263,7 @@
   --gw-on-accent: var(--gw-on-accent-dark);
   --gw-success: #34c38f;
   --gw-success-soft: #132a22;
+  --gw-success-strong: #34c38f;
   --gw-warning: #e0b341;
   --gw-warning-soft: #2b2410;
   --gw-danger: #ff6b5a;

package/demo/header.html

@@ -44,7 +44,7 @@
 <body class="gw-page">
   <a class="gw-skip" href="#main">Skip to content</a>
 
-  <div class="gw-announce" role="region" aria-label="Announcement"><span class="gw-announce__tag">NEW</span> The GemBoss community is live. <a href="https://community.gemboss.ai">Join founders building brand-true stores &rarr;</a></div>
+  <div class="gw-announce" role="region" aria-label="Announcement"><span class="gw-announce__tag">New</span> The GemBoss community is live. <a href="https://community.gemboss.ai">Join founders building brand-true stores &rarr;</a></div>
   <header class="gw-header" data-gw-header>
     <div class="gw-header__bar">
       <a class="gw-brand" href="https://gemboss.ai/" data-gw-show="brand:gemboss"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a><a class="gw-brand" href="header.html#gempages" data-gw-show="brand:gempages" hidden><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>

package/docs/components.md

@@ -214,6 +214,22 @@ small text on a tint).
 
 Don't: make a badge clickable; write a sentence in it; use success or warning for anything but state.
 
+### Status chip `.gw-status`
+
+0.14.0, gemboss.ai's "pills": a state inside a drawn screen of the product, as the GemBoss app draws it (Live, A/B test,
+Early access). A rounded rectangle at the action radius (8px; 12px in `soft`), 28px tall, 12px/500 words, neutral by
+default (ink at 8%). `--success` is live (its words in `--gw-success-strong`, 5.6:1 on the tint), `--accent` a test,
+`--early` neutral with the dot in the accent. The dot is an optional `<span class="gw-status__dot">` before the words.
+
+```html
+<span class="gw-status gw-status--success"><span class="gw-status__dot"></span>Live</span>
+<span class="gw-status gw-status--accent">A/B test</span>
+<span class="gw-status gw-status--early"><span class="gw-status__dot"></span>Early access</span>
+```
+
+A badge (`.gw-badge`, a pill) labels a thing on the page itself (New, Recommended); a status chip shows the state of
+something inside a screen. Don't: a status chip outside a window or a drawn screen; a sentence in it; a click handler.
+
 ### Cards `.gw-card`
 
 A white box with a 1px hairline, the card radius (12, 20 in `soft`), the resting shadow `--gw-shadow` (as the dashboard's cards), 24px padding
@@ -256,6 +272,11 @@ A framed screen: `__bar` (three dots and where the screen lives), `__body` (16px
 `<img>`) and `__caption`. Use it around real product screenshots, or around a drawn mock-up built in the site's CSS with
 the tokens.
 
+0.14.0, gemboss.ai's frame 1:1: it floats (`--gw-shadow-raised`), 13px words at 20px lines. The bar is 40px with 12px
+sides: three 8px dots, then where the screen lives 16px after them (12px, muted, one line, cut when too long; `<b>` words
+in ink), then anything else 8px apart (a status chip, an action of the mock-up, which keep the window's ink). Up to 560px
+the bar's words wrap instead and the bar grows, its parts at the top.
+
 `__caption` says what the numbers in the window are: 12px, muted, at the end of the window, the last child after
 `__body` (a `<figcaption>` when the window is a `<figure>`). Under a drawn mock-up whose numbers are made up it says
 **"Illustrative data."**, in exactly these words: vi "Dữ liệu minh hoạ.", zh "示意数据。". Add a second sentence only when
@@ -274,6 +295,24 @@ the mock-up shows a demo brand ("Vital Glow is a GemBoss demo brand."). Under re
 Don't: put interactive controls inside a mock-up; show made-up numbers without the caption; write the caption in
 other words ("Sample", "Demo numbers") or leave it in English on a translated page.
 
+### Figure `.gw-figure`
+
+0.13.0 (Gemians): a photo and its caption outside the prose, where a section shows one: beside the words of a split,
+under a hero's actions (48px below, as a window). The picture takes the card radius; the `<figcaption>` is 14px,
+muted, 12px under it, the look of a figure inside `.gw-prose`. A screen of the product goes in `.gw-window`; a photo
+of people, a place or a product goes here.
+
+```html
+<figure class="gw-figure">
+  <img src="/img/team-2025.webp" alt="The team together in the office, 2025" width="1000" height="471" loading="lazy">
+  <figcaption>The GemCommerce team, 2025.</figcaption>
+</figure>
+```
+
+Don't: a photo of people without their permission, or of another brand without its; a caption that repeats the alt
+word for word (the alt says what is in the picture, the caption says what it is); a frame, a shadow or a radius of
+your own.
+
 ### Icon `.gw-icon`
 
 A 20px box for an inline stroke SVG (1.7–2px stroke, `currentColor`, `aria-hidden="true"`). Inside `.gw-feature` it
@@ -287,7 +326,10 @@ Don't: emoji as icons; filled multi-colour icons; icon-only buttons without `ari
 
 ### Check list `.gw-list--check`
 
-A `<ul>` whose items are led by an accent check mark.
+A `<ul>` whose items are led by a check mark: 0.14.0, gemboss.ai's, 1:1: 14px at 1.5 lines, the words 28px in, the mark a
+16px tile on the accent's tint (4px corners, 4px down) with the tick in the accent, so it follows the theme and the brand.
+An item may hold words and links side by side (a plain link in an item gets the link style). An item with its own
+vertical padding moves the mark with it: set `top` on its `::before` and `::after`.
 
 ```html
 <ul class="gw-list--check"><li>Checkout stays on Shopify</li><li>No overage fees</li></ul>
@@ -314,7 +356,10 @@ Don't: put the class on the `<table>` itself; tables for layout; colour cells to
 
 ### FAQ `.gw-faq`
 
-Native `<details class="gw-faq__item">` with a `<summary>`, no script. The + turns into × when open.
+Native `<details class="gw-faq__item">` with a `<summary>`, no script. 0.14.0, gemboss.ai's 1:1: the question 18px/600 in
+the brand face alone, the + the face's own glyph in the accent, turned 45 degrees into × when open; the answer muted,
+16px, a paragraph at most 33em, rising in as it opens (not under reduced motion). On phones (up to 560px) the rows
+tighten, never under 44px.
 
 ```html
 <div class="gw-faq">
@@ -341,6 +386,7 @@ level. A brand changes what it fills in and the tokens (colours, the Stage, the
 | `.gw-header--float` | with `.gw-header`, a brand's header profile: from 1081px the same bar as an inset card (panel radius, the surface at 85% over a blur, one hairline, the raised shadow, 16px from the top); the flat bar up to 1080px; solid under `prefers-reduced-transparency` |
 | `.gw-header__bar` | the row inside: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), 32px between its parts |
 | `.gw-brand`, `__mark`, `__name` | logo (34px, its corners clipped at 8px) and name, linking home; a 44px row up to 768px |
+| `.gw-brand__logo`, `--dark` | 0.13.0: a brand's logo drawn as one file (mark and wordmark), 26px tall, in place of `__mark` and `__name`, `alt` the brand's name; `--dark` a second file shown in dark only, right after the first (docs/theming.md) |
 | `.gw-nav`, `__list`, `__item`, `__trigger`, `__chev`, `__link` | the desktop nav (from 1081px), 14px weight 500, 0.005em tighter; `__trigger` is a section's link that opens its mega panel (its 12px `__chev` turns while open), `__link` a plain link; the current page (`aria-current="page"`) or section (`aria-current` on a trigger) in the accent's strong ink, weight 600 |
 | `.gw-mega` (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`), `__body`, `__grid`, `__col`, `__heading`, `__link`, `__aside`, `__card`, `__art`, `__card-text`, `__go`, `__foot`, `__foot-start`, `__foot-end`, `__cta`, `__new` | 0.11.0, gemboss.ai's mega menu: a panel on one surface that morphs between panels (the popover radius, raised shadow), a caret at the open name, a pill under the hovered name, a highlight under the hovered row; columns of rows (a name and one line), the pictures beside them (`__aside`: the panel's own `__card`, a row's preview from its `<template>`), each picture on the Stage (`__art`: the deep iris ground, `--gw-stage-*`); an optional strip under it. The page behind dims and blurs (`.gw-scrim`). Script: `docs/markup-contract.md` |
 | `.gw-header__actions` | Sign in, a second text action, Start free, the menu button (4px apart; the button 8px further) |

package/docs/theming.md

@@ -3,8 +3,9 @@
 A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and chooses six things, **and nothing else**:
 
 1. **the accent variables** (eight, light and dark),
-2. **the wash hues** (only if the brand has its own),
-3. **the logo** (and the favicon),
+2. **the wash hues** (only if the brand has its own), and the colours of its **announcement bar** and **Stage** (0.13.0,
+   only if it uses them and wants its own),
+3. **the logo** (and the favicon): a mark beside the name, or one drawing of both (0.13.0),
 4. **the action colour mode**: `data-gw-action="ink|accent"` on `<html>`,
 5. **the radius profile**: `data-gw-radius="tight|soft"` on `<html>`,
 6. **the header style**: the flat bar, or `.gw-header--float`.
@@ -46,9 +47,30 @@ brand's page lights in the brand's own colour, in light, in dark and in night ba
 takes the corners of the element it lights, so both radius profiles hold. A brand does not choose its colour, its
 strength or its size (they are tokens), and never a second colour.
 
-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.
+The logo and the favicon are files, not variables, in the header and footer partials and `<link rel="icon">` in the
+page head. The logo is one of two shapes:
+
+- **a mark beside the name** (GemBoss): `<img class="gw-brand__mark">` (34×34, SVG preferred, `alt=""` because the name
+  is written next to it) and `<span class="gw-brand__name">`;
+- **one drawing of both** (0.13.0, Gemians: the mark and the wordmark in one file): `<img class="gw-brand__logo">`, 26px
+  tall, its width the file's, its `alt` the brand's name. A logo that only works on a dark ground (a white wordmark)
+  comes with a second file in ink for the light theme, or the other way round: the file for light grounds first, then
+  the file for dark grounds as `class="gw-brand__logo gw-brand__logo--dark"`. The kit shows one per theme (the system's
+  setting or the toggle). Keep the brand's own drawing: recolour the wordmark, never redraw it in the kit's type.
+
+```html
+<a class="gw-brand" href="/"><img class="gw-brand__logo" src="/assets/img/logo.png" alt="Gemians" width="150" height="26"><img class="gw-brand__logo gw-brand__logo--dark" src="/assets/img/logo-on-dark.png" alt="Gemians" width="150" height="26"></a>
+```
+
+`check` reports a logo without its name in `alt`, without `width` and `height`, or a dark file without the light one
+right before it (`brand-markup`).
+
+**The announcement bar and the Stage** (0.13.0). The bar over the header (`--gw-announce-*`, `system.json`
+`color.announce`) and the Stage the mega menu's pictures sit on (`--gw-stage-*`, `color.stage`) are GemBoss's iris by
+default. A brand that shows them may set its own in the same `:root` block: the bar's `bg`, `ink`, `line`, `tag`,
+`tag-ink`, `link`, `link-line`; the Stage's `glow`, `glow-2`, `top`, `bottom`, `dot`, `ink`. Both stay the same in
+light and dark. `check` computes the bar's words and link on its ground and the Stage's words on both ends of its
+gradient, and fails below 4.5:1 (`brand-contrast`).
 
 The footer (0.7.0, `templates/footer.html`) is the same for every brand; a brand fills it. Its family row lists the
 brand's siblings (a GemPages site: GemBoss, GemX, GemUpsells), its Ask AI row asks about the brand, and its wordmark
@@ -106,8 +128,9 @@ button filled from site CSS (`accent-button`).
 
 `check` also reports: colours outside the tokens, a redefined kit token (`token-redefined`, including the radius and
 action tokens), overrides of `.gw-*` classes, an unknown profile or one set on another element than `<html>`
-(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), and, on a page with
-`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`).
+(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), on a page with
+`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`), a brand's own announcement bar or
+Stage with words below 4.5:1 (`brand-contrast`), and a one-file logo without its markup (`brand-markup`).
 
 ## A full example
 
@@ -136,7 +159,7 @@ action tokens), overrides of `.gw-*` classes, an unknown profile or one set on a
 …
 <header class="gw-header gw-header--float" data-gw-header>
   <div class="gw-wrap gw-header__bar">
-    <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>
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="34" height="34"><span class="gw-brand__name">GemPages</span></a>
 ```
 
 ## Check the contrast before you ship
@@ -145,8 +168,10 @@ The accent family is read as text: the kit draws links, step numbers, active men
 `--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.
+1. **Accent text on white at least 4.5:1**: `--gw-accent-strong-light` on `#ffffff` and on `--gw-bg-soft`
+   (`#f2f3f5`), where links sit in soft sections. The plain `--gw-accent-light` is never text (icons, marks, the focus
+   ring, the featured plan's hairline): **3:1** on `#ffffff` is enough (WCAG 1.4.11), so a gold or a light green can
+   stay bright there (0.13.0; this line asked 4.5:1 of it before, which no gold passes).
 2. `--gw-accent-strong-light` on `--gw-accent-soft-light`: at least 4.5:1 (the accent badge, the active chip and the
    chosen option of a segmented control).
 3. `--gw-accent-dark` and `--gw-accent-strong-dark` on `#0d0d12` (dark page) and on `#0c0e14` (night band): at
@@ -158,7 +183,9 @@ So:
    build does the same for its own colours.
 
 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
+never passes as text on white: darken it for `-strong-light`, keep it near the brand for `-light` (3:1) and bright
+for `-dark`. A colour that needs dark words on it (gold, yellow) cannot be the button's fill and its text colour at
+once: keep the ink button (Gemians does). 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, and keep the ink button.
 

package/js/website.js

@@ -1,9 +1,9 @@
-/*! @gemboss/website-ui 0.12.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.14.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.12.0';
+var version = '0.14.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;
 var still, lights;

package/js/website.mjs

@@ -6,7 +6,7 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.12.0';
+var version = '0.14.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
 var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.12.0",
+  "version": "0.14.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",

package/system.json

@@ -21,6 +21,7 @@
       "on-accent": "#ffffff",
       "success": "#007f5f",
       "success-soft": "#e3f1df",
+      "success-strong": "#0a6a4c",
       "warning": "#9a6700",
       "warning-soft": "#fbf1dc",
       "danger": "#b42318",
@@ -51,6 +52,7 @@
       "on-accent": "#0d0d12",
       "success": "#34c38f",
       "success-soft": "#132a22",
+      "success-strong": "#34c38f",
       "warning": "#e0b341",
       "warning-soft": "#2b2410",
       "danger": "#ff6b5a",
@@ -91,7 +93,7 @@
     "roles": {
       "action": "The thing you click: ink, or the brand's accent when the site chose the accent action profile (profiles.action).",
       "accent": "Links, focus rings, active state, a chart line, the 8px label square; the primary button only through the accent action profile. Never body text, never words in a heading, never a section band.",
-      "success/warning/danger": "State only. Their -soft tints are grounds: a tip or a warning callout, a success or an error badge, a field marked invalid. danger (0.6.0, gap #28) is the dashboard's --gemboss-danger family: the words of a field's error and the fill of a destructive button (on-danger on it).",
+      "success/warning/danger": "State only. success-strong (0.14.0) is success's text form, the words of a status chip on its tint (gemboss.ai's emerald ink, 5.6:1). Their -soft tints are grounds: a tip or a warning callout, a success or an error badge, a field marked invalid. danger (0.6.0, gap #28) is the dashboard's --gemboss-danger family: the words of a field's error and the fill of a destructive button (on-danger on it).",
       "line-control": "The border of a form control (a field, a checkbox, a radio), 0.6.0: it must reach 3:1 on bg, bg-soft and surface, light and dark, where line and line-strong are hairlines that do not. Like the dashboard's --gemboss-field-line.",
       "wash": "The hero wash and illustrations only.",
       "scrim": "The veil over the page while a mega menu is open (0.11.0): a dim and a 4px blur, as gemboss.ai.",

package/templates/page.html

@@ -134,7 +134,7 @@
     <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>
+          <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><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]">

package/templates/sections/form.html

@@ -11,6 +11,8 @@
     role="status" line ("Sent. We'll reply to name@example.com.").
   - Consent boxes start unchecked, say exactly what the reader gets, and are never required to get something else.
   - One field and its button (a newsletter, "email me the guide"): the .gw-form-inline row, see templates/footer.html.
+  As a page's first screen (a contact page, 0.13.0): the heading is the page's one <h1>, drawn at the section size
+  (<h1 class="gw-h2">), and the page needs no hero above it.
   Limits: three fields, one .gw-btn; no field that the team does not read.
 -->
 <section class="gw-section" aria-labelledby="[form-h]">

package/templates/sections/hero.html

@@ -3,7 +3,8 @@
   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)
+  one .gw-btn and one secondary action. Instead of the window, a photo: <figure class="gw-figure"> with its caption.
+  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.
 -->

package/templates/sections/split.html

@@ -2,7 +2,7 @@
   Split: one idea told in words beside a figure (a real screen, or a drawn mock-up of the product).
   .gw-split--reverse puts the figure on the left on wide screens; on phones the words always come first.
   Alternate --reverse between consecutive splits. Limits: label, h2, at most two lines, a check list of three to
-  five items, one action (a link or one button). The figure is a .gw-window or a <figure> with alt text; numbers in
+  five items, one action (a link or one button). The figure is a .gw-window (a screen) or a <figure class="gw-figure"> (a photo, with alt text and a caption); numbers in
   a window that are not real get the caption "Illustrative data.", real ones their source.
 -->
 <section class="gw-section">

package/templates/site/app/[[...path]]/route.js

@@ -0,0 +1,23 @@
+// Every static HTML page, served byte for byte from the built file and prerendered at build time, so each page is a
+// file on the CDN. A more specific route (app/blog/[slug]/page.js…) wins over this catch-all. Unknown URL: 404.html, 404.
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { ROOT, pages } from "../../lib/pages.mjs";
+
+export const dynamic = "force-static";
+export const dynamicParams = true;
+
+export function generateStaticParams() {
+  return [...pages().keys()].map((route) => ({ path: route === "/" ? [] : route.slice(1).split("/") }));
+}
+
+const HTML = { "content-type": "text/html; charset=utf-8" };
+
+export async function GET(_req, { params }) {
+  const { path } = await params;
+  const route = "/" + (path || []).join("/");
+  const file = pages().get(route);
+  if (file) return new Response(await readFile(join(/*turbopackIgnore: true*/ ROOT, file)), { status: 200, headers: HTML });
+  return new Response(await readFile(join(/*turbopackIgnore: true*/ ROOT, "404.html")), { status: 404, headers: HTML });
+}

package/templates/site/assets/kit-gaps.css

@@ -0,0 +1,3 @@
+/* Stopgaps for what @gemboss/website-ui does not have yet (AGENTS.md section 9). Each: classes prefixed kitgap-, the
+   kit's tokens and scales only, never a .gw-* override, and a comment naming its gap (gap #N, from
+   npx gemboss-website gap). npx gemboss-website upgrade says when the kit ships it: then delete the stopgap. */

package/templates/site/assets/site.css

@@ -0,0 +1,16 @@
+/* The site's own CSS, linked after the kit (website.css). Two jobs only (AGENTS.md sections 7 and 8):
+   1. the brand's choices, in ONE :root block: its accent family and wash, and if it has its own, its announcement bar
+      and Stage colours (docs/theming.md). Delete the lines the brand keeps from the kit; GemBoss sets none.
+   2. what the kit cannot know: an illustration, a drawn mock-up of the product. Tokens and scales only, classes with
+      the site's own prefix, never .gw-*. Something reusable the kit lacks is a gap: kit-gaps.css. */
+:root {
+  /* --gw-accent-light: #5661f5;         the accent on light pages: links' marks, focus ring, label square, check marks */
+  /* --gw-accent-strong-light: #3a44de;  accent text: 4.5:1 on --gw-bg and --gw-bg-soft */
+  /* --gw-accent-soft-light: #eef0fe;    its tint */
+  /* --gw-on-accent-light: #ffffff;      words on it (the button, under data-gw-action="accent") */
+  /* --gw-accent-dark: #7c84ff;          the same four in dark mode and night bands */
+  /* --gw-accent-strong-dark: #a3a9ff; */
+  /* --gw-accent-soft-dark: #1f2140; */
+  /* --gw-on-accent-dark: #0d0d12; */
+  /* --gw-wash-pink: #ff6f5e; --gw-wash-violet: #7c8af7; --gw-wash-sky: #43b0ff; --gw-wash-mint: #1fcf9f; */
+}