# BAGS DESIGN KIT — Poster Card System
**Design Kit v1.1 · Oct 24 2026 · derived from SOTU 2026-10 (fffe295) · v1.1 adds §3.9 Wordmark & lockup**
Living HTML version: https://bags.holdings/brand/ · OG card renderer: https://bags.holdings/brand/og-card.html · Source of truth: `public/state-of-the-union-2026-10/index.html` (the broadsheet) and `public/press-release-template/index.html`.

---

## 1. Purpose and scope

This kit codifies the **Bags Holdings poster card** — the black card on cream paper with a white condensed-bold uppercase headline — as the brand standard for every Bags document headline that lives in a **meta tag** or sits at the top of a page.

**A "meta-tag headline" is:** the `<title>`, `og:title`, `twitter:title` **and** the on-page H1 / poster-card headline. They are the same line of copy, written once under the doctrine in §5.

**Governs (mandatory):**
- **News** — The Bags Holdings broadsheets, weekly briefs, Chronicle items.
- **Announcements** — product ships, changelog entries on ship day, partner notes.
- **Press releases** — FOR IMMEDIATE RELEASE documents, dateline + boilerplate.
- **API docs** — reference pages, endpoint groups, guides, changelogs (`docs.bags.fm`, `bags.holdings` doc pages, README headlines).
- Every og:image generated for any of the above.

**Does NOT govern:**
- In-app UI (bags.fm web app, mobile apps, Bubl, Cashback, TG mini-app) — those keep their product design systems.
- Charts, dashboards and live stat pages (`/stats`, `/pnl-leaderboard`, `/screener`).
- Social post body copy (the headline may be reused as the post, the body is free).
- Legal, ToS, privacy documents.

---

## 2. Tokens

Copy the `:root` block verbatim. Two modes: **paper** (default, cream) and **future** (black — prophecy / dark). No third colour exists.

### 2.1 Colour

| Token | Value | Use |
|---|---|---|
| `--paper` | `#f7f4ee` | page background (paper mode), theme-color |
| `--paper2` | `#efebe2` | tinted panels (THE PLAY box, code blocks) |
| `--ink` | `#0b0b0b` | text, rules, card background, masthead, theme-color (future mode) |
| `--ink2` | `#2b2a28` | deck / body text |
| `--mut` | `#6a665f` | captions, sources, muted labels |
| `--hair` | `#c9c3b6` | hairline rules (1px) |
| `--rule` | `#0b0b0b` | poster bars (6px / 8px) |
| `--sig` | `#e0252b` | signal red: ▼ setback, PROPOSED outline, RATIFY chip, NOW node, share "Copied" state |
| card caption | `rgba(255,255,255,.72)` | grey caption on black card |
| card hairline | `rgba(255,255,255,.22)` | rule inside black card |
| card share border | `rgba(255,255,255,.6)` | SHARE outline on black card |
| ticker ▼ | `#ff5a5f` | red on black (ticker only) |
| future spine | `hsl(calc(355 - 140*var(--ft,0)) 92% 56%)` | hue-shift accent, see §2.8 |

Red is a **signal**, never a decoration: it marks setbacks, un-ratified items, NOW, and the copied state. If a page has red on it for any other reason, it is wrong.

### 2.2 Type

Fonts (Google Fonts, one link tag):
`https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wdth,wght@100..125,400..900&family=Inter:wght@400;500;600;700;800;900&display=swap`

| Token | Stack | Use |
|---|---|---|
| `--display` | `'Archivo Black','Archivo',Inter,'Helvetica Neue',Helvetica,Arial,sans-serif` | headlines, wordmark, ticker values, drop caps, pull-quotes |
| `--wide` | `'Archivo','Archivo Black',…` with `font-stretch:118%` `font-weight:900` | hero numerals (`.hero-num`), plank numbers |
| `--sans` / `--body` | `'Inter','Helvetica Neue',Helvetica,Arial,sans-serif` | chips, kickers, decks, body, captions |
| `--mono` | `ui-monospace,SFMono-Regular,Menlo,monospace` | file paths, code, source refs |

Type scale (px → clamp):

| Role | Size | Leading | Tracking | Case |
|---|---|---|---|---|
| Wordmark | `clamp(44px,7.2vw,84px)` | .88 | −.04em | UPPER |
| H1 hed | `clamp(40px,6.6vw,84px)` | .95 | −.025em | UPPER |
| H2 hed | `clamp(30px,3.6vw,46px)` | .95 | −.02em | UPPER |
| H3 hed | 25px (lg 28px; ≤720: 22px) | 1.0 | −.012em | UPPER |
| Poster card hed | `clamp(19px,1.7vw,23px)` | .96 | −.02em | UPPER |
| Hero numeral | `2.1em` of parent (card: `1.9em`; timeline: `1.8em`) | .86 | −.045em | tabular-nums |
| Section head | `clamp(22px,2.6vw,30px)` | 1 | −.02em | UPPER |
| Ticker value | 30px (print 18pt) | 1 | −.03em | tabular-nums |
| Pull-quote | 22px (sm 18px) | 1.12 | −.015em | sentence |
| Deck | 18px (≤720: 16px) | 1.42 | 0 | sentence, `--ink2` |
| Body | 15.5px (≤720: 15px) | 1.58–1.6 | 0 | sentence |
| Standfirst | 16px | 1.55 | 0 | sentence |
| Card caption | 12.5px | 1.45 | 0 | sentence, white .72 |
| Kicker / chip | 9–10.5px | 1.3 | **+.14em** (chips .16–.22em) | UPPER, 700–800 |
| Source line | 10px | 1.5 | +.04em | sentence, `--mut` |
| Folio / colophon | 10–10.5px | 1.6 | +.12–.14em | UPPER, 600 |

