Fiction Until It’s A ReceiptShare

Colour

Red is a signal, never a decoration: ▼ setbacks, PROPOSED outline, RATIFY, NOW, the share button’s “Copied” state. If red is on a page for any other reason, the page is wrong. There is no third colour.

Type

Google Fonts, one tag: Archivo+Black · Archivo:wdth,wght@100..125,400..900 · Inter:wght@400..900. Display type is always uppercase and tight (negative tracking); label type is always uppercase and loose (positive tracking). Nothing in between. text-wrap:balance; hyphens:none on every headline.

Modes & the hue-shift rule

Paper (default): cream, ink, theme-color #f7f4ee. Future (prophecy / dark): the section inverts to #0b0b0b with white .78 / .55 / .18 steps, a 1px-in-3px scanline overlay, and theme-color #0b0b0b. Anything written about the future carries a progress scalar --ft ∈ [0,1] (0 = next month, 1 = beyond) and its accent is hsl(calc(355 − 140·ft) 92% 56%): it starts at signal red and walks to blue as the prophecy gets further out. The reader can see how speculative a claim is. The card itself is never tinted.

Print: white paper, black ink, 10.5pt body; share buttons and TOC hidden; section heads break the page; cards, boxes, quotes and rows avoid breaks; black surfaces keep print-color-adjust:exact; future mode collapses to black on white.

Every component below is rendered by the same CSS that ships on the broadsheet. Class names are the production names; keep them so the share script and the print rules keep working. Copy-pasteable HTML + CSS for each lives in DESIGN-KIT.md §3.

Poster card · default / hero-numeral / prophecy

• The Chronicle · eras
• Launch. Trade. Claim. The Machine Works.ShareDefault. Launch → trade → fees accrue → creators claim. Use when proving the core.
• 1% of Volume. Forever. To Who It’s About.ShareHero numeral. The product in one line. Use whenever someone asks what Bags is.
• You Paid In 2023. You Go First. Always.ShareDirect address. When “wen airdrop” resurfaces — the registry link, not a tease.
• From the Future · prophecy · fiction until it’s a receipt
• Any Country. In SOL. Every 15 Minutes.ShareNOV 2026 · prophecy · ft 0. Rooted in: BagsPay receipt → global. Use when someone asks where this goes — say “fiction until it’s a receipt.”
• $1B A Month. Paid To Creators.ShareJUN 2027 · prophecy · ft .5. Rooted in: 1% forever. Say “fiction until it’s a receipt.”
• $10B A Month. Every Country. One Receipt.ShareNOV 2028 · prophecy · ft 1. Rooted in: BagsPay receipt → global. Say “fiction until it’s a receipt.”

Card rules: hero numeral alone on its own line; headline ≤ 60 characters; caption = when to use it, never a restatement; prophecy captions open MON YYYY · prophecy. Rooted in: <roadmap item>. and close with the disclaimer. The SHARE button copies HEADLINE — https://bags.holdings/<slug>/#id.

Kicker chip system

Masthead bar

News and press use the THE BAGS HOLDINGS wordmark; API docs use BAGS API with the small line Reference · Guides · Changelog. Ears carry volume/number/date on the left and a price or domain on the right; they hide below 860px.

Markets / ticker strip

Six numbers, tabular, with ▲▼ and basis. Illustrative values. For API docs the strip becomes the status strip: uptime 30d · p50 latency · rate limit · version · last deploy · status.

Share button + clipboard

Launch. Trade. Claim. The Machine Works.Share

Outlined 1px, Inter 700 9px +.14em uppercase, 3px 7px 2px, square. Hover inverts; the copied state is signal red for 1.6s and reads COPIED. Copies HEADLINE — url#id. The script is ten lines and ships unchanged on every page:

(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);
  });
})();

Pull-quote · The Play · Your Orders

A pull-quote without a handle and a month is not a pull-quote. THE PLAY is marked PROPOSED until ratified; YOUR ORDERS is one verb the reader can do today.

