@bongos/core 1.24.80 → 1.24.81

package/modules/ui-design/public/brand.html

@@ -45,13 +45,13 @@
     <h2 class="scroll__h" id="ref-colour-h">Colour</h2>
     <p class="scroll__lede">The thirteen colours of the branding pack. An instance replaces them in its own pack; in dark mode only the neutrals flip, and the accent, sea and terracotta stay the pack’s.</p>
     
-    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg)" aria-hidden="true"></span><code class="ref-name">--bg</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#edecee</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-card)" aria-hidden="true"></span><code class="ref-name">--bg-card</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbfafc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#101012</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-deep)" aria-hidden="true"></span><code class="ref-name">--bg-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e2e1e4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-frame)" aria-hidden="true"></span><code class="ref-name">--bg-frame</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6f5f7</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#08080a</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink)" aria-hidden="true"></span><code class="ref-name">--ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17181a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffffff</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-soft)" aria-hidden="true"></span><code class="ref-name">--ink-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#55565a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c0c0c0</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-faint)" aria-hidden="true"></span><code class="ref-name">--ink-faint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#65656a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a8a8a8</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule)" aria-hidden="true"></span><code class="ref-name">--rule</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c6c6c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule-soft)" aria-hidden="true"></span><code class="ref-name">--rule-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcdbdd</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .08)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent)" aria-hidden="true"></span><code class="ref-name">--accent</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fb9569</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-deep)" aria-hidden="true"></span><code class="ref-name">--accent-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a3481a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sea)" aria-hidden="true"></span><code class="ref-name">--sea</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#5b6fd0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--terracotta)" aria-hidden="true"></span><code class="ref-name">--terracotta</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c9512c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li></ul>
+    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg)" aria-hidden="true"></span><code class="ref-name">--bg</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#edecee</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-card)" aria-hidden="true"></span><code class="ref-name">--bg-card</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fbfafc</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#0a1622</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-deep)" aria-hidden="true"></span><code class="ref-name">--bg-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#e2e1e4</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--bg-frame)" aria-hidden="true"></span><code class="ref-name">--bg-frame</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#f6f5f7</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#07111b</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink)" aria-hidden="true"></span><code class="ref-name">--ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#17181a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#ffffff</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-soft)" aria-hidden="true"></span><code class="ref-name">--ink-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#55565a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#c8f1f7</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ink-faint)" aria-hidden="true"></span><code class="ref-name">--ink-faint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#65656a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#a9cdd4</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule)" aria-hidden="true"></span><code class="ref-name">--rule</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c6c6c8</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--rule-soft)" aria-hidden="true"></span><code class="ref-name">--rule-soft</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#dcdbdd</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent)" aria-hidden="true"></span><code class="ref-name">--accent</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#fb9569</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-deep)" aria-hidden="true"></span><code class="ref-name">--accent-deep</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#a3481a</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--sea)" aria-hidden="true"></span><code class="ref-name">--sea</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#5b6fd0</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--terracotta)" aria-hidden="true"></span><code class="ref-name">--terracotta</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#c9512c</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>same as light</code></span></li></ul>
     <h3 class="ref-sub">The status vocabulary</h3>
     <p class="ref-note">Fixed, not taken from the pack, and the one exception to the fifteen tokens: a status is always a word as well as a colour.</p>
     <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok)" aria-hidden="true"></span><code class="ref-name">--ok</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#187444</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#4ade80</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--ok-weak)" aria-hidden="true"></span><code class="ref-name">--ok-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #187444 12%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #4ade80 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn)" aria-hidden="true"></span><code class="ref-name">--warn</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#895c00</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#fbbf24</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--warn-weak)" aria-hidden="true"></span><code class="ref-name">--warn-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #895c00 14%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #fbbf24 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger)" aria-hidden="true"></span><code class="ref-name">--danger</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#b42318</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#f87171</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--danger-weak)" aria-hidden="true"></span><code class="ref-name">--danger-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, #b42318 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, #f87171 14%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info)" aria-hidden="true"></span><code class="ref-name">--info</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--sea) 86%, #000000)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--sea) 80%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--info-weak)" aria-hidden="true"></span><code class="ref-name">--info-weak</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--info) 9%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--info) 14%, var(--bg-card))</code></span></li></ul>
     <h3 class="ref-sub">Derived colours</h3>
     <p class="ref-note">Mixed from the thirteen, never typed as a new colour. Black and white with alpha appear only as a scrim, a shadow or glass.</p>