Rules of the scale: display type is **always uppercase** and **always tight** (negative tracking); label type is **always uppercase** and **always loose** (positive tracking). Nothing in between. `text-wrap:balance`, `hyphens:none` on every headline.

### 2.3 Spacing

| Token | Value |
|---|---|
| Sheet max width | 1180px; padding `0 28px 60px` (≤720: `0 16px 40px`) |
| Card padding | `20px 18px 16px` |
| Card gap (grid) | 12px |
| Card min-height | 170px |
| Card headline right-pad (room for SHARE) | 58px |
| Card inner gap (hed → caption) | 12px; caption `padding-top:10px` |
| Section head margin-top | 56px |
| Item spacing | `padding-bottom:16px; margin-bottom:16px` |
| Column gap | 30px (front lead: 26px) |
| Masthead padding | `18px 26px 24px` |
| Chip padding | `4px 8px 3px` (small: `3px 7px 2px`; tag: `2px 6px 1px`) |
| Share padding | `3px 7px 2px` |

### 2.4 Radius

**0.** Every box, chip, button and card is square. `border-radius:0` is set explicitly on `.sh`. The only circles are timeline nodes and progress rings.

### 2.5 Borders and rules

| Rule | Spec |
|---|---|
| Hairline | `1px solid var(--hair)` (`#c9c3b6`); inside black: `1px solid rgba(255,255,255,.22)` |
| Ink rule | `1px solid var(--ink)` |
| Ledger head | `4px solid var(--ink)` top, 1px bottom |
| Poster bar (folio, era, pull-quote, colophon, label row) | `6px solid var(--ink)` |
| Section bar | `8px solid var(--ink)` top + `1px` bottom |
| Box | `2px solid var(--ink)` |
| THE PLAY | `border-left:4px solid var(--ink)` on `--paper2` |
| Chip outline | `1px solid currentColor` |
| Flag | `border-bottom:1px dotted var(--mut)` |
| Edge of the future | `3px solid var(--sig)` top + bottom |

### 2.6 Grid

- Poster cards: `grid-template-columns:repeat(3,minmax(0,1fr))` → **2 col ≤1000px** → **1 col ≤720px**.
- Front page: `2fr 1fr` → 1 col ≤860px.
- Ticker: 6 → 3 (≤1000) → 2 (≤720).
- Text columns: `columns:3|2` with `column-rule:1px solid var(--hair)`; collapse to 1 ≤720px.
- Breakpoints: **1000 / 860 / 720**.

### 2.7 Motion

| Token | Value |
|---|---|
| Mode change (paper ↔ future) | `background-color .6s ease, color .6s ease` |
| Accent colour change | `.4s` |
| Card reveal | `opacity .3s ease, transform .3s ease` from `translateY(18px)`; scroll-driven where `animation-timeline:view()` is supported (`entry 0% → 30%`) |
| Stamp flip | `.32s cubic-bezier(.2,.8,.2,1)`, year delayed `.05s` |
| Sweep | `.9s cubic-bezier(.2,.8,.2,1)` |
| Pulse | `.7s ease-out × 2` |
| Share "Copied" state | 1600ms, then revert |
| Cursor blink | `1s steps(2,start) infinite` |
| Easing | `cubic-bezier(.2,.8,.2,1)` for anything that moves; `ease` for colour |
| Reduced motion | `@media(prefers-reduced-motion:reduce){transition:none!important;animation:none!important}` and every reveal forced visible |

### 2.8 Modes and the hue-shift rule

**Paper mode (default):** `--paper` background, `--ink` text. `theme-color #f7f4ee`.

**Future mode (prophecy / dark):** the section inverts — `--bg:#0b0b0b; --fg:#fff; --fg2:rgba(255,255,255,.78); --mu:rgba(255,255,255,.55); --hr:rgba(255,255,255,.18)`. A 1px/3px scanline overlay (`repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)`, `mix-blend-mode:screen`) is allowed only in future mode. `theme-color #0b0b0b`.

**Hue-shift rule:** anything written about the future carries a progress scalar `--ft ∈ [0,1]` (0 = next month, 1 = the horizon / "beyond"). The accent is `hsl(calc(355 − 140·ft) 92% 56%)` — it starts at signal red (355°) and walks to blue (215°) as the prophecy gets further out. The reader can *see* how speculative a claim is. The rule exists so that future content is never dressed as a receipt: the further out, the further from red. Print collapses future mode to black on white.

The poster card itself is always ink-on-paper **or** white-on-ink. It is never tinted.

### 2.9 Print

`@media print`: white paper, black ink, 10.5pt body; `.sh` and `.toc` hidden; `.secthead` breaks a page; cards, boxes, quotes, rows `break-inside:avoid`; black surfaces keep `print-color-adjust:exact`; ticker value 18pt; links lose their underline.

---

## 3. Components

All components assume the `:root` tokens from §2 and the fonts link. Class names are the production class names — copy them exactly so the share script and print rules keep working.