Ten good / bad pairs

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. Patterns by document type are in the markdown twin, §5.2.

THE BAGS HOLDINGS is the paper’s name; BAGS is the publisher. The wordmark is the word BAGS set in Archivo Black, uppercase, tracked −.04em, converted to outlines so it renders without webfonts. The icon is the existing Bags money-bag mark, vectorised from /assets/icon-512.png — never redrawn. Together they are the lockup. Three colours exist: ink, paper, signal red (wordmark only).

Specimen

bags-lockup-h.svg · ink on paper

bags-lockup-h-paper.svg · paper on ink (future mode, mastheads)

bags-wordmark.svg · wordmark alone

bags-wordmark-red.svg · signal red — setbacks and NOW only

bags-lockup-v.svg · stacked, for square slots

bags-icon-paper.svg · icon alone, favicon-safe (also bags-icon-tile-512.png)

Construction

xxxx

Clear space x = the height of the B’s upper counter = 0.17 × cap height (≈ 0.12 × lockup height). Nothing enters it: no type, no rules, no edges.

Measure	Value
Face	Archivo Black · uppercase · outlined
Tracking	−.04em (plus the face’s own B·A −17 / A·G −18 kern)
Icon height	cap height × 1.15 · bottom on the baseline
Icon aspect	0.82 (w / h) · 241 × 294 px source
Gap icon → wordmark	cap height × 0.5
Lockup aspect	4.78 : 1 (558 × 117 units) · wordmark 4.0 : 1
Stacked	icon = cap height × 2, centred, gap cap × 0.5
Clear space	B counter height = 0.17 × cap height
Minimum width	lockup 96 px · wordmark 64 px · icon 16 px
Masthead use	18 px tall, paper variant, top-left ear (.pub)

Do / Don’t

Files

/brand/wordmark/bags-wordmark.svg          ink      /brand/wordmark/bags-wordmark.png / @2x.png
/brand/wordmark/bags-wordmark-paper.svg    paper    /brand/wordmark/bags-wordmark-paper@2x.png
/brand/wordmark/bags-wordmark-red.svg      signal
/brand/wordmark/bags-lockup-h.svg          ink      /brand/wordmark/bags-lockup-h@2x.png
/brand/wordmark/bags-lockup-h-paper.svg    paper    /brand/wordmark/bags-lockup-h-paper@2x.png
/brand/wordmark/bags-lockup-v.svg          ink      /brand/wordmark/bags-lockup-v@2x.png
/brand/wordmark/bags-lockup-v-paper.svg    paper    /brand/wordmark/bags-lockup-v-paper@2x.png
/brand/wordmark/bags-icon.svg              ink      /brand/wordmark/bags-icon-512.png
/brand/wordmark/bags-icon-paper.svg        paper    /brand/wordmark/bags-icon-tile.svg · bags-icon-tile-512.png (favicon tile)
/brand/wordmark/wordmark.css               inline-HTML fallback (.bags-wordmark / .bags-lockup)
/brand/wordmark/spec.json                  the numbers above, machine-readable

API docs topbar: bags-lockup-h.svg on light, bags-lockup-h-paper.svg on dark, 20–24 px tall. All assets are also mirrored in the workspace at docs/brand/wordmark/.

Full <head> snippet and the og:image renderer parameters are in the markdown twin, §6.

The disclaimer rule: anything dated after NOW carries “fiction until it’s a receipt” in the same visual unit. Prophecy is a genre we publish on purpose; it is never dressed as a record.

public/brand/index.html                         this kit, rendered in the system        https://bags.holdings/brand/
public/brand/DESIGN-KIT.md                      markdown twin                           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 (§F)
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)
~/.openclaw/workspace/docs/brand/               workspace twin: BAGS-DESIGN-KIT.md · wordmark/

Versioning. v1.1 · Oct 24 2026 — adds the BAGS wordmark & lockup (§F) and the publisher mark 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.