-    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .11)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .17)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .13)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#000000</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(255, 255, 255, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #0b0a09)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li></ul>
+    <ul class="ref-list" role="list"><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass)" aria-hidden="true"></span><code class="ref-name">--glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .05)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .1)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-strong)" aria-hidden="true"></span><code class="ref-name">--glass-strong</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .08)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--glass-edge)" aria-hidden="true"></span><code class="ref-name">--glass-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .2)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void)" aria-hidden="true"></span><code class="ref-name">--void</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#050508</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#050d16</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-ink)" aria-hidden="true"></span><code class="ref-name">--void-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#ffffff</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--ink)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--void-edge)" aria-hidden="true"></span><code class="ref-name">--void-edge</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(23, 24, 26, .12)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(200, 241, 247, .4)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--skeleton)" aria-hidden="true"></span><code class="ref-name">--skeleton</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 10%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-ink)" aria-hidden="true"></span><code class="ref-name">--accent-ink</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 45%, #240e00)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-lift)" aria-hidden="true"></span><code class="ref-name">--accent-lift</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 58%, #ffffff)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-tint)" aria-hidden="true"></span><code class="ref-name">--accent-tint</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent) 30%, #fffdf9)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--accent) 22%, #050d16)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--accent-on)" aria-hidden="true"></span><code class="ref-name">--accent-on</code><span class="ref-val"><span class="ref-val__k">light</span> <code>#2a1305</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>#2a1305</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--focus)" aria-hidden="true"></span><code class="ref-name">--focus</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--accent-deep) 82%, #3a1400)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>var(--accent)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--scrim)" aria-hidden="true"></span><code class="ref-name">--scrim</code><span class="ref-val"><span class="ref-val__k">light</span> <code>rgba(0, 0, 0, .55)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>rgba(0, 0, 0, .55)</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--surface-2)" aria-hidden="true"></span><code class="ref-name">--surface-2</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--ink) 5%, var(--bg-card))</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--ink) 6%, var(--bg-card))</code></span></li><li class="ref-row ref-row--colour"><span class="ref-swatch" style="background: var(--night-glass)" aria-hidden="true"></span><code class="ref-name">--night-glass</code><span class="ref-val"><span class="ref-val__k">light</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span><span class="ref-val"><span class="ref-val__k">dark</span> <code>color-mix(in srgb, var(--bg) 72%, transparent)</code></span></li></ul>
   </section>
   <section class="scroll ref-sec" id="ref-type" aria-labelledby="ref-type-h">
     <h2 class="scroll__h" id="ref-type-h">Type</h2>

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.80",
+  "version": "1.24.81",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.80",
+      "version": "1.24.81",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.80",
+  "version": "1.24.81",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11583,5 +11583,11 @@
       "id": "1005141",
       "text": "The builders' crafts now carry their game names: Engineers are Artisans, Ideators join the Artists, and Patron is the third character; old links and old records keep working."
     }
+  ],
+  "1.24.81": [
+    {
+      "id": "1005192",
+      "text": "The hall now wears the new Helm look: deep night panels, ice-blue text, wide capital titles and cut-corner buttons, all from one shared design system. The start and load screens are rebuilt to match, and the hall is dark only."
+    }
   ]
 }

package/scripts/hall-preview/README.md