### 3.0 Base (paste once)

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wdth,wght@100..125,400..900&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
:root{--paper:#f7f4ee;--paper2:#efebe2;--ink:#0b0b0b;--ink2:#2b2a28;--mut:#6a665f;--rule:#0b0b0b;--hair:#c9c3b6;--sig:#e0252b;
  --display:'Archivo Black','Archivo',Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --wide:'Archivo','Archivo Black','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;--body:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)} a:hover{border-bottom-width:2px}
.sheet{max-width:1180px;margin:0 auto;padding:0 28px 60px}
.hed{font-family:var(--display);font-weight:900;text-transform:uppercase;text-align:left;hyphens:none;text-wrap:balance}
h1.hed{font-size:clamp(40px,6.6vw,84px);line-height:.95;letter-spacing:-.025em;margin-top:14px}
h2.hed{font-size:clamp(30px,3.6vw,46px);line-height:.95;letter-spacing:-.02em;margin-top:10px}
h3.hed{font-size:25px;line-height:1;letter-spacing:-.012em;margin-top:8px}
.hed .hero-num{display:block;font-family:var(--wide);font-weight:900;font-stretch:118%;font-size:2.1em;line-height:.86;letter-spacing:-.045em;margin-bottom:.1em;font-variant-numeric:tabular-nums}
.deck{font-weight:400;font-size:18px;line-height:1.42;color:var(--ink2);margin-top:14px}
.src{font-family:var(--sans);font-size:10px;letter-spacing:.04em;color:var(--mut);margin-top:7px}
.src .f,.f{font-family:var(--mono);font-size:10px}
@media(max-width:720px){.sheet{padding:0 16px 40px}body{font-size:15px}h1.hed{font-size:40px}h2.hed{font-size:30px}h3.hed{font-size:22px}.deck{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
</style>
```

### 3.1 Poster Card

Three variants share one markup. The `<b>` is the headline, the `<span>` is the caption, the `<button class="sh">` is Share. The `<li id>` is the share anchor; `data-target` points at the canonical heading elsewhere on the page (optional).

```html
<ul class="narr">
  <li class="lbl"><div class="kicker">The Chronicle · eras</div></li>

  <!-- default -->
  <li id="n-h-machine"><b>Launch. Trade. Claim. The Machine Works.<button class="sh" type="button" data-target="h-machine" aria-label="Copy headline and link">Share</button></b><span>Launch → trade → fees accrue → creators claim. Use when proving the core.</span></li>

  <!-- hero-numeral -->
  <li id="n-h-onepercent"><b><span class="hero-num">1%</span> of Volume. Forever. To Who It’s About.<button class="sh" type="button" data-target="h-onepercent" aria-label="Copy headline and link">Share</button></b><span>The product in one line. Use whenever someone asks what Bags is.</span></li>

  <!-- prophecy (dark / future) — same card, caption carries the disclaimer -->
  <li class="lbl"><div class="kicker">From the Future · prophecy · fiction until it’s a receipt</div></li>
  <li id="n-t-2028-nov" data-ft=".9"><b><span class="hero-num">$10B</span> a Month. Every Country. One Receipt.<button class="sh" type="button" data-target="t-2028-nov" aria-label="Copy headline and link">Share</button></b><span>NOV 2028 · prophecy. Rooted in: BagsPay receipt → global. Use when someone asks where this goes — say “fiction until it’s a receipt.”</span></li>
</ul>
```

```css
.narr{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.narr li{display:flex;flex-direction:column;gap:12px;padding:20px 18px 16px;background:var(--ink);color:#fff;min-height:170px;position:relative;border:0;align-items:stretch}
.narr li b{font-family:var(--display);font-weight:900;font-size:clamp(19px,1.7vw,23px);line-height:.96;text-transform:uppercase;letter-spacing:-.02em;hyphens:none;color:#fff;flex:1;padding-right:58px;text-wrap:balance}
.narr li b .hero-num{display:block;font-family:var(--wide);font-weight:900;font-stretch:118%;font-size:1.9em;line-height:.86;letter-spacing:-.045em;margin-bottom:.1em}
.narr li span{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72);text-align:left;padding-top:10px;border-top:1px solid rgba(255,255,255,.22)}
.narr li .sh{position:absolute;top:12px;right:12px;margin:0;border-color:rgba(255,255,255,.6);color:#fff}
.narr li .sh:hover{background:#fff;color:var(--ink)} .narr li .sh.done{background:var(--sig);border-color:var(--sig)}
.narr li.lbl{grid-column:1 / -1;background:transparent;color:var(--ink);padding:18px 0 0;min-height:0;border-top:6px solid var(--ink);display:block}
.narr li.lbl .kicker{margin-top:8px;font-size:10px}
/* prophecy variant: hue-shifted hairline + share outline; --ft from data-ft via JS or inline style */
.narr li[data-ft]{--sp:hsl(calc(355 - 140*var(--ft,0)) 92% 56%)}
.narr li[data-ft] span{border-top-color:var(--sp)} .narr li[data-ft] .sh{border-color:var(--sp)}
@media(max-width:1000px){.narr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.narr{grid-template-columns:1fr}}
@media print{.narr li{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
```

Card rules: hero numeral alone on its own line, headline ≤60 chars, caption = **when to use it** (not a restatement), prophecy captions begin `MON YYYY · prophecy. Rooted in: <roadmap item>.` and end with the disclaimer. The `data-ft` attribute needs `style="--ft:.9"` or a one-liner: `document.querySelectorAll('[data-ft]').forEach(function(el){el.style.setProperty('--ft',el.dataset.ft)})`.

### 3.2 Kicker chip system

One system, six tones. Chips are Inter 700–800, 9–10.5px, +.14em, uppercase, `padding:4px 8px 3px`, square.

```html
<div class="kicker"><span class="dt">Jan 2026</span> <span class="up">▲</span> RECORD</div>
<div class="kicker"><span class="dt">Oct 2026</span> <span class="chip now">NOW</span></div>
<div class="kicker bad"><span class="dt">Aug 2025</span> ▼ SETBACK</div>
<div class="kicker neutral"><span class="dt">Nov 2028</span> · PROPHECY · <span class="prop">Proposed</span></div>
<p class="orders"><b>Your orders</b> Post the chart. Tag the creator.</p>
<div class="kicker"><span class="dt">Era 0</span> <span class="flag">(reconstructed)</span></div>
<!-- API method chips — same system, method in the chip, path in mono -->
<div class="kicker api"><span class="m get">GET</span> <code>/trade/quote</code></div>
<div class="kicker api"><span class="m post">POST</span> <code>/trade/swap</code></div>
<div class="kicker api"><span class="m del">DELETE</span> <code>/fee-share/:id</code> <span class="prop">Beta</span></div>
```

```css
.kicker{font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;color:#fff;background:var(--ink);display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 8px 3px;line-height:1.3}
.kicker.bad{background:var(--sig)}
.kicker.neutral{background:transparent;color:var(--ink);padding:0;font-size:10.5px}
.kicker .dt{color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.1em} .kicker.neutral .dt{color:var(--mut)}
.up{color:var(--ink)} .dn{color:var(--sig)} .kicker .up{color:#fff}
.chip.now{background:var(--sig);color:#fff;padding:3px 7px 2px;outline:1px dashed rgba(255,255,255,.75);outline-offset:-3px}
.prop{display:inline-block;font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sig);border:1px solid var(--sig);padding:1px 5px 0;line-height:1.5;vertical-align:middle}
.kicker .prop{color:#fff;border-color:rgba(255,255,255,.8)} .kicker.neutral .prop{color:var(--sig);border-color:var(--sig)}
.orders b{display:inline-block;background:var(--ink);color:#fff;font-family:var(--display);font-weight:900;font-size:9px;letter-spacing:.2em;padding:4px 8px 3px;text-transform:uppercase;margin-right:7px;outline:1px dashed rgba(255,255,255,.75);outline-offset:-3px;vertical-align:1px}
.flag{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700;border-bottom:1px dotted var(--mut)} .kicker .flag{color:#fff;border-bottom-color:#fff}
/* API method chips */
.kicker.api{background:transparent;color:var(--ink);padding:0;gap:8px}
.kicker.api code{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}
.kicker.api .m{display:inline-block;padding:3px 7px 2px;font-size:9px;letter-spacing:.16em;line-height:1.3;background:var(--ink);color:#fff}
.kicker.api .m.get{background:var(--ink)} .kicker.api .m.post{background:#fff;color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px}
.kicker.api .m.put,.kicker.api .m.patch{background:var(--paper2);color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px}
.kicker.api .m.del{background:var(--sig)}
```

Method chip logic: **GET = solid ink** (reads are safe), **POST = outlined** (writes), **PUT/PATCH = paper2 outlined**, **DELETE = signal red** (destructive). No green, no blue, no amber — the chip system has two inks and one signal.

### 3.3 Masthead bar

```html
<header class="ears">
  <div class="ear"><a class="pub" href="https://bags.fm" title="Bags"><img src="/brand/wordmark/bags-lockup-h-paper.svg" alt="BAGS" width="86" height="18" /></a><span class="ear-t">Vol. I · No. 1<br /><b>Oct 23, 2026</b></span></div>
  <div class="ear r">SOL <b>$—</b><br />bags.holdings</div>
  <div class="wordmark">The Bags Holdings<small>News · Announcements · Press · API</small></div>
</header>
<div class="folio"><span><b>For immediate release</b> · [City], [Mon D, YYYY]</span><span>Section A · Front page</span></div>
```

```css
.ears{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px 18px;margin-top:14px;padding:18px 26px 24px;background:var(--ink);color:#fff}
.ear{grid-row:1;font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.6;max-width:240px} .ear.r{justify-self:end;text-align:right} .ear b{color:#fff;font-weight:800}
.wordmark{grid-column:1 / -1;grid-row:2;font-family:var(--display);font-weight:900;font-size:clamp(44px,7.2vw,84px);line-height:.88;letter-spacing:-.04em;text-align:center;text-transform:uppercase;white-space:nowrap;color:#fff}
.wordmark small{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(9px,1vw,11px);letter-spacing:.42em;text-transform:uppercase;margin-top:12px;color:rgba(255,255,255,.7)}
.folio{border-top:6px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0 6px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)} .folio b{color:var(--ink);font-weight:800}
.cta{display:inline-block;background:var(--sig);color:#fff;font-family:var(--display);font-size:10px;letter-spacing:.22em;padding:5px 10px 4px;text-transform:uppercase;margin-right:8px;border:0} a.cta:hover{background:var(--ink)}
@media(max-width:860px){.ears{grid-template-columns:1fr;padding:18px 16px 16px}.ear{display:none}.wordmark{white-space:normal}}
@media(max-width:720px){.wordmark{font-size:44px}}
```

For API docs the wordmark reads **BAGS API** with the small line `Reference · Guides · Changelog`.

### 3.4 Markets / ticker strip

```html
<div class="ticker">
  <div><div class="lbl">Volume · 7d</div><div class="val">$412M</div><div class="chg up">▲ 18% w/w</div></div>
  <div><div class="lbl">Traders · 7d</div><div class="val">61,204</div><div class="chg dn">▼ 4%</div></div>
  <div><div class="lbl">Launches</div><div class="val">3,118</div><div class="chg fl">flat</div></div>
  <div><div class="lbl">Fees to creators</div><div class="val">$4.1M</div><div class="chg up">▲ 22%</div></div>
  <div><div class="lbl">Take rate</div><div class="val">1.0%</div><div class="chg fl">by design</div></div>
  <div><div class="lbl">Robinhood Chain</div><div class="val">412 ETH</div><div class="chg up">▲</div></div>
</div>
```

```css
.ticker{margin-top:26px;background:var(--ink);color:#fff;display:grid;grid-template-columns:repeat(6,1fr);font-family:var(--sans)}
.ticker div{padding:12px 14px 11px;border-right:1px solid rgba(255,255,255,.22)} .ticker>div:last-child{border-right:0}
.ticker .lbl{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.ticker .val{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;margin-top:5px;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.ticker .chg{font-size:11px;margin-top:5px;color:rgba(255,255,255,.75)} .ticker .up{color:#fff} .ticker .dn{color:#ff5a5f} .ticker .fl{color:rgba(255,255,255,.75)}
@media(max-width:1000px){.ticker{grid-template-columns:repeat(3,1fr)}.ticker>div:nth-child(3){border-right:0}}
@media(max-width:720px){.ticker{grid-template-columns:1fr 1fr}.ticker>div:nth-child(3){border-right:1px solid rgba(255,255,255,.22)}.ticker>div:nth-child(even){border-right:0}}
```

For API docs the ticker becomes the **status strip**: `Uptime 30d · p50 latency · Rate limit · Version · Last deploy · Status`.

### 3.5 Rule system

```html
<hr class="rule" />        <!-- hairline -->
<hr class="rule ink" />    <!-- 1px ink -->
<hr class="rule dbl" />    <!-- 6px poster bar -->
<div class="secthead"><div class="nm">The Narratives<span>Every headline, screenshot-ready</span></div><div class="pg">Section H · For the community</div></div>
```

```css
.rule{border:0;border-top:1px solid var(--hair);margin:18px 0} .rule.ink{border-top-color:var(--ink)} .rule.dbl{border-top:6px solid var(--ink)}
.secthead{margin-top:56px;border-top:8px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.secthead .nm{font-family:var(--display);font-weight:900;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.secthead .nm span{display:block;font-family:var(--sans);font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink2);margin:6px 0 0;font-size:14px;line-height:1.4}
.secthead .pg{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
```

Hierarchy: **8px** opens a section · **6px** opens an era / quote / colophon · **4px** heads a ledger · **2px** boxes · **1px ink** closes · **1px hair** separates.

### 3.6 Share button + clipboard script

```html
<h2 class="hed" id="h-machine">Launch. Trade. Claim. The Machine Works.<button class="sh" type="button" aria-label="Copy headline and link">Share</button></h2>
```

```css
.sh{appearance:none;background:transparent;border:1px solid var(--ink);color:var(--ink);font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px 2px;cursor:pointer;vertical-align:middle;margin-left:8px;line-height:1.5;border-radius:0}
.sh:hover{background:var(--ink);color:#fff} .sh.done{background:var(--sig);border-color:var(--sig);color:#fff}
h1 .sh,h2 .sh,h3 .sh{position:relative;top:-4px}
@media print{.sh{display:none}}
```

The script (10 lines, unchanged from production). Copies `HEADLINE — https://bags.holdings/<slug>/#id`; button reads **Copied** in signal red for 1.6s. `#copyall` copies the `#narrblock` plain-text twin.

```html
<script>
(function(){
  var base = location.origin + location.pathname;
  function copy(text, btn){
    var done = function(){ btn.classList.add('done'); var t = btn.textContent; btn.textContent = 'Copied'; setTimeout(function(){ btn.classList.remove('done'); btn.textContent = t; }, 1600); };
    if (navigator.clipboard) navigator.clipboard.writeText(text).then(done, done); else { var ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); done(); }
  }
  document.addEventListener('click', function(e){
    var btn = e.target.closest('.sh'); if (!btn) return;
    if (btn.id === 'copyall') { copy(document.getElementById('narrblock').textContent, btn); return; }
    var host = btn.closest('[id]'); var id = btn.getAttribute('data-target') || (host && host.id);
    var hed = btn.parentNode.cloneNode(true); hed.querySelectorAll('.sh').forEach(function(x){ x.remove(); });
    copy(hed.textContent.trim().replace(/\s+/g,' ') + ' — ' + base + (id ? '#' + id : ''), btn);
  });
})();
</script>
```

### 3.7 Pull-quote

```html
<blockquote class="pq"><b>The goal.</b> #1 protocol on Solana by creator income. One receipt at a time.<span class="who">The Editors · Oct 2026</span></blockquote>
```

```css
.pq{break-inside:avoid;margin:16px 0 20px;padding:14px 0 12px;border-top:6px solid var(--ink);border-bottom:1px solid var(--ink);font-family:var(--display);font-weight:900;font-size:22px;line-height:1.12;letter-spacing:-.015em;color:var(--ink);hyphens:none}
.pq.sm{font-size:18px}
.pq .who{display:block;font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:12px}
```

Pull-quotes are **attributed and dated** (handle + month) or they are not pull-quotes.

### 3.8 THE PLAY / YOUR ORDERS box (news + announcements)

```html
<div class="play"><span class="pl">The play <span class="prop">Proposed</span></span>
  <p><b>Bags does</b> Ship the receipt. <b>@FinnBags does</b> Post the chart, tag the creator.</p>
  <p class="orders"><b>Your orders</b> Launch one coin for someone you believe in this week.</p>
</div>
```

```css
.play{margin-top:10px;padding:9px 12px 10px;border-left:4px solid var(--ink);background:var(--paper2);break-inside:avoid}
.play .pl{display:inline-flex;gap:6px;align-items:center;font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--ink);padding:4px 8px 3px;margin-bottom:6px;line-height:1.3} .pl .prop{color:#fff;border-color:rgba(255,255,255,.8)}
.play p{font-size:13.5px;line-height:1.48;color:var(--ink2);margin-top:4px} .play p b{color:var(--ink);font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-right:2px}
.play .orders{margin-top:8px;padding-top:7px;border-top:1px solid var(--hair);color:var(--ink)}
```

---

### 3.9 Wordmark & lockup (new in v1.1)

THE BAGS HOLDINGS is the paper's name; **BAGS** is the publisher. The BAGS lockup sits top-left of every masthead (the Dow Jones mark on the WSJ), never in place of the big wordmark.

**Specification**

| Measure | Value |
|---|---|
| Face | Archivo Black, uppercase, **converted to outlines** (renders without webfonts) |
| Tracking | −.04em, plus the face's own kerning (B·A −17, A·G −18, G·S 0 units/1000) |
| Icon | the existing Bags money-bag mark, vectorised from `public/assets/icon-512.png` — never redrawn. Aspect 0.82 (w/h) |
| Icon height | cap height × 1.15, bottom sitting on the baseline |
| Gap icon → wordmark | cap height × 0.5 |
| Lockup aspect | 4.78 : 1 (558 × 117 units); wordmark alone 4.0 : 1 |
| Stacked lockup | icon = cap height × 2, centred above, gap cap height × 0.5 |
| Clear space | the height of the B's upper counter = **0.17 × cap height** (≈ 0.12 × lockup height) on all four sides |
| Minimum width | lockup 96 px · wordmark alone 64 px · icon alone 16 px |
| Colours | ink `#0b0b0b` · paper `#f7f4ee` · signal red `#e0252b` (wordmark only, as a signal). Nothing else. |
| Masthead use | paper variant, 18 px tall, inside the left ear as `<a class="pub">` |

**Files** (`public/brand/wordmark/`, mirrored at `~/.openclaw/workspace/docs/brand/wordmark/`)

| File | Use |
|---|---|
| `bags-wordmark.svg` / `-paper.svg` / `-red.svg` | wordmark alone, ink / paper / red |
| `bags-lockup-h.svg` / `-paper.svg` | horizontal lockup, ink on transparent / paper on transparent |
| `bags-lockup-v.svg` / `-paper.svg` | stacked lockup |
| `bags-icon.svg` / `-paper.svg` · `bags-icon-tile.svg` | icon alone (favicon-safe) · paper icon on an ink tile |
| `bags-wordmark.png` (640 w) · `bags-wordmark@2x.png` · `bags-wordmark-paper@2x.png` | raster wordmark |
| `bags-lockup-h@2x.png` · `-paper@2x.png` · `bags-lockup-v@2x.png` · `-paper@2x.png` | raster lockups |
| `bags-icon-512.png` · `bags-icon-tile-512.png` | raster icon · favicon tile |
| `wordmark.css` | inline-HTML fallback (below) |
| `spec.json` | the numbers above, machine-readable |

**Masthead markup** (the `.pub` block goes first inside the left ear; the ear text is wrapped so the mark survives the ≤860 px breakpoint where the ears hide):

```html
<div class="ear"><a class="pub" href="https://bags.fm" title="Bags"><img src="/brand/wordmark/bags-lockup-h-paper.svg" alt="BAGS" width="86" height="18" /></a><span class="ear-t"><b>Vol. I · No. 1</b><br/>[Edition]<br/>[City]</span></div>
```
```css
.pub{display:block;margin-bottom:10px;border:0;line-height:0} .pub img{height:18px;width:auto;display:block} .pub:hover{border:0;opacity:.85}
@media(max-width:860px){.ear{max-width:none}.ear.r,.ear .ear-t{display:none}}
```

**Inline-HTML fallback** — only where an SVG cannot be placed (email, a CMS) and the Archivo Black link is loaded:

```html
<span class="bags-wordmark">BAGS</span>
<a class="bags-lockup" href="https://bags.fm"><img class="bags-lockup-icon" src="/brand/wordmark/bags-icon.svg" alt="" /><span class="bags-wordmark">BAGS</span></a>
```
```css
.bags-wordmark{font-family:'Archivo Black','Archivo',Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;color:#0b0b0b;white-space:nowrap;display:inline-block;padding-right:.028em}
.bags-wordmark.paper{color:#f7f4ee} .bags-wordmark.red{color:#e0252b}
.bags-lockup{display:inline-flex;align-items:baseline;gap:.35em;border:0;line-height:.88} .bags-lockup .bags-lockup-icon{height:.8em;width:auto;align-self:flex-end}
```

**Do**
- Use the SVG; it is outlined. Ink on paper, paper on ink; red for the wordmark alone, as a signal.
- Lockup in a masthead's left ear; wordmark alone where the slot is under 24 px tall.
- API docs topbar: `bags-lockup-h.svg` on light, `bags-lockup-h-paper.svg` on dark, 20–24 px tall.

**Don't**
- No stretching, skewing, rotating — uniform scale only.
- No recolouring outside ink / paper / red. No green, no gradients: the product-green bag belongs to the app, not the paper.
- No outlines, strokes, shadows, glows, blur, glass. No container that crops the clear space.
- Don't set BAGS in Inter, Archivo (regular), OpenBags or anything else. Don't retype it — place the file.
- Don't pair the icon with THE BAGS HOLDINGS wordmark or the BAGS API line. The icon belongs to BAGS only.

## 4. Labels / legend

| Label | Looks like | Means | Required when |
|---|---|---|---|
| **RECORD** | ink chip, timeline tag | Happened; dated; sourced. | Every past-tense item on a timeline. |
| **NOW** | signal-red chip, dashed outline, red node | The current month / live state. | Exactly one per document that has a timeline. |
| **PROPHECY** | neutral kicker + hue-shifted accent; dark section | Future; fiction until it's a receipt. | Any claim about a date that hasn't happened. The disclaimer must appear within the same card or section. |
| **PROPOSED** | red outlined chip | Not in force until @FinnBags ratifies. | Every Play, doctrine, date commitment, policy that has not been ratified. Removed only by a dated RATIFIED note. |
| **YOUR ORDERS** | black chip, dashed inner outline, Archivo Black | The one thing the reader does next. | Every Play; optional on announcements; never on press releases or API reference. |
| **(reconstructed)** | muted dotted-underline flag | Inferred from references, not a primary record. | Any item whose source is not a primary document, trade, or post. |
| **▲ / ▼** | ink / signal red glyph in the kicker | Went our way / taught us something. | Every Chronicle and news item. |
| **SHIPPED** | ink chip | Announcement: it is live, with the receipt link. | Every announcement headline's kicker on ship day. |
| **Beta / Deprecated** | red outlined chip (same as PROPOSED) | API surface not yet stable / leaving. | API reference, next to the method chip. |

---

## 5. Headline doctrine (the poster rules)

A headline is a poster. It will be screenshotted, cropped, reposted without its deck. Write it so it survives that.

1. **≤ 60 characters.** Counts spaces. The og:title limit and the card's two-line budget are the same number.
2. **One idea.** If there's an "and", cut one side.
3. **Direct address.** "You", imperatives, present tense. The reader is in the sentence.
4. **Number as the hero.** If a number is the point, it goes first, alone, in `.hero-num`. One number per headline.
5. **Slogan cadence.** Short beats. Full stops as rhythm. "Launch. Trade. Claim." reads; "Launch, trade and claim" doesn't.
6. **No dates in the headline.** The kicker carries the date. The headline must still be true next year.
7. **Optimistic, exact.** Extreme in ambition, exact in fact. The deck underneath carries the facts and the source, unedited.
8. **Enlistment line.** Where a Play exists, close with YOUR ORDERS — a verb the reader can do today.
9. **Label the truth state.** PROPOSED / PROPHECY / (reconstructed) are part of the headline unit, never optional.
10. **Future is fiction.** Anything after NOW carries "fiction until it's a receipt" — in the caption, the section label, or the deck. No exceptions, including API roadmaps.

### 5.1 Ten good / bad pairs

| # | Context | Bad | Good |
|---|---|---|---|
| 1 | API docs (overview) | Introduction to the Bags Trade API | **QUOTE. SWAP. SETTLE. ONE KEY.** |
| 2 | API docs (guide) | How to sell a token position using the swap endpoint | **SELL ANYTHING IN TWO CALLS** |
| 3 | API docs (reference) | GET /fee-share/claimable — returns claimable fee positions | **EVERY FEE YOU'RE OWED. ONE GET.** |
| 4 | API changelog | v2.3.1 release notes (Oct 23, 2026) | **SHIPPED: PRICE IMPACT ON EVERY QUOTE** |
| 5 | Announcement | We're excited to announce that Stocks on Bags is now available to all users | **SHIPPED: STOCKS ON BAGS. FOR EVERYONE.** |
| 6 | Announcement (number) | Bags creators have now earned over $50 million in cumulative fees | **$50M** (hero) **PAID TO THE PEOPLE COINS ARE ABOUT** |
| 7 | Press release | Bags.fm Announces Expansion to Robinhood Chain in Q4 2026 | **BAGS IS LIVE ON ROBINHOOD CHAIN** |
| 8 | News (setback) | August 2025 incident post-mortem and remediation update | **THE SUMMER THAT TAUGHT US SHARE** ▼ |
| 9 | News (record) | Weekly volume reaches new all-time high of $412 million | **$412M** (hero) **THE CURVE BENDS** |
| 10 | Prophecy | Our 2028 vision for global payments | **ANY COUNTRY. IN SOL. EVERY 15 MINUTES.** · NOV 2028 · PROPHECY |

What changed in every pair: the date left for the kicker, the number became the hero, the verb became yours, the sentence became a poster.

### 5.2 Patterns by document type

**News (broadsheet item)** — kicker (`▲|▼ · MON YYYY`) → HED (poster rules) → deck (facts, dated, unedited) → THE PLAY (PROPOSED) → source line (`.src`, with file/table/tx cite).

**Announcement** — kicker `SHIPPED · MON D` → `SHIPPED: <WHAT>. <FOR WHOM>.` → deck = what you can do now, in one sentence, with the link → YOUR ORDERS. Changelog entry lands the same day as the ship, same headline, same og:image.

**Press release** — folio `FOR IMMEDIATE RELEASE · [City], [Mon D, YYYY]` → HED → deck (the news in one sentence with the number) → lede with drop cap → "Where we are" rail → period table → three boxes (what the numbers say / what we're measuring now / the honest gap) → boilerplate (About Bags.fm, verbatim) → Media contact. No PROPHECY in a press release; PROPOSED only in an explicitly labelled "what's next" box.

**API docs** — page kicker = method chips for the endpoints covered → HED (what you can do, not what the page is) → deck = the one-sentence contract (auth, calls, cost) → code first → reference table (`.ledger`) → status strip. Every reference page's HED must be a sentence a developer would say out loud, not a path.

---

## 6. Meta-tag spec

Same copy, four places. Write the headline once under §5, then:

| Tag | Pattern | Limit |
|---|---|---|
| `<title>` | `HEADLINE — The Bags Holdings` (news / announcements / press) · `HEADLINE — Bags API` (API docs) | ≤ 60 + suffix |
| `og:title` / `twitter:title` | `HEADLINE` exactly as on the card (uppercase is a CSS transform — write it in title-free sentence case in the tag; the renderer uppercases) | ≤ 60 chars |
| `og:description` / `twitter:description` / `description` | the **deck**, verbatim | ≤ 155 chars |
| `og:type` | `article` | — |
| `og:site_name` | `bags.holdings` (or `Bags API`) | — |
| `og:url` / `canonical` | `https://bags.holdings/<slug>/` — trailing slash, no query | — |
| `og:image` | `https://bags.holdings/<slug>/og.png` — the poster card, 1200×630 | — |
| `twitter:card` | `summary_large_image` | — |
| `theme-color` | `#f7f4ee` paper · `#0b0b0b` when the page opens in future mode or is an API doc in dark | — |

### 6.1 The og:image card (1200 × 630)

Black (`#0b0b0b`) full-bleed. Padding 72px. Kicker top-left (Inter 800, 22px, +.2em, white .7, with the date chip). Headline Archivo Black 900 uppercase, 96px (auto-shrinks to 72 for long lines), leading .92, tracking −.025em, white, max 3 lines; hero numeral Archivo 900 wdth 118, 180px, −.045em on its own line. Hairline (white .22) 1px at 72px from the bottom; caption below it Inter 500, 22px, white .72 — on the left the when-to-use / deck, on the right `bags.holdings` + the slug. SHARE outline in the top-right corner is rendered (it's part of the card's identity). Prophecy cards get the hue-shifted hairline and a `FICTION UNTIL IT'S A RECEIPT` line in the caption.

**Renderer:** `https://bags.holdings/brand/og-card.html?h=HEADLINE&k=KICKER&c=CAPTION&n=HERO&ft=0.6&s=slug`
- `h` headline (required) · `k` kicker (default `THE BAGS HOLDINGS`) · `c` caption · `n` hero numeral (optional, goes on its own line) · `s` slug for the footer · `ft` 0–1 to render as prophecy · `site` = `api` to switch the footer to Bags API.

Screenshot it at 1200×630 with headless Chrome:

```sh
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --hide-scrollbars \
  --window-size=1200,630 --screenshot=public/<slug>/og.png \
  "https://bags.holdings/brand/og-card.html?h=Sell%20anything%20in%20two%20calls&k=Bags%20API%20%C2%B7%20Guide&c=quote%20%E2%86%92%20swap%2C%20one%20key&site=api"
```

Node (Playwright) equivalent for CI:

```js
import { chromium } from 'playwright';
const b = await chromium.launch(); const p = await b.newPage({ viewport: { width: 1200, height: 630 } });
await p.goto('https://bags.holdings/brand/og-card.html?' + new URLSearchParams({ h, k, c, n, s }), { waitUntil: 'networkidle' });
await p.screenshot({ path: `public/\${s}/og.png` }); await b.close();
```

### 6.2 Copy-paste `<head>`

```html
<title>HEADLINE — The Bags Holdings</title>
<meta name="description" content="DECK — one sentence, the number, the source. ≤155 chars." />
<meta name="theme-color" content="#f7f4ee" />
<link rel="canonical" href="https://bags.holdings/SLUG/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="bags.holdings" />
<meta property="og:title" content="HEADLINE" />
<meta property="og:description" content="DECK — one sentence, the number, the source. ≤155 chars." />
<meta property="og:url" content="https://bags.holdings/SLUG/" />
<meta property="og:image" content="https://bags.holdings/SLUG/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HEADLINE" />
<meta name="twitter:description" content="DECK — one sentence, the number, the source. ≤155 chars." />
<meta name="twitter:image" content="https://bags.holdings/SLUG/og.png" />
<link rel="icon" type="image/png" href="https://bags.holdings/assets/icon-512.png" />
<link rel="apple-touch-icon" href="https://bags.holdings/assets/icon-512.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wdth,wght@100..125,400..900&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
```

For API docs: `<title>HEADLINE — Bags API</title>`, `og:site_name` = `Bags API`, `theme-color` = `#0b0b0b`, `og:image` rendered with `site=api`.

---

## 7. Voice — six rules

1. **Receipts, not teases.** A link, a tx, a table, a date. If you can't attach one, it's PROPHECY and says so.
2. **Direct address.** You, your coin, your fees. Never "users".
3. **One idea.** One headline, one number, one verb.
4. **Number as the hero.** The number leads; the sentence explains it.
5. **Slogan cadence.** Short. Beats. Full stops. Read it aloud before you ship it.
6. **Culture over charts.** The chart is the deck; the headline is the culture — what it means for the person the coin is about.

**The disclaimer rule:** anything dated after NOW carries **"fiction until it's a receipt"** in the same visual unit (card caption, section label, or deck). Prophecy is a genre we publish on purpose; it is never dressed as a record.

---

## 8. Do / Don't

**Do**
- Uppercase display type, tight tracking; uppercase labels, loose tracking.
- Black on cream or white on black. Red as a signal only.
- Square corners. Hairlines inside cards, poster bars between sections.
- Date in the kicker; source under the deck; label in the kicker.
- One hero numeral, on its own line, Archivo 900 wdth 118.
- Headline ≤60, caption = when to use it.
- Ship the og:image with the page, same headline, same slug.

**Don't**
- **No contract addresses. Ever.** Not in headlines, decks, cards, og:images, or alt text.
- No wallet addresses in headlines or cards.
- No dates in headlines.
- No third colour. No gradients except the hue-shift accent in future mode. No green/blue/amber status colours — ink, paper, signal.
- No serif. No italic. No title-case or sentence-case inside a poster card — the card is uppercase by CSS, write the copy however, but never override it.
- No rounded corners, shadows, blur, or glass.
- No emoji in headlines or chips (▲ ▼ ▌ are glyphs, not emoji).
- No "We're excited to announce". No "Introduction to". No question headlines.
- No tinted or coloured cards — a card is ink or it isn't a card.
- No pull-quote without a handle and a month.
- No prophecy without the disclaimer. No PROPOSED removed without a dated RATIFIED note.

---

## 9. Files

- `public/brand/index.html` — this kit rendered in the system (https://bags.holdings/brand/)
- `public/brand/DESIGN-KIT.md` — this file (https://bags.holdings/brand/DESIGN-KIT.md)
- `public/brand/og-card.html` — og:image renderer (query params, §6.1)
- `public/brand/wordmark/` — BAGS wordmark + lockup assets, `wordmark.css`, `spec.json` (§3.9); mirrored at `~/.openclaw/workspace/docs/brand/wordmark/`
- `public/press-release-template/index.html` — the blank broadsheet; its footer links here
- `public/state-of-the-union-2026-10/index.html` — the reference implementation (commit fffe295)
- Workspace twin: `~/.openclaw/workspace/docs/brand/BAGS-DESIGN-KIT.md`

## 10. Versioning

**Design Kit v1.1 · Oct 24 2026** — adds §3.9 BAGS wordmark & lockup and the publisher mark (`.pub`) in every masthead. **v1.0 · Oct 23 2026 · derived from SOTU 2026-10 (fffe295).** Token or component changes bump the minor; a new mode or a change to the headline doctrine bumps the major. Every published page prints its kit version in the DESIGN KIT footer block. Drafted by Bond for Finn; doctrine items marked PROPOSED until ratified.