@@ -135,15 +135,14 @@ overlay). A concept no table holds is not drawn: never add sample data for one.
 
 ## The evidence matrix (per page-redesign ship)
 
-Screenshot every changed page at **{light, dark} × {1280w, 390w}**, plus one
+Screenshot every changed page at **{1280w, 390w}** (the hall is dark only since task 1005192, ADR 0402), plus one
 instance-pack run (`--brand config/branding.json`) proving the theming contract
 survives. Run the harness with **`--fixture-me`** for these — the pinned snapshot
 is what makes two runs comparable. With the Playwright MCP (`npx playwright install chrome` once):
 
 1. `browser_navigate` → the page. `browser_console_messages` must show **0 errors**.
 2. 1280w: `browser_resize 1280×900` → `browser_take_screenshot` (fullPage for tall pages).
-3. dark: `browser_evaluate` `() => { localStorage.setItem('hall-theme','dark'); location.reload(); }` → screenshot. (Reset with `'light'`.)
-4. 390w: `browser_resize 390×844` → light + dark screenshots.
+3. 390w: `browser_resize 390×844` → screenshot.
 
 ## Seam assertions (copy-paste `browser_evaluate` snippets)
 

package/src/bongos/serve-internal.js

@@ -45,6 +45,7 @@ const { buildInfo } = require('../build-info');
 const { buildBongosDownloads, installScriptReader } = require('../bongos-downloads');
 const { clientBranding, branding, applyBrandConditionals } = require('../branding');
 const { themeMarkup } = require('../theme-markup');
+const { applyHelm } = require('../hall-helm');
 const { linkPreviewTags } = require('../link-preview');
 const { prelaunchGate } = require('./prelaunch-gate');
 const { platformVisibilityGate } = require('./platform-visibility-gate');
@@ -126,8 +127,12 @@ function injectBrandingGlobal(html, brand = clientBranding(), mods = clientModul
   // §4), injected the same way as __BRANDING__ so hall/status scripts can hide
   // UI sections for off modules synchronously (no fetch, no race). R60 wires the
   // actual section-hiding; this exposes the data. The link-preview card (task 1005091) rides along.
-  const stamped = applyBrandTokens(html, brand);
-  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${linkPreviewTags(stamped, brand, safePublicOrigin())}${themeMarkup(brand.theme)}`;
+  // A HALL page (one that links the hall's sheet) is pinned dark and, unless its pack
+  // chose faces of its own, takes the Helm faces (task 1005192, ADR 0402, src/hall-helm.js).
+  // Every other page comes back from applyHelm untouched.
+  const helm = applyHelm(applyBrandTokens(html, brand), brand.theme);
+  const stamped = helm.html;
+  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${linkPreviewTags(stamped, brand, safePublicOrigin())}${themeMarkup(brand.theme)}${helm.tail}`;
   return stamped.includes('</head>') ? stamped.replace('</head>', `${tag}</head>`) : tag + stamped;
 }
 

package/src/hall-helm.js

@@ -0,0 +1,79 @@
+// src/hall-helm.js — Helm, the look the builders' hall wears (task 1005192, ADR 0402).
+//
+// The hall is the game: everything after sign-in. It is dark only, and it reads in
+// the two Helm faces unless its pack chose faces of its own. Both are decided HERE,
+// at serve time, for one reason each:
+//
+//   * DARK ONLY. A fixed html[data-theme="dark"] in the served markup selects the
+//     hall sheet's dark tier before first paint, with nothing to flash and nothing
+//     for the OS preference to reach (the ADR 0204 move, on the hall's own
+//     attribute). shell.js sets the same value again for a page read without it.
+//   * THE FACES. The pack splices --font-display / --font-body as a plain :root
+//     after every sheet, for every surface, so the landing and the hall would
+//     always read the same face. The hall sheet carries the Helm stacks as its own
+//     tokens (--helm-display / --helm-body) and hands them to the two font tokens
+//     under html[data-faces="helm"], which outranks the pack's :root. This file
+//     stamps that attribute, and links the two families, only for a hall whose
+//     pack still names the platform's default faces. A pack that names its own
+//     (config/branding.json, or a look from the style library with faces of its
+//     own, ADR 0358) is never stamped and keeps them.
+//
+// A hall page is recognised by what makes it one: it links the hall's sheet. So one
+// seam (serve-internal.js injectBrandingGlobal) covers the server, the preview
+// harness and the design kit's stub, and the landing, the hub and the status page,
+// which never link that sheet, are never touched. PURE given `defaults`.
+'use strict';
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { escapeHtml: esc } = require('./html-escape');
+
+// Barlow Condensed (the name voice) and Barlow (everything said to you), swapped in.
+const HELM_FONTS_HREF = 'https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500&display=swap';
+const HALL_SHEET_RE = /<link\b[^>]*\bhref="\/builders\/style\.css[^"]*"/i;
+const HTML_TAG_RE = /<html\b([^>]*)>/i;
+
+function isHallPage(html) {
+  return HALL_SHEET_RE.test(String(html || ''));
+}
+
+// The platform's default faces: the neutral pack's two stacks, read once. A hall
+// whose resolved pack still carries exactly these has not chosen faces.
+let _defaults = null;
+function defaultFaces() {
+  if (_defaults) return _defaults;
+  try {
+    const { resolveCoreRoot } = require('./instance-config'); // eslint-disable-line global-require
+    const pack = JSON.parse(fs.readFileSync(path.join(resolveCoreRoot(), 'config', 'branding.neutral.json'), 'utf8'));
+    const fonts = (pack.theme && pack.theme.ui && pack.theme.ui.fonts) || {};
+    _defaults = { display: String(fonts.display || ''), body: String(fonts.body || '') };
+  } catch { _defaults = { display: '', body: '' }; }
+  return _defaults;
+}
+
+// Whether this hall takes the Helm faces: its pack names the default ones (or none).
+function wearsHelmFaces(theme, defaults = defaultFaces()) {
+  const fonts = (theme && theme.fonts) || {};
+  const same = (mine, theirs) => !mine || mine === theirs;
+  return same(fonts.display, defaults.display) && same(fonts.body, defaults.body);
+}
+
+// Set one attribute on the document's <html> tag, replacing a value already there.
+function stampHtml(html, name, value) {
+  return html.replace(HTML_TAG_RE, (tag, attrs) => {
+    const rest = attrs.replace(new RegExp(`\\s${name}(?:="[^"]*")?`, 'i'), '');
+    return `<html${rest} ${name}="${esc(value)}">`;
+  });
+}
+
+// The whole transform for one served page: a page that does not link the hall's
+// sheet comes back untouched. `tail` is markup for the end of <head>.
+function applyHelm(html, theme, defaults = defaultFaces()) {
+  if (!isHallPage(html)) return { html, tail: '' };
+  let out = stampHtml(html, 'data-theme', 'dark');
+  if (!wearsHelmFaces(theme, defaults)) return { html: out, tail: '' };
+  out = stampHtml(out, 'data-faces', 'helm');
+  return { html: out, tail: `<link rel="stylesheet" href="${esc(HELM_FONTS_HREF)}">` };
+}
+
+module.exports = { applyHelm, isHallPage, wearsHelmFaces, stampHtml, HELM_FONTS_HREF };

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.80'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.81'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/design_reference.mjs

@@ -76,7 +76,7 @@ test('every pack colour shows its light value and its dark value; the status voc
     assert.ok(r.includes(`light</span> <code>${light}</code>`), `${prop} light ${light}`);
     assert.match(r, /dark<\/span> <code>[^<]+<\/code>/, `${prop} has a dark value`);
   }
-  assert.ok(rowOf(PAGE, '--bg').includes('dark</span> <code>#000000</code>'), 'the dark ground is read from the hall\'s dark tier');
+  assert.ok(rowOf(PAGE, '--bg').includes('dark</span> <code>#050d16</code>'), 'the dark ground is read from the hall\'s dark tier: the Helm night (task 1005192, ADR 0402)');
   assert.ok(rowOf(PAGE, '--ok').includes('light</span> <code>#187444</code>') && rowOf(PAGE, '--ok').includes('dark</span> <code>#4ade80</code>'));
   for (const s of ['--warn', '--danger', '--info', '--ok-weak', '--warn-weak', '--danger-weak', '--info-weak']) rowOf(PAGE, s);
 });

package/tests/hall_builders_page_pass.mjs

@@ -152,7 +152,8 @@ test('A: the quiet fill is a defined variant, not an inline colour', () => {
   const m = css.match(/([^{}]*\.landing__btn--quiet[\s,][^{}]*)\{([^{}]*)\}/);
   assert.ok(m, 'controls.css defines .landing__btn--quiet');
   const block = m[2];
-  assert.match(block, /background:\s*transparent/, 'the quiet variant is the ghost');
+  // Helm (task 1005192, ADR 0402): the ghost takes the hall's press fill, and nothing without the hall's tier
+  assert.match(block, /background:\s*var\(--press-fill, transparent\)/, 'the quiet variant is the ghost');
   assert.deepEqual(block.match(/#[0-9a-f]{3,8}\b/gi) || [], [], 'the variant carries no literal colour');
   // Same geometry as the request button means it inherits .landing__btn's
   // min-height and padding rather than restating them.

package/tests/hall_city.mjs

@@ -12,8 +12,8 @@
 //     the ring road, or a task with no building;
 //   * the line under the button saying anything but the docket's own line;
 //   * the start governing button going anywhere but the street;
-//   * the switch not using the hall's own preference, so the city opens in a
-//     different mode from every other hall page;
+//   * a light/dark switch coming back: the hall is dark only (task 1005192,
+//     ADR 0402), so the city draws its night faces and reads no stored choice;
 //   * motion that escapes the Kill Switch, or docket text reaching innerHTML.
 //
 // Run:  node tests/hall_city.mjs
@@ -263,7 +263,7 @@ test('parcels ride only the roads of plots that hold a district, and leave throu
 
 // ── the page ────────────────────────────────────────────────────────────────
 
-test('the page holds only the wordmark, the switch, the city, one button and one line', () => {
+test('the page holds only the wordmark, the city, one door and one line, and no light/dark switch', () => {
   const html = read('city.html').replace(/<!--[\s\S]*?-->/g, ''); // the markup, not the prose about it
   assert.equal((html.match(/<header\b/g) || []).length, 1);
   assert.equal((html.match(/<main\b/g) || []).length, 1);
@@ -271,7 +271,8 @@ test('the page holds only the wordmark, the switch, the city, one button and one
   assert.match(html, /<a class="city-start" id="cityStart" href="#decide"/);
   assert.equal((html.match(/<a\b/g) || []).length, 3, 'one door, and the two faint archived links to the street');
   assert.ok(html.includes('<p class="city-archived">Archived: <a href="/builders/street">Street</a> &amp; <a href="/builders/street#building=charter">Building Level Views</a>.</p>'), 'the street is archived behind two faint links');
-  assert.equal((html.match(/<button\b/g) || []).length, 1, 'one switch');
+  assert.equal((html.match(/<button\b/g) || []).length, 0, 'no switch: the hall is dark only (task 1005192, ADR 0402)');
+  assert.doesNotMatch(html, /cityMode/);
   assert.match(html, /class="city-mark">\{\{productName\}\}</);
   assert.equal(City.STREET_HREF, '/builders/street');
 });
@@ -346,7 +347,7 @@ function fakeDom() {
     return el;
   };
   const html = mk('html');
-  for (const id of ['cityMode', 'cityModeIcon', 'cityStage', 'cityFlat', 'cityBlds', 'cityParcels', 'cityPins', 'cityLine', 'cityStart']) mk('x').setAttribute('id', id);
+  for (const id of ['cityStage', 'cityFlat', 'cityBlds', 'cityParcels', 'cityPins', 'cityLine', 'cityStart']) mk('x').setAttribute('id', id);
   const document = {
     documentElement: html,
     getElementById: (id) => byId.get(id) || null,
@@ -421,33 +422,18 @@ test('a failed docket read draws no pins and says the docket could not be read',
   assert.equal(p.byId.get('cityLine').textContent, City.FALLBACK_LINE);
 });
 
-test('the switch reads and writes the hall\'s own theme preference', async () => {
-  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: true });
-  assert.equal(p.html.attrs['data-theme'], 'light', 'the stored hall choice beats the OS');
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to dark mode');
-  const before = JSON.stringify(p.byId.get('cityFlat').children[0].attrs);
-  p.byId.get('cityMode').fire('click');
-  assert.equal(p.store.get('hall-theme'), 'dark');
-  assert.equal(p.html.attrs['data-theme'], 'dark');
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to light mode');
-  assert.notEqual(JSON.stringify(p.byId.get('cityFlat').children[0].attrs), before, 'the city redraws in the new mode');
+test('the city is dark only: no stored choice and no OS setting reaches it (task 1005192, ADR 0402)', async () => {
+  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: false, shell: { applyTheme() { throw new Error('the city no longer drives the shell'); } } });
+  assert.equal(p.html.attrs['data-theme'], 'dark', 'a stored light choice and a light OS are both ignored');
+  assert.equal(p.store.get('hall-theme'), 'light', 'and the old preference is never written');
+  assert.equal(p.observers.length, 0, 'nothing flips the theme, so nothing watches it');
   const q = await bootPage({ feeds: FEEDS([]), stored: null, osDark: true });
-  assert.equal(q.html.attrs['data-theme'], 'dark', 'no stored choice follows the OS');
+  assert.equal(JSON.stringify(q.byId.get('cityFlat').children[0].attrs), JSON.stringify(p.byId.get('cityFlat').children[0].attrs), 'one drawing whatever was stored');
+  const src = read('city.js');
+  assert.doesNotMatch(src, /hall-theme|localStorage|prefers-color-scheme/, 'city.js reads no theme preference');
 });
 
-test('in the hall, the city and the top bar\'s theme switch never disagree (task 1004544)', async () => {
-  let shellPaints = 0;
-  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: true, shell: { applyTheme() { shellPaints++; } } });
-  assert.equal(p.observers.length, 1, 'the page watches html[data-theme]');
-  p.byId.get('cityMode').fire('click');
-  assert.equal(shellPaints, 1, 'this switch repaints the shell\'s');
-  const before = JSON.stringify(p.byId.get('cityFlat').children[0].attrs);
-  p.store.set('hall-theme', 'light'); p.html.setAttribute('data-theme', 'light'); // the shell's switch
-  p.observers[0].fn();
-  assert.equal(p.byId.get('cityMode').attrs['aria-label'], 'Switch to dark mode', 'this switch follows the shell\'s');
-  assert.notEqual(JSON.stringify(p.byId.get('cityFlat').children[0].attrs), before, 'and the city redraws in that mode');
-  assert.equal(shellPaints, 1, 'following the shell does not echo back to it');
-});
+
 
 test('the artboard fits the stage the hall chrome leaves, not the window (task 1004544)', async () => {
   const p = await bootPage({ feeds: FEEDS([]), stage: { clientWidth: 688, clientHeight: 900 } });

package/tests/hall_controls.mjs

@@ -9,6 +9,11 @@
 //     button (it loads later) without re-drawing it;
 //   * THE SIZES — primary is DESIGN.md's 46–48px door, the row size and the
 //     text button keep the 24px floor, the field clears it;
+//   * THE HELM SHAPE AND VOICE (task 1005192, ADR 0402) — in the hall a button
+//     is the cut corner in the name voice, every piece of it a hall-tier token
+//     spent with the old pill/lowercase as its fallback (the status page links
+//     this sheet without the hall's tier), and a cut button's focus ring is
+//     drawn inside the shape, because a clip-path clips an outline;
 //   * CONTRAST, MEASURED — the button's ink on its fill (rest AND hover), the
 //     ghost's and the text button's ink on both grounds, the field's text and
 //     its edge (3:1, WCAG 1.4.11), in both modes, resolved from the real
@@ -144,11 +149,11 @@ test('style.css imports controls.css right after the shared token sheet', () =>
 
 // ── 2. the sizes ─────────────────────────────────────────────────────────────
 
-test('primary is the 46–48px pill; the row size and the text button keep the 24px floor', () => {
+test('primary is the 46–48px door; the row size and the text button keep the 24px floor', () => {
   const base = sharedRule('.btn');
   const h = px(prop(base, 'min-height'));
   assert.ok(h >= 46 && h <= 48, `.btn is ${h}px — DESIGN.md's door is 46–48px`);
-  assert.equal(prop(base, 'border-radius'), 'var(--radius-pill)', 'pill or nothing (DESIGN.md, Shapes)');
+  assert.equal(prop(base, 'border-radius'), 'var(--press-radius, var(--radius-pill))', 'the hall\'s corner, and the pill where the hall\'s tier is not loaded');
   assert.match(prop(base, 'border'), /transparent$/, 'the edge is reserved, so a modifier that sets only its colour draws');
   for (const sel of ['.btn--sm', '.btn--text']) {
     assert.ok(px(prop(sharedWith(sel, 'min-height'), 'min-height')) >= 24, `${sel} keeps 24px of height`);
@@ -203,6 +208,49 @@ test('no hall sheet puts white ink on an accent fill', () => {
 const PRIMARY = ['.btn', '.btn-accent', '.landing__btn', '.task__claim', '.setup-gate__save', '.td-btn--primary', '.pbtn--save', '.craft-save'];
 const GHOST = ['.btn--ghost', '.btn-ghost', '.landing__btn--quiet', '.td-btn', '.wip__release', '.pbtn', '.settings-btn'];
 const SMALL = ['.btn--sm', '.btn-ghost', '.task__claim', '.td-btn', '.wip__release'];
+// the ghost's fill: the hall's press fill, and nothing at all without the hall's tier
+const GHOST_FILL = 'var(--press-fill, transparent)';
+
+// ── 3b. the Helm shape and voice (task 1005192, ADR 0402) ───────────────────
+
+test('in the hall a button is the cut corner in the name voice, and without the hall\'s tier it is the pill it was', () => {
+  const base = sharedRule('.btn');
+  // every Helm piece is a token with the old look as its fallback
+  assert.equal(prop(base, 'clip-path'), 'var(--cut-path, none)');
+  assert.equal(prop(base, 'font-family'), 'var(--name-face, var(--font-body))');
+  assert.equal(prop(base, 'font-weight'), 'var(--name-weight, 500)');
+  assert.equal(prop(base, 'letter-spacing'), 'var(--name-space-tight, normal)');
+  assert.equal(prop(base, 'text-transform'), 'var(--name-case, lowercase)');
+  assert.equal(prop(sharedWith('.btn--sm', 'clip-path'), 'clip-path'), 'var(--cut-path-sm, none)', 'the row size takes the smaller cut');
+  // the tokens are the hall tier's, and the status page (which links this sheet) defines none of them
+  const status = fs.readFileSync(path.join(ROOT, 'modules', 'status-ui', 'public', 'style.css'), 'utf8');
+  for (const name of ['--cut-path', '--cut-path-sm', '--press-radius', '--press-fill', '--press-focus', '--name-face', '--name-weight', '--name-space-tight', '--name-case']) {
+    assert.ok(root[name], `${name} is in the hall's token block`);
+    assert.ok(!new RegExp(`${name}\\s*:`).test(status), `the status page does not define ${name}, so the fallback stands there`);
+  }
+  assert.equal(root['--cut-path'], 'polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut))', 'top-left and bottom-right are cut');
+  assert.equal(root['--name-case'], 'uppercase');
+  // a link in a sentence is not a cut control and does not shout
+  const text = sharedWith('.btn--text', 'clip-path');
+  assert.equal(prop(text, 'clip-path'), 'none');
+  assert.equal(prop(text, 'text-transform'), 'none');
+});
+
+test('a cut button keeps a visible focus ring: inset, two-tone, 3:1 on its own fill', () => {
+  // clip-path clips the outline and the outer halo, so the base rule hands the shell's
+  // :focus-visible rule an inset ring instead; the text button (not cut) hands it back
+  assert.equal(prop(sharedRule('.btn'), '--focus-ring'), 'var(--press-focus)');
+  assert.equal(prop(sharedWith('.btn--text', '--focus-ring'), '--focus-ring'), 'initial');
+  const shell = rulesOf(styleSrc).find((x) => x.sels.length === 1 && x.sels[0] === ':focus-visible');
+  assert.ok(shell, 'the shell\'s ring rule');
+  assert.match(prop(shell.body, 'box-shadow'), /^var\(--focus-ring, /, 'the shell\'s ring spends what a cut control hands in');
+  assert.equal(root['--press-focus'], 'inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--bg)', 'the focus colour on the edge, then a 2px band of the ground');
+  // one of the two tones reads against each fill a cut button paints (WCAG 1.4.11, 3:1), in the mode the hall renders
+  for (const [what, fill] of [['primary', 'var(--accent)'], ['primary hover', 'var(--accent-lift)'], ['ghost on the page', onGround(GHOST_FILL, 'var(--bg)', 'dark')], ['ghost on a panel', onGround(GHOST_FILL, 'var(--bg-card)', 'dark')], ['danger', 'var(--danger)']]) {
+    const best = Math.max(contrast('var(--focus)', fill, 'dark'), contrast('var(--bg)', fill, 'dark'));
+    assert.ok(best >= 3, `dark ${what}: the ring's better tone is ${best.toFixed(2)}:1 on the fill`);
+  }
+});
 
 test('every older button name sits in the shared rule it means', () => {
   const fill = (sel) => {
@@ -210,11 +258,11 @@ test('every older button name sits in the shared rule it means', () => {
     return r.length ? prop(r[0].body, 'background') : null;
   };
   for (const sel of PRIMARY) assert.equal(fill(sel), 'var(--accent)', `${sel} is a primary door`);
-  for (const sel of GHOST) assert.equal(fill(sel), 'transparent', `${sel} is a ghost`);
+  for (const sel of GHOST) assert.equal(fill(sel), GHOST_FILL, `${sel} is a ghost`);
   for (const sel of SMALL) assert.equal(prop(sharedWith(sel, 'min-height'), 'min-height'), '30px', `${sel} is the row size`);
   // and the primary-on-a-ghost-base names come AFTER the ghost rule, or the ghost wins on order
   const list = rulesOf(controls);
-  const ghostAt = list.findIndex((x) => x.sels.includes('.td-btn') && prop(x.body, 'background') === 'transparent');
+  const ghostAt = list.findIndex((x) => x.sels.includes('.td-btn') && prop(x.body, 'background') === GHOST_FILL);
   const primaryAt = list.findIndex((x) => x.sels.includes('.td-btn--primary') && prop(x.body, 'background'));
   assert.ok(primaryAt > ghostAt, '.td-btn--primary follows .td-btn, so the shared order paints it');
 });