From 18c7ab6256977c48821a14b8e05096b5825b4618 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:00:52 +1100
Subject: [PATCH 1/4] feat(brand): draw the caret mark from one geometry module

The rose chevron lived in hand-written copies whose shades and wordmark
weights had drifted apart. The new mark, an ink prompt caret plus one
rose dot, now comes from shared/brand-mark.ts. AppLogo draws the lockup
from it, and `pnpm brand:assets` writes every file in public/ under the
filenames other repositories already link.
---
 app/components/AppLogo.vue       |  76 +++++++++++---
 package.json                     |   1 +
 public/favicon.ico               | Bin 1791 -> 1801 bytes
 public/favicon.svg               |   5 +-
 public/logo-icon.png             | Bin 13014 -> 8207 bytes
 public/logo-icon.svg             |   5 +-
 public/logo-light.svg            |  14 +--
 public/logo-mark-light.svg       |   4 +-
 public/logo-mark.svg             |   4 +-
 public/logo.svg                  |  14 +--
 scripts/generate-brand-assets.ts |  65 ++++++++++++
 shared/brand-mark.ts             | 168 +++++++++++++++++++++++++++++++
 12 files changed, 303 insertions(+), 53 deletions(-)
 create mode 100644 scripts/generate-brand-assets.ts
 create mode 100644 shared/brand-mark.ts

diff --git a/app/components/AppLogo.vue b/app/components/AppLogo.vue
index 6d184ce2..26f038bf 100644
--- a/app/components/AppLogo.vue
+++ b/app/components/AppLogo.vue
@@ -1,15 +1,65 @@
+<script setup lang="ts">
+import { BRAND_DARK, BRAND_LIGHT, lockupGeometry } from '#shared/brand-mark'
+
+// The wordmark's font size in px. The lockup box is 0.84em tall.
+const FONT_SIZE = 18
+const { box, caret, glyphs, dot } = lockupGeometry()
+const colors = {
+  '--logo-ink': BRAND_LIGHT.ink,
+  '--logo-dot': BRAND_LIGHT.dot,
+  '--logo-ink-dark': BRAND_DARK.ink,
+  '--logo-dot-dark': BRAND_DARK.dot,
+}
+</script>
+
 <template>
-  <span class="inline-flex items-center gap-1.5">
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 160 160"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <path d="M80 34 L135 104 L121 104 L80 52 L39 104 L25 104 Z" class="fill-rose-400 dark:fill-rose-400" />
-    </svg>
-    <span class="font-mono text-lg font-semibold tracking-tight">skilld</span>
-  </span>
+  <svg
+    class="app-logo"
+    :viewBox="`${box.x} ${box.y} ${box.width} ${box.height}`"
+    :width="Math.round(box.width * FONT_SIZE) / 100"
+    :height="Math.round(box.height * FONT_SIZE) / 100"
+    :style="colors"
+    role="img"
+    aria-label="skilld"
+  >
+    <g class="app-logo__ink">
+      <path :d="caret.d" :transform="caret.transform" />
+      <path v-for="(glyph, index) in glyphs" :key="index" :d="glyph.d" :transform="glyph.transform" />
+    </g>
+    <circle class="app-logo__dot" :cx="dot.cx" :cy="dot.cy" :r="dot.r" />
+  </svg>
 </template>
+
+<style>
+.app-logo {
+  display: block;
+  flex: none;
+}
+.app-logo__ink {
+  fill: var(--logo-ink);
+}
+.app-logo__dot {
+  fill: var(--logo-dot);
+}
+.dark .app-logo__ink {
+  fill: var(--logo-ink-dark);
+}
+.dark .app-logo__dot {
+  fill: var(--logo-dot-dark);
+}
+/* The dot is a cursor: it blinks once when the logo's link is hovered. */
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  a:hover > .app-logo .app-logo__dot,
+  .app-logo:hover .app-logo__dot {
+    animation: app-logo-blink 900ms step-end 1;
+  }
+}
+@keyframes app-logo-blink {
+  25% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/package.json b/package.json
index 4e8de003..1eedaca4 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "cron:docs:check": "tsx scripts/generate-cron-docs.ts --check",
     "cron:parity": "tsx scripts/check-schedule-parity.ts",
     "design:eyebrows": "tsx scripts/check-eyebrows.ts",
+    "brand:assets": "tsx scripts/generate-brand-assets.ts",
     "cli:grammar": "tsx scripts/check-published-cli-grammar.ts",
     "cli:docs": "tsx scripts/generate-cli-docs.ts",
     "start:playwright:webserver": "wrangler d1 migrations apply DB --local --config wrangler.jsonc && NODE_ENV=test wrangler dev --config .output/server/wrangler.json --persist-to .wrangler/state --port 5678",
diff --git a/public/favicon.ico b/public/favicon.ico
index 07ac606b43d8f41fefe6b8565628ffe4492473eb..84888952ce932cdd5d1da02defa801db7c47ccbc 100644
GIT binary patch
delta 1704
zcmV;Z23Pt24T%mk000310{{>Z00031AOL~^001@s001B$00031AOK(j006iF001yB
z00031AOP_K000;Sku)WL0ZB<jK~#90os+Rj!%!54|4TuqMi*_XEjo*P92~^i$p_G8
z(r7^!7h4yt^#zm`m&D1%y16KdEe^&(oLUr1EhM`nbGe?}l91rgq#p$Sd*OVXb1q@o
zY<h+Dp>gne#DIbQ@B|c=%cQ$;i#=Qk%VtuXG9*cYZQGRM;R_yrpBpIbsA#uZbc&8I
z`26mO4$e-?xUJXeCK@4u$Caj`LZT@6f=xxiVX;JMfML9%psJ!P7inx9*Q@JTn4H2*
zw~Yhifo=l=7g=7yMXiQpGD#=EG);dm`-?L6==0cmxx>BL`7b!HR>h0BSeAudbvv41
zBcDgHbVO;un_-Am;@}9E%WIIQXQ6$4;P|~sw}BBtOVo8#$|sbD6B0O%BML`)#-~P8
zwCv6s2VdYW&YL$5EH{(-<s1`~M}YOj?~FclfX^WotcL{hfA7eT4+G0o$&+dUFMk3j
zNkl<Zc%1E*u}@P`6vn?BV;M{zIvCVq>||o&P#60zxRJ=BE>Nc$4B}#~;sj!JQL9EL
ziAFa;99+P-xY(&o6cPv}DG6Z#+Kq%<zVlvRXlQQ>>3ffbU()oPyWHP9=e(C31rm*(
zi|%ae*U&1ip`-8-1yzL7vnN98VSll>R#er?^IGFH0z@fnQsSDrc%f^Gm-p~2a47Lh
z1U4uT=+nDMJ5=}iF3tGJI2JGp+#ejo`)rnxzZeA;7MJj6W*V7v8s&1CC;re>Kq$=3
zA@ewG|NB8p0YNH|Nk3vmW|(=4QQ&58FP;oPLpU5}=I}22*7LbA3J6zXF@Jpc_z96n
zgqefabJ0{luq?}#xSmKbbC7vxHW#roXOX-dhZX9;#Bu@CrM-6Ur=@_4w4<-TA1+dX
zMsv}9%EIp(w_%;^VCFEA|A)^Dc}DddSU@<)Tnt@J-~oTN<knYl>+b}kdJZj+c{*&j
z#bxaID87u3Gji}v;Kj>Vwts+2rBcB_DurC`KeIiY7TjSALd+c6YJoiM*KgnLH^ODU
zP{6>w6iTHMvwCC*?^cKKM>|6(m&)ZL;qr5G5@Vwy_7Hl3Q9#NqWv^v_zrDaHQ2Qx1
z_1g<t3bg8XyEGN>y5Eg33iKtDp7*;EMuDI>7LdhclZ#0w<0C+=h&8|z1$vkTj=h>y
zm(y8Fbn+}Pc=;BW(|GNA{zhvR2lOQ#`3TGItmi|rp6>#x90-031gWEwY5^aU)dLWJ
z0=P*;K~#90?V3GrQc)Pk|EFo1G!4WJX|D~5iM5T1bP)#!jW2_ZgLH9H=ocu9ytH+(
zAHa&V;9@k!x`@sde2JZ$s7ujFqR_NX2GSTC13u>}iNFQVz3uhfYxyOF=V7|PbDsa<
z?K1qqu-i3VWeA`KFSXW#VXcR;g-@k_%?H$}FnYk_@f`TE^X-*oFT5EN>Fw)3Qz#U^
zsshTOD`%UFuR{{WjjeGu>~@E$sNSNNYzOOML1xR<uS2`Q6t}BJrETd7$fheGoBbg$
zGj{{eo~DssU#HGm2njrVw2Y&pqliVq$YwJ1iggecIN|eA1>A|>Mj{@k${Of@7T{zv
z&uKRzD3{CB$;FTWhvy*{ji}Eu5fWHRrEvD#d8!)WJ0Lq3LIO^wQ$2|;`~B3lA~P34
z0(GthgP56}qpB5IxzHuR@%c_-kw(hla8TC>&%?jYg>C_kq9|BQrquU_X7~>1$whF)
zi>V`CC<9LFfF~dGn9sdIdFMNSb$`c@0B0|95jy6>G(DOrZkI8!@>od1us|K7x!^0l
zdMSW*%;#2d??aBN&g@!%V<Z<Bl*71tYJw_l-hL_J%F8rWo!K*iL^7$4RWtANc|<7_
zmKC@f2w;}7pv8-92GMZXnj^$lJ4UnbpPZzw6&_$7<W95;acR4Piz~~2=7pFaqlu*?
zM#sjeYot=C(5hdj0E-=?QzPT*F*-EhpbkjWF?!R?W7NpJn~5#~qw{ViLIQlXcRTN9
zAtcc5<Fwv+Hv=I7tuHh(=3NUz0<z{^3*7=T=Uoe70e<Goo_8&T1o+2hTmP_SWx4{g
z=?ci^KM)vnt<m4C$Emhc9}Ms8|3^1H^IHw<w+poT#f>emD&YBbv&U=ONYKUi_Vu4G
y)Nl5vb7<&bpjNAeEGt46&KO(xT-v;k-~0q}3wZluNxVJ)0000<MNUMnLSTY6ZYpp9

delta 1691
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
W&b0b5ZePRt`v9nJKCU%nTH0TFm<O2v

diff --git a/public/favicon.svg b/public/favicon.svg
index 68dd2e66..ab7886d3 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="64" fill="#1c1917"/>
-  <path d="M256 108 L432 332 L388 332 L256 168 L124 332 L80 332 Z" fill="#fb7185"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5 0 100 100" width="160" height="160"><style>@media (prefers-color-scheme:dark){.ink{fill:#f5f5f4}.dot{fill:#fb7185}}</style><path class="ink" d="M58 50 L18 82 L18 62 L33 50 L18 38 L18 18 Z" fill="#1c1917"/><circle class="dot" cx="80" cy="50" r="12" fill="#f43f5e"/></svg>
diff --git a/public/logo-icon.png b/public/logo-icon.png
index d9c4d084283f6a9cffb1fd8ac01acc0c48f75d4d..b85b7c82a68c866b57002790ab7678a5c12a75aa 100644
GIT binary patch
literal 8207
zcmd^k_d`=z*X~LP5{iJLf}nz;fDITyQ7Orc1yB^MI7*2!il`Jt1*GIyfWd}}ih`0j
zir{Mj2gO231OXjdC`uDTQOY1C1VTys_Bp`&-TN=x`%_N#S?gKPDtn*3*N$=7YCly)
zR|Np3Iy$W14nRhaWS~w#KZC*5V*vVJ9oPT5Gx%Olqw{5V*Za+az^C8Tsnaf3f4us1
z*}V1V=Ibg)7hKptR@YK`qOf3ohR&g1UjFW+b1LY-EDNV9-oi&Iqg95l^GgmJ<#b-y
z60N9dn6NF5T{u6-K<}r6$z4C??XQaE)a_21e|fp(hHqVSYjtMv(AF>Fz+PKc>`qbm
zOl9RomEtC$I7ghoTX+5gqxi0cT+(}Ym0DRL%jlJLLuTD{dBxu&%rm^G)0&X#p_LH1
z>Oy4y-;aHqUq4u5Q*|LSL*QNYxW+aoJw0HF?4d_YUu5H|KmA3UQ=B=pSDUk1IqCNW
zo^D|o8v9ylWbFFkgn%VY4)gqe3terQq2z7lAMscBHr{8r!{Uo%0jqwh_)3(0B_z!8
zsCr>g#rge4bKKl)1nVUmQY-~2T2lf8t>f#HLtFJ^zP<e<6UVjl|76a)<9kSd&+0RS
z0g_#Ui|W`1MniK+SAcg_l&!CMh7vo>C&l2Zim2SJBJAk?mXE)g?7U9Wj2#JD>D>_8
zdSB)%SOh1xS6xu(aT3z!Oq-(?xp)aw>M{4Iur3uzvdA#FG0?muO1w$s>;f`Zj|Qhq
zj46+G!KaXO^1W2mUJBKZVjiBYD=jrnd1q+;8t(9Odjhu{9xkwwFGtur7j2}UY39ia
zyo`G<nHj%`p=sT^Do#x9zxF%={!9p1U1G_)H@JuK7b(5%-{;JVsB|+AGIShG2sIAT
z<$Ywm+?*k^NNKQNr+2zA9=ORLtFSGJi4Ddt^~^<3`!ZbYJAavNb;6JWHzC2uc2~gZ
zzUy8^>L261EWSd(cMa&);<JbK*F+4&2~I3)mCJ&E*5)p68hR5-hIG>{RW@PYYh!W*
zC%z|)SZpUMpo%k^8$yH2zXb+V%}mP*ulA(bRDw>hPzkHp=b;`Z-SY4<c3qJ^_P)uY
z=WcZNr~+5#@@n$N>7WoK1M>*O%h*&UE;o?|PGx^CVC0j`IpN*&{n0DO(hmh~#(o#I
zyT5*9of2-N!JVsDBG#wJ(7IR9-kf5t*6WQyE?SmcP?{B+^i4bM@8?UQvMs#fbXP^N
zGB|CkDrw41Dw^W0L?1iAO0Md8@HIn9V*Hz6bT6Utn_IkC@wYk>qe}x+sxIVTD%$Fy
zofdU_CbY}ICH3(;e?e_bX#TY*b!>FhH!E+uSc))j9?pE{b6oK8gZYIP1#SfmZZ7wl
zVZIYe{Q0N-4>yz-YzFop>#mZ&s=+=v@aC3YW2x-1fYZnLV~4|poaHE0b2SZ{x!1jn
z{bS>wzCQ+gBnsHoy<YSC2S@=!nIrA|UKOAhxye+|CyWF-_R2`?Hq$_r^fT~Qtb|?N
zC!N8Lp=lo<)&Sd=|19P%QeYH`o-5U_3R{Rnf3+-ijh$ot(%7x}FK}RqX~OMdw`>ZW
zVN}g5Z7>Zp<!&G~KVbsT%wm6gocyF@L>4@H@e-L)^ra!`=sIgE(9J9#{J#2x<YPnY
zkEIDC!iyiieJiu@E}wHT9_X>h66#Ji=2bk5Zu{|f4TXEPr(vF7gQyGzX7E#FF{Vx7
ze%0RVIi>(PRhBK)$VvVjv-q6pU?)a=gPJTz9#f$K#l?S1Aiwpc)^Jp3Hq@Rmd9~jg
zC;24gfM6uXeg0m2Ql|eX*~|%<kG!(Y?7CRP3E98DrTPS*YLsSXx}UMcUwpO9c%#4O
z^iS>yC@J@C)Gvz)ZCwOBZ;O_*1rLpf@2g@@-^^8e5Y7ZR)B9~65*v}wp!z|`Xb6;Y
z$p*0VpkU<lV*waIYRR#{9T{GJ4N0P7VwW&w*vY=@BU+UNRJi4nAl798VDBxrjNC@Q
z|5`dz0aCA`N0kDoJwBA#QO{E+gG;25rK*6!II5RM!Y<+>*KiT#|K}et^0(~JAhe_&
z4i??@Ze0pGG?EKO%N8f~>kt1_W)41)>*fxRv<a-h+=I-9#UN|$&1&04l?#_@T#ygl
zO8ba(^pTEG!C<thEw-QvbB@&Z4ErUQj8$lX;#+gL@k*oLUf#2#n5n=`RmR9}OW?*y
zGQ$k8<C>tjXF2SyRRu;hg--gaf_?M=c(@Q$%$;DNk3JXwXMp}4gN0ob{GZ+;P`RcB
zOMfat`ZPqSTbWSlM#Je%;81CY<p7*OR*o&4v@!>Y=}pCEipZdI8%(&VWP_L5z%@q(
zH_isfdZl#q?*|nlUtT+@@&*5ANDyn@j^qkwLkz+-#fkM!TG@?+oEA)~tcMwl?WFWP
z#1YwxQ^#r18<FngX%jYFj8T|;6zMm%0%Binj}#IJ1-d&D+e9TaZ1G2BY+;WA3Q8xQ
zj2mPFM`J+b$F{%>_AA)4-wfCsTx=?#K|{{ooHJpAXNHU?D^1uKj0O|BHklEb16Tx#
zb?0_ih=ATZBcP+CYmdSqlmv|^bi4xOlrjn(<~JRQ9f4;kCOlh&<*q>(d4qf%oR6mx
z<&CX}tdC6x$F(FR=3<9P+9`5X5Y|DI@lG$o$Uiu2%|xuQ0bGC0M6B4$5OBB#k&%Dq
zgNn=MaSfDcmmL#n=bl7vRnMBRVUAN-IfbxMg=+*78b-JyqDdQ{r-7m-bUf0+y^2Fp
z2H;Wb0o)OUM8z)Ese+Cf$puIOK15-0gApex_9dB+e`t)$e?4Rdj917z3O4}d=<-!C
z!9d4@D3SEzh(l0sqn@3#h!x|iW_TY^ifVO8F4PnlMbgh$VDhOnD=6A5VzfM8k3Uj4
za&bQr*@LFXognv6-;vh%+&Qu@SxqxNf4NLV(jXR0c(+_VW;>J7o1W6Fwxv<miSkfG
zu9bMu?T{<^(;zZK`&v12rJh1ps#X0IFCyXgw!+B^IanAmF}TUf*wvTgQUyq=PW6+w
z88pA9(CyLVxWYX{Sc@=oiOENY!E;DiM8@isv7~fD)5U_sGZc{rlJUZzU!l;;abpCZ
z*VDlEpqT+H2iQhrcF|A8?-|-q{TmG4Lm)&vc|l}08CS;RNoOfz7m+gJ(7BZ4GCP!n
zM<{$DEcwICz>|pQU<{<*oTSgwCbLf<Wt5~bIxx%_bCI~aG3+@sDSq-6G@~gz0k5qL
zrU%C99Hl@!0>znarohv`wXc~Gljl7h0)GFmLKg+rjfcl&1&PZW=YMk(Tq{5UA#!1I
z1q>1=`E(!u(Y`b<D^ue4R#fV*>?$jp*^=X0TEI^dHa%@`W2Ft{v&;%<ZOlN9?cAi0
zmeKT)ZtZwxlI_r?{?@MeR@&J>3Unj#h}PE|P5o)H{sUd5(%bLeM2}jz&1PEbmft&L
zHzlv4zqZvmZ->DDUn8j1B%&1XVDK@=I=7C$f>}C{D0>tpednF;WzU>G&r{+Pw!xPI
zdXqt+zt7@yczWvdNBFs6*|g<8>#rSX))N@J?@%If9VT;Ey?Ab4UwB7ZOjD1>(nziX
zEn*XOCmqbU6Y);9f8Qn-cKds%W0lF8Z{<9VW$L0k!1zvti06-Xzr%B_^K*m0@fVrN
zM9KZ5`cg)SC0$O1!n}#tv6+>P5%0U5gXHeF?DhuB9~j5eb~`YUMBzlav1yg(JZpN#
zT;sMX^vWyZj$0bIh<^j~(*%dk%#+{c%~Ri)@}<L98ZntBIN^mYBEMg3`?Bx4M%c;!
z=y&VA8Kggml{Q*!pcg5F5sr-Kjct7-Sm=3uLGue^PFvf#xkhlu1jP|w&9DJ!)*JV%
z?4Pc2ue7giB`;Gt9S4jhgkvr*2B~~YVcK<SrzweBO_VCzX60OQn$Z=KpS0KTG<oet
zFyDn25I!3Y_P5Lb^GXY$tfvQ2;c?l7V~qEe_R?J8huBkNB-%q!Z3QbTD@l?Vyg{1^
z7x&}&$GSrL3pHkr9<-~vouo73Di1L6*tV8L-$w8-57B3KoNCFaY1B!3dlNadI6aJv
zwc@$MC%Mzc1aZnk=5FuB>3S5{fEPEu?C5Y_4b~LdORm<hlLrTnCQ=s11N$%$OC6T3
zz9?f_*9@)++YKQR3jt%W@~b>fzp2fTIlHokni4x@yAg?QJZa_f*0H_(!J*vm@4EXq
zTJ!cv9JBwjBx7Z0RUpjOt`3rScg(=?%7{tCEqp8H-<bi6DJGYI9Y=VQZr3ZbGR+xH
zp`!I2E1R5$pS*-jOFxMyzqnk9J%@~KMN8SZ4@u?H*r*QjO?%*}vScOR`S(LblqhdA
zhHuxUh)MxXFTPh+wHSVA!eF6&-&?OWl%I-f<sRH0A?@<RqYjMUDUfqRM3xQ9M>+fb
z{7iEX=->+xH#xjVA?QMP+5o>YRY&3G2H;uym>F!~a^5u+Wk%h?m$U5M^)lwz!=Qqt
z8-Lv0Q69ZdF1jAPK^XzwDkPyW)~W`7SuU)(pydB{rN=Lu`eg0ra~Gv+k}(frA?B`O
z4kQgn=JeIhPSaTwN>EH9)<L!?2ZVA#aC4D!q*M^yr3E`b5S8L0^x#$nef!bH^y;rJ
zkBwr=gZO{CIwb;oiO(E{nSt|_P|_?YDiQ+vBBowNV6S@=9~sM&jbX(+e{sEQD+?Fi
zMARd;S46gvGqdqJZMmzR6zl2~2W&KmR!2-%L=Kbo1t<GYapG%!I;jl*i6?v-3^$|0
z<#;eT57;Nf$*xb4iV3E}K~3mifzKE_y8bYk!VQ+jr{rqq%G@}z#I6M-FxyP(k2H($
z8TF46%30y7Br>LK{T{cUHI4U(59$;WR1jaiu&(0bOJ~(OD*PiXBz3GNe+qq-A+~}F
z{~1;a;?I@!_lCC4%pc2;%TijNYS_+58*`lC!`|EFCs*|x+nz1vEJA7IjD1PV>tnWR
zwLD3Q(D59KpD;wfRe6t}O>_3_kjA(EN^kq|D;=@lS(HulWZ^^GxNSeSaq*!7G{nb;
zim}3u&NSvszme1Ka@$**&{qHC8~-L&%Iy&Ok)+%<t(JfIb#qV_J(b+lN%X$tHJlJ;
zQbN1*>1e%DFSW+=#{-v#B5o{8Mck%QWelAwg|e{MrD9j1abJjMt@!GF!NqOw|2u6C
z)T0_Y*u+XJMDTuhIYu_Y`OlHWnPDq^HM69M#U8)-lCdVoAaT1i<Opln^Wp|>MX0FS
zEU!=6<5{$HlL2(zvh1+xEB9*RtPO>SLp<6%b(XwBqjlyYG!ddgn07*0v3SHfO_i0?
zTNqqm5=<s$0;7plp3U?X`oCRaGumQ%_KI*+K0t-F%Nu(VhdX{jfNJKtSLMZq(D`h_
z0IPhMe7W!nKVtPVS$*o0g=liF=qvYb;@EXnfpbJ~S_;_@OOfAl1m2o<>1c`As<1}E
z|MCyc3T0SpIDxA_H3hmmdO2uq*y<1%A(Yv)OCSE2!3eh*dxNh(cZWMH`t)tl7U`Qb
zehau*qWHB-+uF29A^%&xHyyy`5s{aoY~~6ZZN}<c(VH-&{RmITJfZCKJNz@uA8jsb
zo%z(!St`!ylfCwrF1-hA6M~v?c@V`d>7m?D6K3RR(^w($LCKFR`YKr+P4m)L^QF;A
zYRn;x=+>ENd*bB&zJZ7^Exc<7N#1u}KEEWV<%(eD=Qew$uB<AKsg>4ACUJKX#el4z
zcodG=+XY0&PT5$VG*&QRFDsE|tpoFwgy~{K@-peETj<MDA{O2qj_<xbdNl96)i>R=
ze}%37&e5?2*38Y!MnkxhI^iNmuX5cvJ8{zRu2a*SOF0b`(28r9po%CFXC*&APEQz3
ziKOube0MSyV~%Hpzh&im`WfMy{+e(y_R@kF^6fG_#|+7jJ~R5M+23aP*ofqTez35Q
zMB>&y$_gj)AgxSE)7&bQiJ61v`-eJ`V$wPlNZdV>L5(=mw@cW<bmL@IX{c@T>`v?*
zTP_~DgueZRBg6Z2mBS=+t*wJ}n_qDF6fi`EU7pREhidG^s3lu9i*!gTH3prSNw++F
zmh}sQdY26pUqF4ev3X4WzHS<c8#NKfh#MytT$`mBRPJf<C3fm#`_ac<va}*AroUuJ
z6OR3fmv)5d&C?XWyIDrxR>(y$_f;N^%Gxf`lw;>geS(+CwuIxGDx3uC^&=ez!*jzP
zE47*J`S?Cf(sTHc(ukzL<C0*iJf)bq!-_=DoFK*;+VpEc&+RwMX#35tC~u$f>}|kZ
z^TsbU@qqo1hoon7v3|q8%SGa@J#zFh*w@*%k^;XID@|+&&1C`FE)wxjNS+RAXklTY
zL9~ZFm^=|>I{MV_zBQ4*voAEk?FQirz8%#@6VJOz<Kz{zdF}E;YZpS~?IL3beag@x
zRFtjXxq?K`ZbQ|05J}yK)O+Kq8WehRWn(U0`w?ts3O#a?4$q3rUO|-IS-a^la~yu~
z7NpWAYFcCPK6JjDnBf}LXq$g$9C8+!oigsnO0<`c>lKxXg?EM(R!#@o8<XVsqN4y&
za2nN4Fo=ySo+h*NC%IsO=s+=<PRvyqQzupojsCr4w%0hin-iQ|KS?HiEr~~(^tE|_
zLT?!tdWO!jB}6E>0TlY#|H9jl+2)ht2IxFBUKH36Is%RJN{{%zPht7l`iwSoV5_{(
zTuWm3woBn5aq^4uYSJ)Yi)6{;gXlDB0J~8t%;({Q&6Oo$QXx8m)4{C-L1YtWzN2@C
z6)q#I7_3IAVVuARu@D;f5q=h(2M9b49TU;v6UEI5KU-fRF%Y6VLVT@=3l8FfGjKul
z5mHQD1jq`0!sQKvd7qLAI_=R}3fydcwi8kbp9;bV4DVG8{z3>EA;A<}uyYDJQs?5P
z(O#1{cq5$m8_;358#g$9FekKo@#FddoX^Qb1YSeN!NrL8dxC`&9jSSd1f({CtR!qR
z(d$j>xa|m}ZL$)#J+_(XE#S7tdk#2`IwF}&upqh;R9xjf;^Sn2tNe>ML!RT<sc2Kd
zwIodYA(c2B8;}tr)RC3KGZcwC>v4(!c&FgF5^@W)k!2lkVsJ51X~VI>6mN-C;~sMN
zB6ZZ9LF#Jj(BMvDFdYr9(!~eABlTJbTs<96XEz=T_=<dB*b<T(5zFs5^U3ZJk~Cj}
zB=g4y5%u)lxVrffH24(H9keX~m4GL>Ka6|Gkf|DuS%~ViSwaj>M}ynp+q<ANB&=nK
zgoVA0#THB?WwZf+9!UY%>G1!>!vQ$9kNP0|D8P~m$udRm2Oa3s0Q#Z?V>|}-cnl8U
z{oWyZLsaZXSD-5<7==B(i>^zWc$utAsK=^nSsGq?^__2MeMZkZba&!%_R!<HhLUps
zhMBkP`-*CSKJ`#yV#0r$$+;9*k{&Giqv|6k|7y=Z=hwc$JMhNyvRt8j;M2>veYX|3
z_9PN}R;kvdBIloLwIOidaCAmX65imha|&h%IzNXOlhVD!qK5kMONPNc=#nAgd+kew
zVv>0}l?uBYR53wXy2So~2EbVFHwkTh+7!%~Or~>ImWHEShHrX*xhilK&H|f{$j#Dr
zo}*T=lyoh49=he*AspzCqu#nInbDB%+t4)IjD*>RjJ7caN9vA}8Rk}Rge7$r(Rh>F
zF!9hT_csB9oh`xdey${4EAh<noqs{}oCKXQ?cRvKT3(2$I<Tey=5bfqf+b05D;h2;
zc6FNp=RahAxEo*Jfx{>yzBt^JnI3Rp{=E)#Wq>X!&ai#+?eSOpw^W4<eR`=Cnx|+w
z8<J2P+xB>qx4b;)GdQ%{>gvGS-Y@oYkHbR{fG#Z?GyiF1{(S@%ZY2Tx>28kL*;F6!
z=S0)MVV2t}n9ic2#-L9^|8v8ltxdDcTwfo8M;+v4_x&`AsKGl>%YDW(pFA^fD=TX=
z$v1iAS2gTo6-tI-nYc_|JR7xpM|<{ZM6b%WMy>xvNAjvrEPF4z9@VvjWfU^K?&}_j
zHJ^t9@xM0#E;r`K%3S|Yq#u|8ko->KEi+qW4Pi?F{;5!VH^hAKlkhlVUxTTwE(-PH
zBMEg4=>FuifybfWT~Tw81dM+U<tbdUckaF9TK9D>eEvVKJe+t(_(IyVsfzSg)$_op
z9Eg{hzG?v-wJH0`?#W7jWvKzCd^oQvaTO<`CND4V$;gq$Rde7oor1cFS2{~+vmH@C
zy6vp@);CJ)0WN=_@+EQTqHIOLbkwi5YPFL8@rZOyZ964<uw3a}0UdPCw#RI7&F;<I
zmOE-}h&rEk3#g!%Q4u@lURFys5TqNxo|LIJ-@SFbreX_iSFOH~9IV@%r2vfOTeKo(
z=lx6?vT3p^s#P!$D3d^EW5RH>?K{t(8S}K1v6&mu{ocirJ|RCfW(s`;jpOUOx}i5n
z7hs!KlDb7{Zb5;TQa)vi4eTcFy0q%UPb)y`HZ5<d?_rVizzccU4pr1}o`Ui@Ttppl
zK>6Ht7$qBBbmlsijJaBTfjuv6X6;cKJ`=17(yunt4&~>>+4XX6E<mkiO<=SB32F1(
zwiBK?%;(*6Z_*$j?%z!MUQ>1<dh;3d?ho|Nn(Xa)#Lrr<K3uS~`MJOqT;8^OTRf<v
z1#SpsBv{B^&zK7xdL^YjZb#y`Q@_n}p3*dfsR$bmCkzhewsVhJWHDPhEAj=d1>H_?
z&+G~{uP%M*D?w2%z>aAhV_R119LoDJJ$9s~@-wXFGt6uMJ~=k{BJ=l)+ju{ZC7e#t
zBE!ZfF+n4~4Rh2jdRiXew_TkTBK#0JjcMEW=#(Aoj@zo7uuAQKnp(oOzu0xtnK=hE
zoz<Ik!JzDCo4#txLBYm>oq7rRf-TGkS7`3pS^9+>SW7=~jAtkP6J7L!<A$y4U;M^6
F_do8EQfdGI

literal 13014
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
R|4{{Y?u_2Qc^X!C{tr1$xQPG&

diff --git a/public/logo-icon.svg b/public/logo-icon.svg
index 68dd2e66..33dd9a56 100644
--- a/public/logo-icon.svg
+++ b/public/logo-icon.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <rect width="512" height="512" rx="64" fill="#1c1917"/>
-  <path d="M256 108 L432 332 L388 332 L256 168 L124 332 L80 332 Z" fill="#fb7185"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" rx="64" fill="#1c1917"/><g transform="matrix(4.4 0 0 4.4 18.4 36)"><path class="ink" d="M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z" fill="#f5f5f4"/><circle class="dot" cx="80" cy="50" r="10" fill="#fb7185"/></g></svg>
diff --git a/public/logo-light.svg b/public/logo-light.svg
index f376adc7..c7aaadc7 100644
--- a/public/logo-light.svg
+++ b/public/logo-light.svg
@@ -1,13 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="520" height="120" viewBox="0 0 520 120">
-  <!-- Mark -->
-  <path d="M55 22 L110 92 L97 92 L55 41 L13 92 L0 92 Z" fill="#e11d48"/>
-  <!-- Wordmark -->
-  <text
-    x="130"
-    y="88"
-    font-family="'IBM Plex Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace"
-    font-size="72"
-    font-weight="500"
-    fill="#1c1917"
-  >skilld</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -79.5 511 84" width="511" height="84"><g class="ink" fill="#1c1917"><path transform="matrix(1.3125 0 0 1.3125 -23.625 -103.125)" d="M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z"/><path transform="matrix(0.1 0 0 -0.1 101 0)" d="M298 -12Q213 -12 151 14.5Q89 41 54 86L129 154Q161 119 202.5 100Q244 81 299 81Q347 81 376 97Q405 113 405 146Q405 174 385.5 184Q366 194 334 199L251 212Q219 217 188.5 226.5Q158 236 134.5 253Q111 270 97 296.5Q83 323 83 361Q83 442 143.5 485Q204 528 310 528Q385 528 437.5 507Q490 486 524 448L457 374Q435 398 398.5 416.5Q362 435 306 435Q208 435 208 374Q208 346 228 335.5Q248 325 280 320L362 307Q395 302 425.5 292.5Q456 283 479.5 266Q503 249 517 223Q531 197 531 159Q531 79 469.5 33.5Q408 -12 298 -12Z"/><path transform="matrix(0.1 0 0 -0.1 159 0)" d="M77 740L205 740L205 306L211 306L286 388L413 516L562 516L357 313L584 0L431 0L266 240L205 182L205 0L77 0Z"/><path transform="matrix(0.1 0 0 -0.1 217 0)" d="M332 596Q287 596 268.5 615Q250 634 250 661L250 685Q250 712 268.5 731Q287 750 332 750Q377 750 395.5 731Q414 712 414 685L414 661Q414 634 395.5 615Q377 596 332 596ZM98 101L268 101L268 415L98 415L98 516L396 516L396 101L554 101L554 0L98 0Z"/><path transform="matrix(0.1 0 0 -0.1 275 0)" d="M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z"/><path transform="matrix(0.1 0 0 -0.1 333 0)" d="M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z"/><path transform="matrix(0.1 0 0 -0.1 391 0)" d="M403 91L396 91Q375 44 338.5 16Q302 -12 242 -12Q198 -12 161.5 4.5Q125 21 99 54.5Q73 88 59 139Q45 190 45 258Q45 394 99 461Q153 528 242 528Q302 528 338.5 500Q375 472 396 425L403 425L403 740L531 740L531 0L403 0ZM296 90Q318 90 337.5 95.5Q357 101 371.5 111.5Q386 122 394.5 138.5Q403 155 403 177L403 339Q403 361 394.5 377.5Q386 394 371.5 404.5Q357 415 337.5 420.5Q318 426 296 426Q240 426 209.5 392Q179 358 179 299L179 217Q179 158 209.5 124Q240 90 296 90Z"/></g><circle class="dot" cx="496" cy="-27" r="15" fill="#f43f5e"/></svg>
diff --git a/public/logo-mark-light.svg b/public/logo-mark-light.svg
index e7b72348..a265f267 100644
--- a/public/logo-mark-light.svg
+++ b/public/logo-mark-light.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
-  <path d="M80 34 L135 104 L121 104 L80 52 L39 104 L25 104 Z" fill="#e11d48"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5 0 100 100" width="160" height="160"><path class="ink" d="M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z" fill="#1c1917"/><circle class="dot" cx="80" cy="50" r="10" fill="#f43f5e"/></svg>
diff --git a/public/logo-mark.svg b/public/logo-mark.svg
index 12e38cc8..21d60c47 100644
--- a/public/logo-mark.svg
+++ b/public/logo-mark.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
-  <path d="M80 34 L135 104 L121 104 L80 52 L39 104 L25 104 Z" fill="#fb7185"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5 0 100 100" width="160" height="160"><path class="ink" d="M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z" fill="#f5f5f4"/><circle class="dot" cx="80" cy="50" r="10" fill="#fb7185"/></svg>
diff --git a/public/logo.svg b/public/logo.svg
index 412011b5..416ccc92 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,13 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="520" height="120" viewBox="0 0 520 120">
-  <!-- Mark -->
-  <path d="M55 22 L110 92 L97 92 L55 41 L13 92 L0 92 Z" fill="#fb7185"/>
-  <!-- Wordmark -->
-  <text
-    x="130"
-    y="88"
-    font-family="'IBM Plex Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace"
-    font-size="72"
-    font-weight="500"
-    fill="#fafaf9"
-  >skilld</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -79.5 511 84" width="511" height="84"><g class="ink" fill="#f5f5f4"><path transform="matrix(1.3125 0 0 1.3125 -23.625 -103.125)" d="M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z"/><path transform="matrix(0.1 0 0 -0.1 101 0)" d="M298 -12Q213 -12 151 14.5Q89 41 54 86L129 154Q161 119 202.5 100Q244 81 299 81Q347 81 376 97Q405 113 405 146Q405 174 385.5 184Q366 194 334 199L251 212Q219 217 188.5 226.5Q158 236 134.5 253Q111 270 97 296.5Q83 323 83 361Q83 442 143.5 485Q204 528 310 528Q385 528 437.5 507Q490 486 524 448L457 374Q435 398 398.5 416.5Q362 435 306 435Q208 435 208 374Q208 346 228 335.5Q248 325 280 320L362 307Q395 302 425.5 292.5Q456 283 479.5 266Q503 249 517 223Q531 197 531 159Q531 79 469.5 33.5Q408 -12 298 -12Z"/><path transform="matrix(0.1 0 0 -0.1 159 0)" d="M77 740L205 740L205 306L211 306L286 388L413 516L562 516L357 313L584 0L431 0L266 240L205 182L205 0L77 0Z"/><path transform="matrix(0.1 0 0 -0.1 217 0)" d="M332 596Q287 596 268.5 615Q250 634 250 661L250 685Q250 712 268.5 731Q287 750 332 750Q377 750 395.5 731Q414 712 414 685L414 661Q414 634 395.5 615Q377 596 332 596ZM98 101L268 101L268 415L98 415L98 516L396 516L396 101L554 101L554 0L98 0Z"/><path transform="matrix(0.1 0 0 -0.1 275 0)" d="M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z"/><path transform="matrix(0.1 0 0 -0.1 333 0)" d="M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z"/><path transform="matrix(0.1 0 0 -0.1 391 0)" d="M403 91L396 91Q375 44 338.5 16Q302 -12 242 -12Q198 -12 161.5 4.5Q125 21 99 54.5Q73 88 59 139Q45 190 45 258Q45 394 99 461Q153 528 242 528Q302 528 338.5 500Q375 472 396 425L403 425L403 740L531 740L531 0L403 0ZM296 90Q318 90 337.5 95.5Q357 101 371.5 111.5Q386 122 394.5 138.5Q403 155 403 177L403 339Q403 361 394.5 377.5Q386 394 371.5 404.5Q357 415 337.5 420.5Q318 426 296 426Q240 426 209.5 392Q179 358 179 299L179 217Q179 158 209.5 124Q240 90 296 90Z"/></g><circle class="dot" cx="496" cy="-27" r="15" fill="#fb7185"/></svg>
diff --git a/scripts/generate-brand-assets.ts b/scripts/generate-brand-assets.ts
new file mode 100644
index 00000000..7796242e
--- /dev/null
+++ b/scripts/generate-brand-assets.ts
@@ -0,0 +1,65 @@
+// Writes every static brand file in public/ from the one mark geometry in
+// shared/brand-mark.ts. Other repositories and READMEs link these filenames,
+// so the names stay fixed while the drawing changes.
+//
+// Run: pnpm brand:assets
+import { Buffer } from 'node:buffer'
+import { writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { Resvg } from '@resvg/resvg-js'
+import { BRAND_DARK, BRAND_LIGHT, BRAND_TILE, lockupSvg, markSvg } from '../shared/brand-mark'
+
+const PUBLIC = fileURLToPath(new URL('../public/', import.meta.url))
+
+function png(svg: string, size: number): Buffer {
+  return Buffer.from(new Resvg(svg, { fitTo: { mode: 'width', value: size } }).render().asPng())
+}
+
+/** An ICO container of PNG entries. Every browser that still asks for favicon.ico reads PNG entries. */
+function ico(entries: Array<{ size: number, data: Buffer }>): Buffer {
+  const header = Buffer.alloc(6)
+  header.writeUInt16LE(0, 0)
+  header.writeUInt16LE(1, 2)
+  header.writeUInt16LE(entries.length, 4)
+  let offset = 6 + 16 * entries.length
+  const directory = entries.map(({ size, data }) => {
+    const entry = Buffer.alloc(16)
+    entry.writeUInt8(size >= 256 ? 0 : size, 0)
+    entry.writeUInt8(size >= 256 ? 0 : size, 1)
+    entry.writeUInt16LE(1, 4)
+    entry.writeUInt16LE(32, 6)
+    entry.writeUInt32LE(data.length, 8)
+    entry.writeUInt32LE(offset, 12)
+    offset += data.length
+    return entry
+  })
+  return Buffer.concat([header, ...directory, ...entries.map(entry => entry.data)])
+}
+
+function brandFiles(): Record<string, string | Buffer> {
+  const tile = markSvg({ colors: BRAND_DARK, tile: BRAND_TILE })
+  const smallTile = markSvg({ colors: BRAND_DARK, tile: BRAND_TILE, cut: 'small' })
+  return {
+    // Browser tabs draw the SVG favicon at 16px, so it takes the small cut and follows the OS scheme.
+    'favicon.svg': markSvg({ colors: BRAND_LIGHT, dark: BRAND_DARK, cut: 'small' }),
+    // favicon.ico cannot follow the scheme, so it sits on the stone tile. nuxt.config.ts declares these three sizes.
+    'favicon.ico': ico([
+      { size: 16, data: png(smallTile, 16) },
+      { size: 32, data: png(tile, 32) },
+      { size: 48, data: png(tile, 48) },
+    ]),
+    // The weekly email header and the Discord digest avatar use the tile, because Gmail strips SVG.
+    'logo-icon.svg': tile,
+    'logo-icon.png': png(tile, 512),
+    // `logo` and `logo-mark` are for dark backgrounds; the `-light` files are for light ones.
+    'logo.svg': lockupSvg({ colors: BRAND_DARK, height: 84 }),
+    'logo-light.svg': lockupSvg({ colors: BRAND_LIGHT, height: 84 }),
+    'logo-mark.svg': markSvg({ colors: BRAND_DARK }),
+    'logo-mark-light.svg': markSvg({ colors: BRAND_LIGHT }),
+  }
+}
+
+const files = brandFiles()
+await Promise.all(Object.entries(files).map(([name, data]) => writeFile(resolve(PUBLIC, name), data)))
+console.log(`Wrote ${Object.keys(files).length} brand files to public/: ${Object.keys(files).join(', ')}`)
diff --git a/shared/brand-mark.ts b/shared/brand-mark.ts
new file mode 100644
index 00000000..a6f54991
--- /dev/null
+++ b/shared/brand-mark.ts
@@ -0,0 +1,168 @@
+// The skilld mark: a prompt caret and one rose dot. Stone dots are the noise;
+// the rose dot is the Skill you picked. This module is the only place the
+// geometry lives. AppLogo, the OG lockup, and every file in public/ come from
+// it (scripts/generate-brand-assets.ts writes the files). DESIGN.md describes
+// the system; change the shapes here, then run `pnpm brand:assets`.
+
+export interface BrandColors {
+  /** The caret and the wordmark. */
+  ink: string
+  /** The one rose dot. */
+  dot: string
+}
+
+/** Stone 900 and Tailwind rose 500 on light surfaces, stone 100 and rose 400 on dark ones. */
+export const BRAND_LIGHT: BrandColors = { ink: '#1c1917', dot: '#f43f5e' }
+export const BRAND_DARK: BrandColors = { ink: '#f5f5f4', dot: '#fb7185' }
+
+/** The stone 900 tile behind raster icons, where the background is unknown. */
+export const BRAND_TILE = '#1c1917'
+
+/** Which cut of the mark to draw. `small` is for 16px, where the regular caret thins out. */
+export type MarkCut = 'regular' | 'small'
+
+/** The mark lives in a 100 unit box. The box starts at x 5 so the caret and the dot sit optically centred. */
+const MARK_VIEWBOX = { x: 5, y: 0, width: 100, height: 100 } as const
+
+const CARET_PATH: Record<MarkCut, string> = {
+  regular: 'M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z',
+  small: 'M58 50 L18 82 L18 62 L33 50 L18 38 L18 18 Z',
+}
+
+const MARK_DOT: Record<MarkCut, { cx: number, cy: number, r: number }> = {
+  regular: { cx: 80, cy: 50, r: 10 },
+  small: { cx: 80, cy: 50, r: 12 },
+}
+
+/** The caret's ink, in mark units. Both cuts share it. */
+const CARET_INK = { left: 18, right: 58, top: 18, bottom: 82, centreY: 50 } as const
+
+/**
+ * The wordmark, outlined from IBM Plex Mono SemiBold (SIL Open Font License),
+ * so a file renders the same with or without the font installed. Font units:
+ * 1000 per em, y points up, the origin is the baseline at the glyph's left
+ * edge. Every glyph advances 600 units, because Plex Mono is monospaced.
+ */
+const GLYPHS: Record<'s' | 'k' | 'i' | 'l' | 'd', string> = {
+  s: 'M298 -12Q213 -12 151 14.5Q89 41 54 86L129 154Q161 119 202.5 100Q244 81 299 81Q347 81 376 97Q405 113 405 146Q405 174 385.5 184Q366 194 334 199L251 212Q219 217 188.5 226.5Q158 236 134.5 253Q111 270 97 296.5Q83 323 83 361Q83 442 143.5 485Q204 528 310 528Q385 528 437.5 507Q490 486 524 448L457 374Q435 398 398.5 416.5Q362 435 306 435Q208 435 208 374Q208 346 228 335.5Q248 325 280 320L362 307Q395 302 425.5 292.5Q456 283 479.5 266Q503 249 517 223Q531 197 531 159Q531 79 469.5 33.5Q408 -12 298 -12Z',
+  k: 'M77 740L205 740L205 306L211 306L286 388L413 516L562 516L357 313L584 0L431 0L266 240L205 182L205 0L77 0Z',
+  i: 'M332 596Q287 596 268.5 615Q250 634 250 661L250 685Q250 712 268.5 731Q287 750 332 750Q377 750 395.5 731Q414 712 414 685L414 661Q414 634 395.5 615Q377 596 332 596ZM98 101L268 101L268 415L98 415L98 516L396 516L396 101L554 101L554 0L98 0Z',
+  l: 'M72 101L236 101L236 639L72 639L72 740L364 740L364 101L529 101L529 0L72 0Z',
+  d: 'M403 91L396 91Q375 44 338.5 16Q302 -12 242 -12Q198 -12 161.5 4.5Q125 21 99 54.5Q73 88 59 139Q45 190 45 258Q45 394 99 461Q153 528 242 528Q302 528 338.5 500Q375 472 396 425L403 425L403 740L531 740L531 0L403 0ZM296 90Q318 90 337.5 95.5Q357 101 371.5 111.5Q386 122 394.5 138.5Q403 155 403 177L403 339Q403 361 394.5 377.5Q386 394 371.5 404.5Q357 415 337.5 420.5Q318 426 296 426Q240 426 209.5 392Q179 358 179 299L179 217Q179 158 209.5 124Q240 90 296 90Z',
+}
+const WORD = ['s', 'k', 'i', 'l', 'l', 'd'] as const
+const FONT_UNITS = 1000
+const ADVANCE = 600
+
+/**
+ * The lockup, in ems of the wordmark (from the brand lab, 2026-10-06). The
+ * caret box is 1.05em tall and centred on a line-height 1 box, which puts its
+ * centre 0.375em above the baseline for Plex Mono. The trailing dot is 0.3em
+ * across, sits 0.32em after the word and 0.12em above the baseline, so its
+ * centre lands at half the x-height (0.258em) and it reads as a cursor.
+ */
+const LOCKUP_EM = {
+  caretBoxHeight: 1.05,
+  caretCentre: 0.375,
+  gap: 0.38,
+  tracking: -0.02,
+  dotSize: 0.3,
+  dotGap: 0.32,
+  dotLift: 0.12,
+} as const
+
+/** Lockup coordinates use 100 units per em, baseline at y 0, y pointing down. */
+const EM = 100
+
+export interface LockupPart {
+  d: string
+  transform: string
+}
+
+export interface LockupGeometry {
+  /** A tight box around the ink: x, y, width, height, in lockup units. */
+  box: { x: number, y: number, width: number, height: number }
+  caret: LockupPart
+  glyphs: LockupPart[]
+  dot: { cx: number, cy: number, r: number }
+}
+
+const round = (value: number): number => Math.round(value * 1e4) / 1e4
+
+/** Where every piece of the lockup sits. Pure data; the SVG writer and AppLogo both draw from it. */
+export function lockupGeometry(): LockupGeometry {
+  // The lab drew the caret in a 56 by 80 crop of the mark box, 8 units of air on each side.
+  const caretScale = (LOCKUP_EM.caretBoxHeight * EM) / 80
+  const caretTop = -LOCKUP_EM.caretCentre * EM - (CARET_INK.centreY - CARET_INK.top) * caretScale
+  const caretBottom = -LOCKUP_EM.caretCentre * EM + (CARET_INK.bottom - CARET_INK.centreY) * caretScale
+  const caretWidth = (CARET_INK.right - CARET_INK.left) * caretScale
+  const caretTranslateY = -LOCKUP_EM.caretCentre * EM - CARET_INK.centreY * caretScale
+
+  const wordStart = caretWidth + 8 * caretScale + LOCKUP_EM.gap * EM
+  const glyphScale = EM / FONT_UNITS
+  const pitch = ADVANCE * glyphScale + LOCKUP_EM.tracking * EM
+  const glyphs = WORD.map((char, index) => ({
+    d: GLYPHS[char],
+    transform: `matrix(${glyphScale} 0 0 ${-glyphScale} ${round(wordStart + index * pitch)} 0)`,
+  }))
+  const wordEnd = wordStart + WORD.length * pitch
+
+  const r = (LOCKUP_EM.dotSize * EM) / 2
+  const dot = { cx: round(wordEnd + LOCKUP_EM.dotGap * EM + r), cy: round(-(LOCKUP_EM.dotLift * EM + r)), r }
+
+  // Glyph descent: `s` and `d` overshoot the baseline by 12 font units.
+  const bottom = Math.max(caretBottom, 12 * glyphScale)
+  return {
+    box: { x: 0, y: round(caretTop), width: round(dot.cx + r), height: round(bottom - caretTop) },
+    caret: {
+      d: CARET_PATH.regular,
+      transform: `matrix(${round(caretScale)} 0 0 ${round(caretScale)} ${round(-CARET_INK.left * caretScale)} ${round(caretTranslateY)})`,
+    },
+    glyphs,
+    dot,
+  }
+}
+
+interface SvgOptions {
+  /** Colours for light surfaces, or the only colours when `dark` is absent. */
+  colors: BrandColors
+  /** When set, a prefers-color-scheme rule switches to these colours. For favicons and README images. */
+  dark?: BrandColors
+}
+
+function schemeStyle(dark: BrandColors | undefined): string {
+  return dark ? `<style>@media (prefers-color-scheme:dark){.ink{fill:${dark.ink}}.dot{fill:${dark.dot}}}</style>` : ''
+}
+
+/** The standalone mark as an SVG file: caret plus dot, optionally on a rounded tile. */
+export function markSvg(options: SvgOptions & { cut?: MarkCut, tile?: string }): string {
+  const { colors, dark, cut = 'regular', tile } = options
+  const dot = MARK_DOT[cut]
+  if (tile) {
+    // A 512 tile with the mark's ink centred: x 18 to 90, y 18 to 82, centre (54, 50).
+    // The small cut fills more of the tile, because a 16px tile has no pixels to spare.
+    const scale = cut === 'small' ? 5.4 : 4.4
+    const tx = round(256 - 54 * scale)
+    const ty = round(256 - 50 * scale)
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">${schemeStyle(dark)}<rect width="512" height="512" rx="64" fill="${tile}"/>`
+      + `<g transform="matrix(${scale} 0 0 ${scale} ${tx} ${ty})"><path class="ink" d="${CARET_PATH[cut]}" fill="${colors.ink}"/><circle class="dot" cx="${dot.cx}" cy="${dot.cy}" r="${dot.r}" fill="${colors.dot}"/></g></svg>\n`
+  }
+  const { x, y, width, height } = MARK_VIEWBOX
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${x} ${y} ${width} ${height}" width="160" height="160">${schemeStyle(dark)}`
+    + `<path class="ink" d="${CARET_PATH[cut]}" fill="${colors.ink}"/><circle class="dot" cx="${dot.cx}" cy="${dot.cy}" r="${dot.r}" fill="${colors.dot}"/></svg>\n`
+}
+
+/** The lockup as an SVG file: caret, outlined wordmark, trailing dot. `height` sets the intrinsic pixel height. */
+export function lockupSvg(options: SvgOptions & { height?: number }): string {
+  const { colors, dark, height } = options
+  const { box, caret, glyphs, dot } = lockupGeometry()
+  const size = height ? ` width="${round((height * box.width) / box.height)}" height="${height}"` : ''
+  const paths = [caret, ...glyphs].map(part => `<path transform="${part.transform}" d="${part.d}"/>`).join('')
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${box.x} ${box.y} ${box.width} ${box.height}"${size}>${schemeStyle(dark)}`
+    + `<g class="ink" fill="${colors.ink}">${paths}</g><circle class="dot" cx="${dot.cx}" cy="${dot.cy}" r="${dot.r}" fill="${colors.dot}"/></svg>\n`
+}
+
+/** An SVG string as an `<img src>` value. */
+export function svgDataUri(svg: string): string {
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg.trim())}`
+}

From 72443b72e7c698bbc1187738c1418678b6e4d0a5 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:00:53 +1100
Subject: [PATCH 2/4] feat(og): put the caret lockup and brand textures on OG
 cards

Every card now carries the lockup, and its trailing dot is the card's
one rose element, so the rose top bar, quote rails and avatar ring turn
stone. Splash gets a Braille names field that radiates from the lockup
dot. Skill cards get a File minimap seeded per Skill. /make-skill gets
its own card instead of the default. The OG renderer has no braille
glyphs, so the textures are SVG dots.
---
 app/components/OgBrand.vue                   |  27 +-
 app/components/OgImage/Collection.takumi.vue |  13 +-
 app/components/OgImage/Curator.takumi.vue    |  15 +-
 app/components/OgImage/MakeSkill.takumi.vue  |  49 ++++
 app/components/OgImage/Page.takumi.vue       |  11 -
 app/components/OgImage/Skill.takumi.vue      |  28 +-
 app/components/OgImage/Splash.takumi.vue     |  55 ++--
 app/utils/og-texture.ts                      | 284 +++++++++++++++++++
 layers/marketing/app/pages/make-skill.vue    |   4 +
 test/unit/og-image-skill.test.ts             |   2 +-
 test/unit/og-texture.test.ts                 |  47 +++
 11 files changed, 451 insertions(+), 84 deletions(-)
 create mode 100644 app/components/OgImage/MakeSkill.takumi.vue
 create mode 100644 app/utils/og-texture.ts
 create mode 100644 test/unit/og-texture.test.ts

diff --git a/app/components/OgBrand.vue b/app/components/OgBrand.vue
index 9fd4522a..9ddd9f7b 100644
--- a/app/components/OgBrand.vue
+++ b/app/components/OgBrand.vue
@@ -1,23 +1,20 @@
 <script setup lang="ts">
+import { BRAND_DARK, lockupGeometry, lockupSvg, svgDataUri } from '#shared/brand-mark'
+
+// `size` is the wordmark's font size in px. OG cards are dark, so the lockup takes the dark colours.
 const { size = 32 } = defineProps<{
   size?: number
 }>()
+
+const { box } = lockupGeometry()
+const src = svgDataUri(lockupSvg({ colors: BRAND_DARK }))
 </script>
 
 <template>
-  <div class="flex items-center" :style="{ gap: `${size * 0.12}px` }">
-    <svg
-      :width="size"
-      :height="size"
-      viewBox="0 0 160 160"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M80 34 L135 104 L121 104 L80 52 L39 104 L25 104 Z" fill="#fb7185" />
-    </svg>
-    <span
-      class="font-mono font-semibold tracking-tight"
-      :style="{ fontSize: `${size}px`, lineHeight: 1 }"
-    >skilld</span>
-  </div>
+  <img
+    :src="src"
+    alt="skilld"
+    :width="Math.round(box.width * size) / 100"
+    :height="Math.round(box.height * size) / 100"
+  >
 </template>
diff --git a/app/components/OgImage/Collection.takumi.vue b/app/components/OgImage/Collection.takumi.vue
index 66393929..47c9cd7c 100644
--- a/app/components/OgImage/Collection.takumi.vue
+++ b/app/components/OgImage/Collection.takumi.vue
@@ -35,17 +35,6 @@ const truncatedReason = computed(() => {
 
 <template>
   <OgLayout>
-    <!-- Rose accent bar -->
-    <div
-      :style="{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        background: 'oklch(0.555 0.225 17.32)',
-      }"
-    />
     <div class="px-15 py-14 flex flex-col justify-center gap-8 h-full">
       <OgBrand :size="36" />
 
@@ -101,7 +90,7 @@ const truncatedReason = computed(() => {
         v-if="truncatedReason"
         class="flex flex-col gap-2"
         :style="{
-          borderLeft: '3px solid oklch(0.555 0.225 17.32)',
+          borderLeft: '3px solid oklch(0.36 0.012 60)',
           paddingLeft: '16px',
         }"
       >
diff --git a/app/components/OgImage/Curator.takumi.vue b/app/components/OgImage/Curator.takumi.vue
index 9cef5f2f..b211b6a1 100644
--- a/app/components/OgImage/Curator.takumi.vue
+++ b/app/components/OgImage/Curator.takumi.vue
@@ -34,28 +34,17 @@ const stats = computed(() => {
 
 <template>
   <OgLayout>
-    <!-- Rose accent bar -->
-    <div
-      :style="{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        background: 'oklch(0.555 0.225 17.32)',
-      }"
-    />
     <div class="px-15 py-14 flex flex-col justify-center gap-8 h-full">
       <OgBrand :size="36" />
 
       <div class="flex items-center gap-6">
-        <!-- Avatar with rose ring -->
+        <!-- Avatar with a stone ring: the lockup dot is the card's one rose element -->
         <span
           class="flex items-center justify-center rounded-full overflow-hidden shrink-0"
           :style="{
             width: '100px',
             height: '100px',
-            border: '3px solid oklch(0.555 0.225 17.32)',
+            border: '3px solid oklch(0.36 0.012 60)',
             background: 'oklch(0.22 0.012 60)',
           }"
         >
diff --git a/app/components/OgImage/MakeSkill.takumi.vue b/app/components/OgImage/MakeSkill.takumi.vue
new file mode 100644
index 00000000..3c7470a3
--- /dev/null
+++ b/app/components/OgImage/MakeSkill.takumi.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { BRAND_DARK, svgDataUri } from '#shared/brand-mark'
+import { ogText } from '../../utils/og-props'
+import { fileMinimap, textureSeed, textureSvg } from '../../utils/og-texture'
+
+// Declared as the wire types the OG image URL can deliver.
+const props = defineProps<{
+  title?: string | number | null
+  description?: string | number | null
+}>()
+
+const safeTitle = computed(() => ogText(props.title))
+const safeDescription = computed(() => ogText(props.description))
+
+// One SKILL.md, drawn large from its frontmatter down: the file the visitor is about to write.
+const texture = svgDataUri(textureSvg(
+  fileMinimap({
+    region: { x: 880, y: 72, width: 200, height: 456 },
+    seed: textureSeed('make-skill'),
+    pitch: 9,
+    fromStart: true,
+  }),
+  { width: 1200, height: 600, ink: BRAND_DARK.ink, radius: 2.4 },
+))
+</script>
+
+<template>
+  <OgLayout>
+    <img :src="texture" alt="" width="1200" height="600" :style="{ position: 'absolute', top: 0, left: 0 }">
+    <div class="px-15 py-14 flex flex-col justify-center gap-10 h-full" :style="{ width: '820px' }">
+      <OgBrand :size="36" />
+
+      <div
+        class="text-6xl tracking-tighter font-mono leading-none"
+        :style="{ lineClamp: 2, textOverflow: 'ellipsis' }"
+      >
+        {{ safeTitle }}
+      </div>
+
+      <div
+        v-if="safeDescription"
+        class="text-3xl leading-snug"
+        :style="{ color: 'oklch(0.62 0.01 60)', lineClamp: 3, textOverflow: 'ellipsis' }"
+      >
+        {{ safeDescription }}
+      </div>
+    </div>
+  </OgLayout>
+</template>
diff --git a/app/components/OgImage/Page.takumi.vue b/app/components/OgImage/Page.takumi.vue
index b22186af..1b8c0d7a 100644
--- a/app/components/OgImage/Page.takumi.vue
+++ b/app/components/OgImage/Page.takumi.vue
@@ -14,17 +14,6 @@ const safeDescription = computed(() => ogText(props.description))
 
 <template>
   <OgLayout>
-    <!-- Subtle rose accent bar at top -->
-    <div
-      :style="{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        background: 'oklch(0.555 0.225 17.32)',
-      }"
-    />
     <div class="px-15 py-14 flex flex-col justify-center gap-10 h-full">
       <OgBrand :size="36" />
 
diff --git a/app/components/OgImage/Skill.takumi.vue b/app/components/OgImage/Skill.takumi.vue
index ffbaa46f..7b2a866e 100644
--- a/app/components/OgImage/Skill.takumi.vue
+++ b/app/components/OgImage/Skill.takumi.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { BRAND_DARK, svgDataUri } from '#shared/brand-mark'
 import { ogCount, ogInitials, ogText } from '../../utils/og-props'
+import { fileMinimap, textureSeed, textureSvg } from '../../utils/og-texture'
 
 // Declared as the wire types the OG image URL can deliver, not as the types the
 // template wants. An owner such as `24601` arrives as a number.
@@ -23,21 +25,22 @@ const safeRepo = computed(() => ogText(props.repo) || 'skills')
 const safeReason = computed(() => ogText(props.reason))
 const safeReasonHandle = computed(() => ogText(props.reasonHandle))
 const safeCuratorCount = computed(() => ogCount(props.curatorCount))
+
+// The File minimap texture. Each Skill seeds its own files from its owner,
+// repository and name, so a card keeps its texture between renders.
+const texture = computed(() => svgDataUri(textureSvg(
+  fileMinimap({
+    region: { x: 780, y: 0, width: 420, height: 600 },
+    seed: textureSeed(`${safeOwner.value}/${safeRepo.value}/${safeName.value}`),
+    fade: 300,
+  }),
+  { width: 1200, height: 600, ink: BRAND_DARK.ink, radius: 1.6 },
+)))
 </script>
 
 <template>
   <OgLayout>
-    <!-- Rose accent bar -->
-    <div
-      :style="{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        background: 'oklch(0.555 0.225 17.32)',
-      }"
-    />
+    <img :src="texture" alt="" width="1200" height="600" :style="{ position: 'absolute', top: 0, left: 0 }">
     <div class="px-15 py-14 flex flex-col justify-center gap-10 h-full">
       <OgBrand :size="36" />
 
@@ -79,8 +82,9 @@ const safeCuratorCount = computed(() => ogCount(props.curatorCount))
         v-if="safeReason"
         class="flex flex-col gap-2"
         :style="{
-          borderLeft: '3px solid oklch(0.555 0.225 17.32)',
+          borderLeft: '3px solid oklch(0.36 0.012 60)',
           paddingLeft: '16px',
+          maxWidth: '860px',
         }"
       >
         <span
diff --git a/app/components/OgImage/Splash.takumi.vue b/app/components/OgImage/Splash.takumi.vue
index c8cf161b..f0c8d1ff 100644
--- a/app/components/OgImage/Splash.takumi.vue
+++ b/app/components/OgImage/Splash.takumi.vue
@@ -1,30 +1,45 @@
 <script setup lang="ts">
+import { BRAND_DARK, lockupGeometry, svgDataUri } from '#shared/brand-mark'
+import { brailleNamesField, textureSvg } from '../../utils/og-texture'
+
 const { description } = useSiteConfig()
+
+// The lockup's trailing dot is the field's focal point, so the braille names
+// resolve into the wordmark and the card keeps one rose element.
+const WIDTH = 1200
+const HEIGHT = 600
+const SIZE = 100
+const LEFT = 88
+const TOP = 192
+const { box, dot } = lockupGeometry()
+const scale = SIZE / 100
+const focal = { x: LEFT + (dot.cx - box.x) * scale, y: TOP + (dot.cy - box.y) * scale }
+const textTop = TOP + box.height * scale + 40
+const texture = svgDataUri(textureSvg(
+  brailleNamesField({
+    width: WIDTH,
+    height: HEIGHT,
+    focal,
+    clear: [
+      { x: LEFT - 28, y: TOP - 28, width: box.width * scale + 56, height: box.height * scale + 56 },
+      { x: LEFT - 28, y: textTop - 20, width: 680, height: 190 },
+    ],
+  }),
+  { width: WIDTH, height: HEIGHT, ink: BRAND_DARK.ink, radius: 1.7 },
+))
 </script>
 
 <template>
   <OgLayout>
-    <!-- Subtle rose accent bar at top -->
+    <img :src="texture" alt="" :width="WIDTH" :height="HEIGHT" :style="{ position: 'absolute', top: 0, left: 0 }">
+    <div :style="{ position: 'absolute', left: `${LEFT}px`, top: `${TOP}px` }">
+      <OgBrand :size="SIZE" />
+    </div>
     <div
-      :style="{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '4px',
-        background: 'oklch(0.555 0.225 17.32)',
-      }"
-    />
-    <div class="flex w-full h-full items-center justify-center px-20">
-      <div class="flex flex-col gap-8 items-center text-center">
-        <OgBrand :size="64" />
-        <div
-          class="text-4xl leading-snug"
-          :style="{ color: 'oklch(0.62 0.01 60)' }"
-        >
-          {{ description }}
-        </div>
-      </div>
+      class="text-3xl leading-snug"
+      :style="{ position: 'absolute', left: `${LEFT}px`, top: `${textTop}px`, width: '620px', color: 'oklch(0.72 0.01 60)' }"
+    >
+      {{ description }}
     </div>
   </OgLayout>
 </template>
diff --git a/app/utils/og-texture.ts b/app/utils/og-texture.ts
new file mode 100644
index 00000000..cf94ce5a
--- /dev/null
+++ b/app/utils/og-texture.ts
@@ -0,0 +1,284 @@
+// Static brand textures for OG cards. The site draws the live versions on a
+// canvas; an OG card is one still frame, drawn server side as SVG dots,
+// because the OG renderer has only Plus Jakarta Sans and IBM Plex Mono and
+// neither has braille glyphs. Every texture is stone: on a card, the lockup's
+// trailing dot is the one rose element. DESIGN.md "Texture system" has the jobs.
+
+export interface TextureDot {
+  x: number
+  y: number
+  /** 0 to 1, multiplied into the ink colour. */
+  alpha: number
+}
+
+export interface TextureRect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** A stable 0 to 1 value for three integers. The live canvases use the same hash. */
+function hash(x: number, y: number, s: number): number {
+  let n = (Math.imul(x | 0, 374761393) + Math.imul(y | 0, 668265263) + Math.imul(s | 0, 1442695041)) | 0
+  n = Math.imul(n ^ (n >>> 13), 1274126177)
+  return ((n ^ (n >>> 16)) >>> 0) / 4294967295
+}
+
+/** A stable seed for a string, such as a Skill's owner, repository and name. */
+export function textureSeed(text: string): number {
+  let h = 2166136261
+  for (let i = 0; i < text.length; i++)
+    h = Math.imul(h ^ text.charCodeAt(i), 16777619)
+  return (h >>> 0) % 1_000_000_007
+}
+
+/** Whether a box touches any of the rects. */
+function overlaps(rects: readonly TextureRect[], box: TextureRect): boolean {
+  return rects.some(r => box.x <= r.x + r.width && box.x + box.width >= r.x && box.y <= r.y + r.height && box.y + box.height >= r.y)
+}
+
+// Six-dot literary braille. Bit k is dot k + 1, the order Unicode uses from U+2800.
+const BRAILLE: Record<string, number> = {}
+for (const token of 'a1 b12 c14 d145 e15 f124 g1245 h125 i24 j245 k13 l123 m134 n1345 o135 p1234 q12345 r1235 s234 t2345 u136 v1236 w2456 x1346 y13456 z1356 -36 /34'.split(' ')) {
+  let mask = 0
+  for (const dot of token.slice(1))
+    mask |= 1 << (Number(dot) - 1)
+  BRAILLE[token[0]!] = mask
+}
+for (const [index, digit] of [...'1234567890'].entries())
+  BRAILLE[digit] = BRAILLE['abcdefghij'[index]!]!
+
+/** Real registry Skills, so the noise is made of the thing itself. */
+const FIELD_NAMES = [
+  'anthropics/skills/pdf',
+  'mattpocock/skills/tdd',
+  'obra/superpowers/brainstorming',
+  'vercel-labs/agent-skills/react-best-practices',
+  'anthropics/skills/frontend-design',
+  'obra/superpowers/systematic-debugging',
+  'anthropics/skills/mcp-builder',
+  'anthropics/skills/skill-creator',
+  'vercel-labs/agent-skills/web-design-guidelines',
+  'anthropics/skills/webapp-testing',
+  'obra/superpowers/writing-plans',
+  'addyosmani/web-quality-skills/performance',
+  'antfu/skills/vitest',
+  'pbakaus/impeccable/impeccable',
+  'kepano/obsidian-skills/json-canvas',
+  'anthropics/skills/canvas-design',
+] as const
+
+/**
+ * Braille names: rows of real Skill names written in braille, dense and
+ * complete near the focal point, thinning to sparse dots far from it. Three
+ * ripple rings cross the field, frozen where the live field rests. On a card
+ * the focal point is the lockup's dot, so the lockup is the name the noise
+ * resolves into.
+ */
+export function brailleNamesField(input: {
+  width: number
+  height: number
+  focal: { x: number, y: number }
+  /** Areas that stay empty, such as the text block. */
+  clear?: readonly TextureRect[]
+}): TextureDot[] {
+  const { width, height, focal, clear = [] } = input
+  const cellWidth = 12
+  const lineHeight = 24
+  const dotStep = 6
+  const cols = Math.floor(width / cellWidth)
+  const rows = Math.floor(height / lineHeight)
+  const ox = (width - cols * cellWidth) / 2
+  const oy = (height - rows * lineHeight) / 2
+  const reach = Math.max(width, height) * 0.26
+  // The still frame: rings at about 170, 245 and 315px from the focal point.
+  const ring = (d: number): number => {
+    let b = 0
+    for (const age of [2.2, 1.7, 1.2]) {
+      const g = (d - age * 144) / 29
+      b += Math.exp(-g * g) * Math.exp(-age * 0.45)
+    }
+    return b
+  }
+  const alphas = [0.2, 0.32, 0.46, 0.62]
+
+  const dots: TextureDot[] = []
+  for (let y = 0; y < rows; y++) {
+    let text = ''
+    let last = -1
+    for (let k = 0; text.length < cols + 60; k++) {
+      let pick = Math.floor(hash(y, k, 5) * FIELD_NAMES.length)
+      if (pick === last)
+        pick = (pick + 1) % FIELD_NAMES.length
+      last = pick
+      text += `${k > 0 ? '   ' : ''}${FIELD_NAMES[pick]}`
+    }
+    text = text.slice(Math.floor(hash(y, 7, 3) * 28))
+    for (let x = 0; x < cols; x++) {
+      const full = BRAILLE[text[x] ?? ' '] ?? 0
+      if (!full)
+        continue
+      const cx = ox + x * cellWidth
+      const cy = oy + y * lineHeight + lineHeight / 2
+      // A whole cell stays out of a clear area, so no letter is cut in half at its edge.
+      if (overlaps(clear, { x: cx, y: cy - lineHeight / 2, width: cellWidth, height: lineHeight }))
+        continue
+      const d = Math.hypot(cx + cellWidth / 2 - focal.x, cy - focal.y)
+      const base = Math.exp(-d / reach)
+      const lift = ring(d)
+      const strength = base * 0.6 + lift
+      // Near the focal point a cell keeps its whole letter; farther out each dot survives by chance.
+      const keep = strength > 0.62 ? 1 : base * 0.5 + lift * 0.9 + 0.03
+      const alpha = alphas[Math.min(3, Math.floor(strength * 3.2))]!
+      for (let i = 0; i < 6; i++) {
+        if (!((full >> i) & 1) || hash(x * 2 + (i >= 3 ? 1 : 0), y * 3 + (i % 3), 4) >= keep)
+          continue
+        dots.push({ x: cx + cellWidth * (i >= 3 ? 0.75 : 0.25), y: cy + ((i % 3) - 1) * dotStep, alpha })
+      }
+    }
+  }
+  return dots
+}
+
+/**
+ * File minimap: columns of SKILL.md files drawn as rows of dots. Each file has
+ * frontmatter, a title, an intro, then sections of prose, lists or code. One
+ * dot is one character cell. The same seed always draws the same files.
+ */
+export function fileMinimap(input: {
+  region: TextureRect
+  seed: number
+  /** Distance in px over which the left edge fades in. */
+  fade?: number
+  /** Cell pitch in px. Rows sit at twice the pitch. */
+  pitch?: number
+  /** Start each column at the top of a file, instead of partway down the stream. */
+  fromStart?: boolean
+}): TextureDot[] {
+  const { region, seed, fade = 0, pitch = 5.6, fromStart = false } = input
+  const rowPitch = pitch * 2
+  const lineCells = 20
+  const columnCells = 25
+  const levels = [0.12, 0.2, 0.3, 0.42, 0.56]
+  const rowCount = Math.ceil(region.height / rowPitch)
+
+  const dots: TextureDot[] = []
+  for (let c = 0; c * columnCells * pitch < region.width; c++) {
+    const lines: Array<number[] | null> = []
+    const offset = fromStart ? 0 : Math.floor(hash(seed, c, 41) * 30)
+    for (let f = 0; lines.length < offset + rowCount; f++)
+      skillFileLines(Math.floor(hash(seed + c, f, 43) * 1e9), lineCells, lines)
+    const x0 = region.x + c * columnCells * pitch
+    for (let r = 0; r < rowCount; r++) {
+      const runs = lines[offset + r]
+      if (!runs)
+        continue
+      const y = region.y + (r + 0.5) * rowPitch
+      for (let i = 0; i < runs.length; i += 3) {
+        for (let k = 0; k < runs[i + 1]!; k++) {
+          const x = x0 + (runs[i]! + k + 0.5) * pitch
+          if (x > region.x + region.width)
+            continue
+          const edge = fade > 0 ? Math.min(1, (x - region.x) / fade) : 1
+          if (edge > 0)
+            dots.push({ x, y, alpha: levels[runs[i + 2]!]! * edge * edge })
+        }
+      }
+    }
+  }
+  return dots
+}
+
+/** Appends one SKILL.md's lines. A line is a flat list of runs: start cell, length, level 0 to 4. A blank line is null. */
+function skillFileLines(seed: number, width: number, out: Array<number[] | null>): void {
+  let n = 0
+  const rnd = (): number => hash(seed, n++, 23)
+  const ri = (k: number): number => Math.floor(rnd() * k)
+  const words = (from: number, to: number, level: number, runs: number[] = [], minLen = 2, spread = 6): number[] => {
+    const wordSeed = ri(1e9)
+    let x = from
+    for (let i = 0; i < 40; i++) {
+      const len = minLen + Math.floor(hash(wordSeed, i, 11) * spread)
+      if (x + len > to)
+        break
+      runs.push(x, len, level)
+      x += len + 1
+    }
+    return runs
+  }
+  const line = (runs: number[]): void => {
+    out.push(runs)
+  }
+  const gap = (): void => {
+    out.push(null)
+  }
+  const para = (count: number): void => {
+    for (let j = 0; j < count; j++)
+      line(words(0, j === count - 1 ? 6 + ri(11) : width - ri(3), 1))
+  }
+  // Frontmatter fences, name, description.
+  line([0, 3, 0])
+  line(words(6, 9 + ri(7), 1, [0, 4, 2]))
+  line(words(9, width, 1, [0, 7, 2]))
+  if (rnd() < 0.6)
+    line(words(2, width - ri(5), 1))
+  line([0, 3, 0])
+  gap()
+  // Title, intro.
+  line(words(2, 8 + ri(10), 4, [0, 1, 4]))
+  gap()
+  para(2 + ri(2))
+  const sections = 2 + ri(3)
+  for (let i = 0; i < sections; i++) {
+    gap()
+    line(words(3, 8 + ri(9), 3, [0, 2, 3]))
+    gap()
+    const kind = rnd()
+    if (kind < 0.36) {
+      para(2 + ri(3))
+    }
+    else if (kind < 0.72) {
+      const items = 2 + ri(3)
+      for (let j = 0; j < items; j++) {
+        line(words(2, width - ri(7), 1, [0, 1, 3]))
+        if (rnd() < 0.3)
+          line(words(2, 7 + ri(10), 1))
+      }
+    }
+    else {
+      line([0, 3, 0])
+      const count = 2 + ri(4)
+      for (let j = 0; j < count; j++)
+        line(words(ri(3) * 2, width - ri(6), 0, [], 1, 5))
+      line([0, 3, 0])
+    }
+  }
+  gap()
+  gap()
+  gap()
+}
+
+/**
+ * Dots as one SVG image. Each alpha step is one path of zero-length round-capped
+ * segments, which keeps a field of thousands of dots to a few kilobytes.
+ */
+export function textureSvg(dots: readonly TextureDot[], options: { width: number, height: number, ink: string, radius: number }): string {
+  const { width, height, ink, radius } = options
+  const groups = new Map<number, string[]>()
+  for (const dot of dots) {
+    const step = Math.round(dot.alpha * 40) / 40
+    if (step <= 0)
+      continue
+    let group = groups.get(step)
+    if (!group) {
+      group = []
+      groups.set(step, group)
+    }
+    group.push(`M${Math.round(dot.x * 10) / 10} ${Math.round(dot.y * 10) / 10}h0`)
+  }
+  const paths = [...groups].map(([alpha, segments]) =>
+    `<path d="${segments.join('')}" stroke-opacity="${alpha}"/>`).join('')
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`
+    + `<g fill="none" stroke="${ink}" stroke-width="${radius * 2}" stroke-linecap="round">${paths}</g></svg>`
+}
diff --git a/layers/marketing/app/pages/make-skill.vue b/layers/marketing/app/pages/make-skill.vue
index 5ebf1bc3..c5e3a03c 100644
--- a/layers/marketing/app/pages/make-skill.vue
+++ b/layers/marketing/app/pages/make-skill.vue
@@ -64,6 +64,10 @@ useSeoMeta({
   description: 'Choose what your Skill is for. Get a guide to writing it and shipping it from your repository.',
   robots: 'noindex,follow',
 })
+defineOgImage('MakeSkill.takumi', {
+  title: 'Make a skill',
+  description: 'Write a Skill for your package or project, and ship it from your repository.',
+}, { alt: 'Make a skill on skilld' })
 useHead({ link: [{ rel: 'canonical', href: 'https://skilld.dev/make-skill' }] })
 </script>
 
diff --git a/test/unit/og-image-skill.test.ts b/test/unit/og-image-skill.test.ts
index 95be67df..ee6644f1 100644
--- a/test/unit/og-image-skill.test.ts
+++ b/test/unit/og-image-skill.test.ts
@@ -22,7 +22,7 @@ describe('skill OG image', () => {
 
     expect(component.text()).toContain('Vue Best Practices')
     expect(component.text()).not.toContain('skilld add')
-    expect(component.get('img').attributes()).toMatchObject({
+    expect(component.get('img[alt="hyf0"]').attributes()).toMatchObject({
       src: 'https://github.com/hyf0.png?size=128',
       alt: 'hyf0',
     })
diff --git a/test/unit/og-texture.test.ts b/test/unit/og-texture.test.ts
new file mode 100644
index 00000000..357409e9
--- /dev/null
+++ b/test/unit/og-texture.test.ts
@@ -0,0 +1,47 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest'
+import { brailleNamesField, fileMinimap, textureSeed } from '../../app/utils/og-texture'
+
+function inRect(rect: { x: number, y: number, width: number, height: number }) {
+  return (dot: { x: number, y: number }) => dot.x >= rect.x && dot.x <= rect.x + rect.width && dot.y >= rect.y && dot.y <= rect.y + rect.height
+}
+
+describe('brailleNamesField', () => {
+  it('keeps the text block empty and every dot on the card', () => {
+    const text = { x: 60, y: 160, width: 640, height: 260 }
+    const dots = brailleNamesField({ width: 1200, height: 600, focal: { x: 590, y: 260 }, clear: [text] })
+
+    expect(dots.length).toBeGreaterThan(500)
+    expect(dots.filter(inRect(text))).toEqual([])
+    expect(dots.every(inRect({ x: 0, y: 0, width: 1200, height: 600 }))).toBe(true)
+  })
+
+  it('draws more dots near the focal point than far from it', () => {
+    const focal = { x: 900, y: 300 }
+    const dots = brailleNamesField({ width: 1200, height: 600, focal })
+    const near = dots.filter(inRect({ x: 800, y: 200, width: 200, height: 200 })).length
+    const far = dots.filter(inRect({ x: 0, y: 200, width: 200, height: 200 })).length
+
+    expect(near).toBeGreaterThan(far * 2)
+  })
+})
+
+describe('fileMinimap', () => {
+  const region = { x: 780, y: 0, width: 420, height: 600 }
+
+  it('draws the same files for the same Skill and different files for another', () => {
+    const tdd = fileMinimap({ region, seed: textureSeed('mattpocock/skills/tdd') })
+
+    expect(fileMinimap({ region, seed: textureSeed('mattpocock/skills/tdd') })).toEqual(tdd)
+    expect(fileMinimap({ region, seed: textureSeed('mattpocock/skills/grill-me') })).not.toEqual(tdd)
+  })
+
+  it('stays inside its region and fades in from the left edge', () => {
+    const dots = fileMinimap({ region, seed: textureSeed('antfu/skills/vite'), fade: 300 })
+    const edge = dots.filter(dot => dot.x < region.x + 30)
+    const inner = dots.filter(dot => dot.x > region.x + 300)
+
+    expect(dots.every(inRect(region))).toBe(true)
+    expect(Math.max(...edge.map(dot => dot.alpha))).toBeLessThan(Math.min(...inner.map(dot => dot.alpha)))
+  })
+})

From 6cde833c8fcdb859acaa20d8a57cdd62c8ccd8cb Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:00:53 +1100
Subject: [PATCH 3/4] docs(brand): document the brand system and copy decisions

DESIGN.md replaces the noise field spec with one brand system: the
thesis, the mark, three textures with one job each, and the three
motifs. COPY.md and GLOSSARY.md record the approved pitch lines, claims,
the promo label, and "run once off" as the marketing phrase for run.
The noise field pointer test goes with the section it guarded.
---
 COPY.md                              |  10 ++
 DESIGN.md                            | 157 ++++++++++++++-------------
 GLOSSARY.md                          |   6 +-
 test/unit/docs-fold-contract.test.ts |   8 --
 4 files changed, 94 insertions(+), 87 deletions(-)

diff --git a/COPY.md b/COPY.md
index c37bf902..63684933 100644
--- a/COPY.md
+++ b/COPY.md
@@ -22,6 +22,14 @@ These exact strings. Do not paraphrase them per page.
 | Tagline | Curated agent skills by humans. | index OG image alt |
 | Site description | Curated agent skills by humans, written by real maintainers in their own GitHub repos | `nuxt.config.ts` site description (feeds every page's meta description) |
 | Elevator pitch | Skilld is a curated registry of agent skills written by real people in the GitHub repos you already depend on. One install command, every agent; watch your stack and get a digest when it changes. | guidance only: no page ships it yet (use it where two sentences fit) |
+| Promo label | Teach your agent skilld | guidance only: the label beside `npx skilld install skilld --global` |
+| Pitch: run | No more skill bloat | guidance only: the run chip, with run once off, fork, or install |
+| Pitch: trending | Stay hyped | guidance only: weekly and monthly social trending, with the braille spark |
+| Pitch: changes | Keep updated | guidance only: tracking Skill changes, with the change grid |
+| Pitch: platform | Built to be built on | guidance only: the CLI, API, SDK and MCP server |
+| Claim: open source | open-source CLI | guidance only: the CLI. Never call skilld.dev or its site open source |
+| Claim: privacy | analytics without cookies or IPs | guidance only: analytics and privacy copy. Never the bare "privacy-friendly" |
+| Claim: comparison | skills.sh alternative | guidance only: always a link to `/vs/skills-sh` |
 
 ### The product in four lengths
 
@@ -135,6 +143,8 @@ near-miss is also banned.
 | named, naming, named by (in user-facing copy) | talked about, mentioned | Our internal words for the social-attribution route; they read as jargon. "3 devs talked about it", never "3 people named it". The technical sense survives in identifiers, ADRs and code comments, where the precision is the point |
 | people (for our audience) | dev, devs | They are developers, and "people" is a vaguer word doing a smaller job. "Developers" in full is fine where the short form reads clipped |
 | first person in a CTA | the content, then the destination | "We send this every Monday" spends the words on us. "Trending skills to your inbox every Monday" gives the reader both things that matter |
+| privacy-friendly (bare) | analytics without cookies or IPs | A bare privacy claim cannot be checked. The mechanism can |
+| open source (for the site or skilld.dev) | open-source CLI | A reader must be able to clone what the claim names, and the claim names the CLI |
 
 **Exception, the humans-versus-generated claim.** When the contrast is authorship by a human
 against machine generation, "human" and "person" are the right words and "dev" weakens the
diff --git a/DESIGN.md b/DESIGN.md
index c8703885..c98327aa 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -64,7 +64,7 @@ components:
 
 > Generated by `nuxt-frontend-design`. Source of truth for visual tokens. Compatible with `@google/design.md`.
 >
-> **Front matter** holds the machine-readable tokens. **Prose below** holds the visual system: principles, components, motion, the noise field, and the Avoid list. Voice and copy rules live in [`COPY.md`](COPY.md). Token refs use `{path.to.token}`.
+> **Front matter** holds the machine-readable tokens. **Prose below** holds the visual system: principles, components, motion, the brand system, and the Avoid list. Voice and copy rules live in [`COPY.md`](COPY.md). Token refs use `{path.to.token}`.
 
 ## Design Principles
 
@@ -78,7 +78,7 @@ Practically:
 - One accent color used sparingly (10% of surface area, max)
 - UI chrome in monospace at small sizes; content in the sans-serif
 - Borders, not shadows, define boundaries
-- No glow, no gradient, no blur, no decorative flourish in UI chrome (the brand noise field is the sole exception; see "Brand Noise Field" section)
+- No glow, no gradient, no blur, no decorative flourish in UI chrome. The textures in "Brand System" are the only decoration, and each has one job
 - Compact components: tight padding, defined shapes, minimal radius
 - Whitespace is intentional structure, not generous filler
 
@@ -122,7 +122,7 @@ Every surface has warm undertone. The accent is coral/rose. The voice is editori
 | Extended | none | semantic colors (success/warning/error) added when first needed |
 
 - **Neutral tinting**: every neutral is OKLCH at hue 60, chroma 0.005–0.014. Pure 0-chroma grays are banned.
-- **Color budget**: 90% warm stone, 10% rose. The accent is rare so it stays meaningful. Solid rose appears on primary CTAs, active nav, and featured-content badges only.
+- **Color budget**: 90% warm stone, 10% rose. The accent is rare so it stays meaningful. Solid rose appears on primary CTAs, active nav, featured-content badges, and the one rose dot of the mark, a texture or a motif.
 - **Primary darkening**: `--color-rose-500` is overridden to `oklch(0.555 0.225 17.32)` so white-on-primary buttons clear WCAG AA.
 
 ### Contrast & Accessibility
@@ -194,7 +194,7 @@ Use `UiTooltip` (not `UTooltip`) for any tooltip that needs more than a plain st
 - **Container width**: `max-w-5xl` with `px-4 sm:px-6`. Wider feels institutional in the wrong way.
 - **Transition speed**: 200ms for every micro-interaction (hover, focus, expand/collapse).
 - **Animation style**: fade + `translateY(4px)` rise, 60ms stagger between siblings via `motion-v`. Total under 400ms.
-- **Reduced motion**: `prefers-reduced-motion: reduce` collapses to opacity-only crossfades; the noise field freezes at ambient shimmer state.
+- **Reduced motion**: `prefers-reduced-motion: reduce` collapses to opacity-only crossfades. Each brand texture draws one still frame, and the lockup dot does not blink.
 
 ## Responsive Strategy
 
@@ -212,11 +212,14 @@ Use `UiTooltip` (not `UTooltip`) for any tooltip that needs more than a plain st
 
 > Things that break the aesthetic. Check this list before adding new patterns.
 
-- Glow, drop-shadows on cards, backdrop-blur on surfaces (the brand noise field has a controlled additive bloom; that is the only exception).
+- Glow, drop-shadows on cards, backdrop-blur on surfaces. The brand textures are flat dots and need none.
 - Cold accents (blue, cyan, purple) as primary or feature colors.
 - Pure black (`#000`) or pure 0-chroma gray anywhere.
 - Dense data tables on first-level views; density grows with depth.
-- Emoji or playful illustrations.
+- Emoji or playful illustrations. The trending flame exception is retired; the braille spark marks trending.
+- A second rose element in a motif or on an OG card. One rose dot is one pick.
+- Braille glyphs, canvas, or any font other than Plus Jakarta Sans and IBM Plex Mono in an OG image. Draw dots as SVG.
+- The retired rose chevron, or the mark redrawn by hand. Every placement comes from `shared/brand-mark.ts`.
 - Gradient text effects.
 - Cards nested in cards.
 - `rounded-xl` on components.
@@ -263,104 +266,97 @@ Homepage patterns become system primitives only when they help a user make the n
 - **Journey flow**: intent → shortlist → provenance → inspect → install or watch. Each first-level route should make its position in this sequence obvious.
 - **Depth rule**: first-level discovery pages can use large editorial type and atmosphere. Skill detail pages stay dense and evidence-led; do not wrap `/gh/...` pages in a marketing masthead.
 
-## Brand Noise Field
+## Brand System
 
-The animated noise field from the CLI (`skilld/src/ui.ts`) is a core brand element, not a decorative flourish. It represents the brand's visual signature: structured noise resolving into signal, which mirrors the product thesis (curation brings order to a noisy skill landscape).
+This section is the visual identity spec: the mark, the textures and the motifs. `COPY.md` owns the words that go with them.
 
-### What the animation communicates
+### Thesis
 
-The ripple pattern expanding outward from a focal point, then settling into ambient shimmer, tells the brand story in motion: a deliberate act of selection radiating through noise until everything resolves. The fill outro (noise converging to solid) represents the moment a curator's collection crystallizes into something installable.
+The dot is the atom. Stone dots are the noise: every other Skill in the registry. One rose dot is the Skill you picked. The mark, the textures and the motifs all draw from that one idea, so a visitor learns it once and reads it everywhere.
 
-### Core visual DNA (platform-agnostic)
+The rule that follows: **one rose element per motif.** A second rose dot means two picks, and the picture stops making sense.
 
-These properties define the animation across CLI, web, and any future surface:
+### Mark
 
-| Property | Value | Why |
-|----------|-------|-----|
-| **Pattern** | Dot grid with varying density | Braille dots in CLI, circle grid on web; the density gradient IS the animation |
-| **Ripple model** | Expanding concentric rings from a focal point | 3 rings, staggered 0.5s apart, Gaussian falloff from ring front, exponential time decay |
-| **Hue seeding** | Deterministic per-context hue via djb2 hash | CLI: seeded from cwd. Web: seeded from route path. Same color every visit, different per page |
-| **Color behavior** | Saturation and lightness scale with brightness | Dim dots are muted warm stone; bright dots are vivid and tinted. The field never reads as flat |
-| **Brand mark** | Rose chevron (⏶) at #fb7185 | Sits at the ripple origin as the focal anchor |
-| **Phases** | Ripple → ambient shimmer → fill outro → solid | Each phase has a distinct feel: energy, calm, resolution, permanence |
-| **Ambient shimmer** | Low random jitter after ripples pass (~1.5s) | The field stays alive at rest, never static, never distracting |
+The mark is a prompt caret with one rose dot after it. The caret is a terminal prompt, because a Skill starts as a command. The dot is the cursor, and the Skill you picked.
 
-### Web-specific adaptations
+| Part | Spec |
+| --- | --- |
+| Box | 100 units, `viewBox="5 0 100 100"`. The box starts at x 5 so the caret and the dot sit optically centred |
+| Caret | `M58 50 L18 82 L18 68 L40.5 50 L18 32 L18 18 Z`, in ink |
+| Dot | circle at (80, 50), r 10, in rose |
+| 16px cut | heavier caret `M58 50 L18 82 L18 62 L33 50 L18 38 L18 18 Z`, dot r 12. Use it where the mark renders at 16px |
+| Ink | stone 900 `#1c1917` on light surfaces, stone 100 `#f5f5f4` on dark ones |
+| Dot colour | rose `#f43f5e` on light surfaces, `#fb7185` on dark ones |
+| Tile | stone 900 rounded square behind raster icons, where the background is unknown |
 
-The CLI uses Unicode Braille characters; the web version uses a WebGL dot grid. The math model is identical; the rendering layer changes.
+**Lockup.** The ink caret, then the `skilld` wordmark in IBM Plex Mono 600, lowercase, tracked at −0.02em, then a trailing rose dot. The dot is 0.3em across, sits 0.32em after the word, and centres at half the x-height. At that size and gap it reads as a cursor. Closer and smaller, it reads as a full stop. The caret box is 1.05em tall, centred on the line, with a 0.38em gap before the word.
 
-- **Dot grid**: 2px circles on an 8px grid, opacity and scale mapped to `brightness(x, y)`
-- **Glow**: soft additive bloom on bright dots only, 4px radius max. This is the one place glow is permitted in the visual system
-- **Hue seeding**: `djb2(route.path)` produces a stable hue per page. Home page gets a fixed hue (rose-adjacent)
-- **Interactivity**: mouse proximity spawns a local ripple (cursor position as ring origin). Touch devices use tap position
-- **Reduced motion**: `prefers-reduced-motion` shows a single static frame at ambient shimmer state, no expanding rings
+**Motion.** The lockup's dot blinks once when its link is hovered: off at 25% of 900ms, back on at 75%. Nothing blinks under `prefers-reduced-motion`, and nothing else in the mark moves.
 
-### Usage boundaries
+**Source.** `shared/brand-mark.ts` holds every coordinate, the outlined wordmark, and the colours. `AppLogo`, the OG lockup and every file in `public/` draw from it. To change the mark, change that module, then run `pnpm brand:assets`. Never hand-edit a file in `public/`.
 
-The noise field appears in exactly three contexts on the web:
+| File | Use |
+| --- | --- |
+| `favicon.svg` | Browser tabs. The 16px cut, ink and dot switch with `prefers-color-scheme` |
+| `favicon.ico` | Legacy tabs and crawlers. 16, 32 and 48px on the stone tile |
+| `logo-icon.png`, `logo-icon.svg` | The weekly email header, the Discord avatar, app icons. 512px stone tile. Gmail strips SVG, so email takes the PNG |
+| `logo.svg`, `logo-light.svg` | The lockup, outlined, for dark and light backgrounds. READMEs and other repositories link these names |
+| `logo-mark.svg`, `logo-mark-light.svg` | The mark alone, for dark and light backgrounds |
 
-1. **Hero background** (landing page): full-width behind content, base opacity 0.15, mouse-interactive
-2. **Page transitions**: brief ripple burst during route changes, 300ms max duration, contained to viewport
-3. **Loading / empty states**: small contained field (matching CLI proportions) while async data resolves
+**Placement.** The lockup is the site header, the account and auth layouts, and every OG card. The mark alone goes where a square fits and a wordmark does not: favicons, avatars, app icons.
 
-It does not appear in: navigation, cards, buttons, tooltips, footers, or any UI chrome. Scarcity makes it premium.
+**Never:**
 
-The noise field animation from the CLI (`skilld/src/ui.ts`) is the single kinetic brand element on the site. This section is the full identity spec: the Core visual DNA table defines it, and the sections that follow cover the visual implementation.
+- Never move the dot into the `i`. The trailing dot won in the brand lab because it reads as a cursor.
+- Never draw the caret in rose, or the dot in stone. The dot is the only rose part.
+- Never set the wordmark as live text beside a separate icon. The lockup is one drawing, so the gaps hold.
+- Never bring back the rose chevron. The caret replaced it on 2026-10-06.
 
-### Why WebGL
+### Texture System
 
-The noise field renders thousands of dots with per-frame brightness calculations. Canvas 2D could handle it but would burn CPU on compositing and glow. WebGL moves all work to the GPU:
+Three textures replace the noise field. Each has one job, and none appears outside it.
 
-- Fragment shader computes brightness per dot (same ring + Gaussian math as CLI)
-- Additive blending produces soft bloom without a separate blur pass
-- Instanced rendering for the dot grid: one draw call, thousands of dots
-- Main thread cost: near zero. Only passes `time` uniform each frame via `requestAnimationFrame`
+| Texture | Job | What it shows |
+| --- | --- | --- |
+| **Braille names** | Hero, OG cards, CLI | Rows of real Skill names in braille. Far from the rose dot they thin to sparse dots. Near it they resolve into letters. Each hop of the pick sends three rings outward, half a second apart. Every cell is a real character, so the same field prints in a terminal |
+| **Converge** | Dividers and loading | Scattered dots fall into one line and end on a rose dot. Many Skills in, one out. It reads as progress |
+| **File minimap** | Skill pages and per-Skill OG cards | Each Skill as its own `SKILL.md`: frontmatter, headings, lists and code drawn as rows of dots. The rose dot is the cursor on the last changed line |
 
-### Rendering spec
+Rules for every texture:
 
-| Property | Value | Notes |
-|----------|-------|-------|
-| **Dot size** | 2px radius circles | Matches the weight of 2px icon strokes |
-| **Grid spacing** | 8px | Aligns with the 4pt spatial system (every other grid line) |
-| **Base opacity** | 0.35 (hero), 0.5 (loading states) | Visible but subordinate to content |
-| **Bloom** | Gaussian glow (sigma 6px) on all visible dots, intensity scales with brightness | Soft halos create overlapping luminous field |
-| **Color** | HSL with hue from `djb2(route.path) % 360 / 360`, saturation 0.35 + brightness x 0.15, lightness 0.4 + brightness x 0.3 | Slightly warmer and brighter than original CLI spec for screen visibility |
-| **Frame rate** | Display refresh via `requestAnimationFrame` for the 8s intro and while the cursor is over the field; 15 fps for the ambient shimmer after that | No `setInterval`; GPU-synced. The shimmer steps at 4 Hz, so 15 fps reads the same |
-| **Canvas sizing** | `devicePixelRatio`-aware, resize via `ResizeObserver` | Crisp on retina, no layout thrash |
+1. **Stone dots, one rose dot.** Ink at four or five alpha steps. No glow, no blur, no gradient fill.
+2. **Behind content.** Measure text contrast against the surface, never against the dots. Keep a clear area behind text.
+3. **Still under reduced motion.** `prefers-reduced-motion: reduce` draws one still frame, with the rings frozen mid-travel so the frame still shows a ripple.
+4. **Paused when unseen.** Stop drawing when the texture is offscreen or the tab is hidden. Start after hydration, never before first paint.
+5. **One per region.** No other motion runs in the same viewport region as a moving texture.
+6. **Converge is the loader.** At small sizes the file minimap looks like a skeleton loader. Do not use it as one.
 
-### Interactivity
+**On OG cards.** An OG card is one still frame, drawn server side as SVG dots. The OG renderer has only Plus Jakarta Sans and IBM Plex Mono, and neither has braille glyphs, so a card never relies on a glyph or a canvas. The lockup's dot is the card's one rose element. Textures on a card draw stone only, or use the lockup's dot as their focal point. `app/utils/og-texture.ts` draws them.
 
-- **Mouse proximity**: cursor position becomes a ring origin. One ring, no stagger, faster decay (0.8 vs 0.4) so the effect is local and brief
-- **Scroll parallax**: none. The field is fixed-position behind content, does not move with scroll. Parallax would undermine the quiet principle
-- **Touch**: tap spawns a single ripple at tap coordinates, same as mouse proximity but single-fire
+| Card | Texture |
+| --- | --- |
+| Splash (`/`) | Braille names. The focal point is the lockup's dot, so the noise resolves into the wordmark |
+| Skill | File minimap down the right edge, faded in from the left. Each Skill seeds its own files from its owner, repository and name |
+| Make a skill | One `SKILL.md` drawn large from its frontmatter down |
+| Page, Collection, Curator | None |
 
-### Performance budget
+### Motifs
 
-- **GPU memory**: one framebuffer (bloom pass) + dot instance buffer. Under 2MB total
-- **CPU per frame**: uniform update only (~0.01ms). All computation in shaders
-- **Startup**: the field starts after hydration, once the main thread is idle (`onNuxtReady`). It is decoration and never competes with first paint. Shader compilation happens once
-- **Fallback**: if `WebGL2` is unavailable (rare), render a static SVG dot pattern at ambient shimmer brightness. No animation, no glow. Still warm, still branded
-- **Software renderer**: if WebGL runs on the CPU (SwiftShader, llvmpipe, no GPU driver), every frame is main-thread work. Draw one static frame at ambient shimmer state, at 1x, like reduced motion
-- **Visibility**: pause the animation loop when the canvas is offscreen (`IntersectionObserver`) or the tab is hidden (`document.visibilityState`). Zero GPU cost when not visible
+Motifs carry data. Each answers one pitch line from `COPY.md` and spends one rose element.
 
-### Reduced motion
+**Run chip.** It pairs with "No more skill bloat". Run and install sit side by side, and run is preselected. Run has a dashed border and a hollow rose dot, because nothing stays. Install has a solid border and a filled dot, because files land. A consequence line under the chip says what each choice leaves on disk.
 
-When `prefers-reduced-motion: reduce` is active:
-- No expanding rings, no ripple
-- Render a single static frame at ambient shimmer state (t=3s equivalent, floor=0, density=0)
-- Mouse proximity does nothing
-- The field still has the per-page hue and warm color; it just doesn't move
+**Braille spark.** It pairs with "Stay hyped". Seven braille bars (`⣀⣤⣶⣿`) show seven days of social mentions, with today in rose. The mention count sits beside it. The spark is made of characters, so the same line works on the site, in the weekly email, in Discord and in a terminal. It replaces the trending flame emoji.
 
-### Integration with quiet principle
+**Change grid.** It pairs with "Keep updated". A 13-week grid of days, today at the bottom right. Each change is a stone dot, and the newest change is rose. A ring around a dot shows the size of the version bump, only where a version is known.
 
-The noise field is bounded by strict rules so it doesn't erode the quiet feel:
-
-1. **Contained**: only in hero, transitions, and loading states. Never in UI chrome
-2. **Behind content**: always `z-index: -1` or composited behind text layers
-3. **Low opacity**: text contrast ratios calculated against the surface beneath, not the dots
-4. **No competing motion**: when the noise field is active, no other motion-v animations run simultaneously in the same viewport region
-5. **Scarcity**: appearing in 3 contexts makes each appearance meaningful. If it were everywhere, it would be noise
+### Usage Boundaries
 
+- Textures and motifs never appear in navigation, buttons, tooltips, footers or other UI chrome.
+- The `/gh` Skill detail template is frozen until the SEO gate on 2026-11-11. Do not add the file minimap to Skill pages before that gate.
+- A page uses at most one texture above the fold.
+- If a design needs a second rose element, split it into two surfaces.
 
 ## Homepage Editorial Direction
 
@@ -422,7 +418,7 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **Crop, do not scale**: `max-block-size: 26rem` with a `mask-image` fade. A `transform: scale()` blurs the type, and the email is the one element here that has to look exactly like itself.
 - **The preview is `aria-hidden` and untabbable.** It carries roughly twenty real links; tabbing an inbox picture mid-homepage is a trap. The prose beside it is the accessible description.
 - **Rose budget**: one solid rose element, the primary CTA. Rose inside the preview is depicted content, like a photograph containing a red object, and does not count against the 10%.
-- **The trending flame** (🔥) marks the email's trending section, the same documented exception to the no-emoji rule that the nav Trending button already uses.
+- **The braille spark** marks the email's trending section, as it does on the site. Emoji stay banned in the email too.
 
 ## Design Decisions
 
@@ -455,3 +451,10 @@ These are editorial sets, not necessarily database collections yet. If a set has
 - **Install commands are syntax-coloured, always**: `npx`, `skilld`, `add`, and the flags stay quiet; the target and the skill name carry the accent, because that is the only part that differs between two commands. The accent rose is darkened to `oklch(0.44 0.17 17.32)` in light and lightened to `oklch(0.8 0.12 17.32)` in dark, since the button rose is 3.2:1 on `bg-muted` at small mono sizes.
 - **Weekly CTAs point at the email, never at a sign-in**: `See this week's` opens the public preview. A button labelled "get" that opens an OAuth wall is a promise the page does not keep, and Loop 1 admits no gate (VISION principle 3).
 - **Trending rows lead with the Skill**: the Skill column outweighs the posts, which scroll beside it in a per-row carousel as testimony. The one acquisition CTA, an inert email preview beside `Sign in with GitHub`, sits in the page header on wide screens and after the fifth row on narrow ones. Confirmed 2026-08-21; the 9/3 sidebar gave way on 2026-10-01 because it took a quarter of the board's width.
+- **The dot is the atom**: stone dots are the noise, and one rose dot is the Skill you picked. The mark, the textures and the motifs all follow it, with one rose element per motif. Confirmed in the brand lab on 2026-10-06.
+- **The prompt caret replaces the rose chevron**: the mark is an ink caret plus one rose dot. In the lockup the dot trails the wordmark as a cursor. Harlan chose the trailing dot over a rose tittle on the `i`, so the dot reads as a cursor. Confirmed 2026-10-06.
+- **One geometry feeds every placement**: `shared/brand-mark.ts` holds the coordinates and the outlined wordmark. `AppLogo`, the OG lockup and every file in `public/` come from it, and `pnpm brand:assets` writes the files. The old chevron lived in hand-written copies, and their rose shades and wordmark weights had drifted apart. Confirmed 2026-10-06.
+- **Three textures replace the noise field**: Braille names for the hero, OG cards and the CLI; Converge for dividers and loading; File minimap for Skill pages and per-Skill OG cards. One job each, so no texture becomes wallpaper. Confirmed 2026-10-06.
+- **The lockup dot is an OG card's one rose element**: the 4px rose top bar, the rose quote rails and the rose avatar ring went stone. On the Splash card, the braille field radiates from the lockup's dot, so the texture spends no second rose. Confirmed 2026-10-06.
+- **The braille spark replaces the trending flame**: seven braille bars for seven days of mentions, today in rose. The emoji exception for Trending is retired. The spark keeps the sourced mention count beside it, which the flame never carried. Confirmed 2026-10-06.
+- **Run and install read as different materials**: run is a dashed border with a hollow dot, because nothing stays; install is a solid border with a filled dot, because files land. Run is preselected. Confirmed 2026-10-06.
diff --git a/GLOSSARY.md b/GLOSSARY.md
index 72c59a26..37c34018 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -75,6 +75,8 @@ Collisions
 
 **Is:** `skilld run`. The Agent reads the Skill for the current session and nothing lands on disk. The default command on every Skill surface.
 
+**Marketing phrase:** "run once off", in pitch copy such as "No more skill bloat: run once off, fork, or install". It names the same path. UI labels and commands keep "run".
+
 **Never:** try, preview, use once, ephemeral.
 
 ### install
@@ -245,7 +247,7 @@ Existing route paths, table names, and protocol fields keep their identifiers.
 
 **Is:** installing into the Agent's home directory, so every project sees the Skill.
 
-**Use for:** the UI label `Global`.
+**Use for:** the UI label `Global`. "Teach your agent skilld" is the promo label for `npx skilld install skilld --global`, which installs the skilld Skill globally. "Teach" appears only in that label and never replaces "install".
 
 **Never:** system-wide.
 
@@ -269,7 +271,7 @@ Existing route paths, table names, and protocol fields keep their identifiers.
 | --- | --- | --- |
 | follow | watch | One Loop 2 verb |
 | sync (user-facing) | import (stars), "Checked GitHub {ago}" (freshness) | Internal jargon; say what happened |
-| use once, try, preview | run | One name for the transient path |
+| use once, try, preview | run ("run once off" in pitch copy) | One name for the transient path |
 | add (CLI verb) | run or install | v2 grammar |
 | popular, install count | starred, stars | Installs never rank or trust |
 | verified safe, secure, scanned | name the exact check | An attestation cannot guarantee safety |
diff --git a/test/unit/docs-fold-contract.test.ts b/test/unit/docs-fold-contract.test.ts
index c592cbe5..2b2bd4ff 100644
--- a/test/unit/docs-fold-contract.test.ts
+++ b/test/unit/docs-fold-contract.test.ts
@@ -18,14 +18,6 @@ describe('component rules (DESIGN.md)', () => {
   })
 })
 
-describe('noise field identity pointer (DESIGN.md)', () => {
-  it('claims the noise field identity spec in this section, not COPY.md', () => {
-    const specLines = design.split('\n').filter(line => line.includes('identity spec'))
-    expect(specLines.length).toBeGreaterThan(0)
-    expect(specLines.filter(line => line.includes('COPY.md'))).toEqual([])
-  })
-})
-
 describe('docs/work brief citations', () => {
   it('cites the pivot plan at its new path, never the deleted root file', () => {
     const briefs = readdirSync('docs/work').filter(file => file.endsWith('.md'))

From 9e8f4feada014753eb89b31caa6767d3316b0b39 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:03:55 +1100
Subject: [PATCH 4/4] docs(copy): record the final homepage copy deck

Harlan finalised the home H1, intro, claims line, tiles and section
headings, so page agents apply them from COPY.md instead of a chat log.
The Taste-tested hero exception goes with the old H1. "Hyped" gets its
own exception in COPY.md, GLOSSARY.md and VISION.md, because the old
no-hype rule would reject the approved "Stay hyped" tile.
---
 AGENTS.md   |  2 +-
 COPY.md     | 32 +++++++++++++++++++++-----------
 DESIGN.md   |  2 +-
 GLOSSARY.md |  2 ++
 VISION.md   |  4 ++--
 5 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index dd69aa46..95414a37 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -6,7 +6,7 @@ emails. Nuxt on Cloudflare Workers, D1, and Workers AI.
 ## Read first
 
 - [`VISION.md`](VISION.md) — the product filter: mission, money posture, the two loops, seven principles, anti-scope. Read before any product, scope, design, or marketing decision. When it conflicts with the code, VISION wins.
-- [`DESIGN.md`](DESIGN.md) — the visual filter: tokens, the three design principles, components, motion, the noise field, and the Avoid list. Read before UI work.
+- [`DESIGN.md`](DESIGN.md) — the visual filter: tokens, the three design principles, components, motion, the brand system, and the Avoid list. Read before UI work.
 - [`COPY.md`](COPY.md) — the verbal filter: the canonical strings, the register per context, and the banned language. Read before any user-visible string.
 - [`GLOSSARY.md`](GLOSSARY.md) — every product concept. Read before a user-visible string, a public API name, a doc heading, or a route segment.
 - [`docs/arch/README.md`](docs/arch/README.md) — the layers, the identity rule, the URL canonicals, and the server and app handler shapes.
diff --git a/COPY.md b/COPY.md
index 63684933..2543378b 100644
--- a/COPY.md
+++ b/COPY.md
@@ -22,15 +22,23 @@ These exact strings. Do not paraphrase them per page.
 | Tagline | Curated agent skills by humans. | index OG image alt |
 | Site description | Curated agent skills by humans, written by real maintainers in their own GitHub repos | `nuxt.config.ts` site description (feeds every page's meta description) |
 | Elevator pitch | Skilld is a curated registry of agent skills written by real people in the GitHub repos you already depend on. One install command, every agent; watch your stack and get a digest when it changes. | guidance only: no page ships it yet (use it where two sentences fit) |
-| Promo label | Teach your agent skilld | guidance only: the label beside `npx skilld install skilld --global` |
-| Pitch: run | No more skill bloat | guidance only: the run chip, with run once off, fork, or install |
-| Pitch: trending | Stay hyped | guidance only: weekly and monthly social trending, with the braille spark |
-| Pitch: changes | Keep updated | guidance only: tracking Skill changes, with the change grid |
-| Pitch: platform | Built to be built on | guidance only: the CLI, API, SDK and MCP server |
+| Home H1 | Hyped agent skills, no bloat | guidance only: the homepage H1. The page draws the rose brand dot as its full stop, so never type a period |
+| Home intro | Run a skill once and nothing lands on disk. Fork or install the ones you keep. Every skill comes from its maintainer's repo, and a person reads it before it's listed. | guidance only: the homepage intro under the H1 |
+| Home claims line | Open-source CLI · Analytics without cookies or IPs · A skills.sh alternative | guidance only: the homepage claims line. The last item links to `/vs/skills-sh` |
+| Promo label | Teach your agent skilld | guidance only: the homepage promo chip beside `npx skilld install skilld --global` |
+| Tile: run | No more skill bloat: Run skills once off, fork, or install. | guidance only: a homepage tile, with the title before the colon. The run chip motif pairs with it |
+| Tile: trending | Stay hyped: What devs talk about on X and Bluesky, weekly and monthly. | guidance only: a homepage tile. The braille spark motif pairs with it |
+| Tile: changes | Keep updated: Watch repos and get a digest when their skills change. | guidance only: a homepage tile. The change grid motif pairs with it |
+| Tile: platform | Built to be built on: CLI, API, SDK and MCP. | guidance only: a homepage tile |
+| Home section: trending | Trending skills this week. | guidance only: the homepage trending section heading |
+| Home section: changes | Keep up with skill changes. | guidance only: the homepage section heading for watching and the digest |
+| Home section: authoring | Write a skill for your project. | guidance only: the homepage section heading for making a Skill |
 | Claim: open source | open-source CLI | guidance only: the CLI. Never call skilld.dev or its site open source |
 | Claim: privacy | analytics without cookies or IPs | guidance only: analytics and privacy copy. Never the bare "privacy-friendly" |
 | Claim: comparison | skills.sh alternative | guidance only: always a link to `/vs/skills-sh` |
 
+The homepage deck has no collection section. Its old heading, "Install a collection in one command.", is retired.
+
 ### The product in four lengths
 
 **5 words:** Curated agent skills by humans.
@@ -139,7 +147,7 @@ near-miss is also banned.
 | revolutionary, game-changing, supercharge, unlock, 10x, delightful, seamless, cutting-edge, next-generation, disrupt, empower, leverage (as a verb) | the mechanism, or the number | Startup register. The reader runs CI and can tell |
 | AI-powered, intelligent, smart, magic, automate, autonomous, copilot (as a marketing term) | name what it does | skilld serves developers who use AI agents; it is not itself an AI product. "Agent" and "skill" stay fine as category nouns ("agent skills", "install a skill"); the ban is on "AI" modifying skilld itself |
 | best, fastest, most powerful, ultimate, definitive | the specific claim, with evidence | A superlative without evidence is unfalsifiable. If something genuinely is the best at one thing, say why |
-| vibrant community, ecosystem (community-size claims), passionate developers, beloved by thousands | the number | "6 curators", never "a growing community". Calling skilld an ecosystem is a category claim, not a size claim; see the exception below |
+| vibrant community, ecosystem (community-size claims), passionate developers, beloved by thousands | the number | "6 curators", never "a growing community". Using "ecosystem" for a package category is not a size claim; see the exception below |
 | named, naming, named by (in user-facing copy) | talked about, mentioned | Our internal words for the social-attribution route; they read as jargon. "3 devs talked about it", never "3 people named it". The technical sense survives in identifiers, ADRs and code comments, where the precision is the point |
 | people (for our audience) | dev, devs | They are developers, and "people" is a vaguer word doing a smaller job. "Developers" in full is fine where the short form reads clipped |
 | first person in a CTA | the content, then the destination | "We send this every Monday" spends the words on us. "Trending skills to your inbox every Monday" gives the reader both things that matter |
@@ -151,11 +159,13 @@ against machine generation, "human" and "person" are the right words and "dev" w
 point. "Curated agent skills by humans" and "person-authored skills" stay as they are. The rule
 above is about naming our audience, not about the provenance claim.
 
-**Exception, the homepage hero.** The 2026-09 homepage pivot made "Taste-tested agent skills
-ecosystem" the landing H1 and the page title. That "ecosystem" names the category skilld
-serves: skills across agents and package managers, written by their maintainers. It is not a
-community-size claim, so the scoped ban above does not cover it. Package and learn pages use
-the word in the same technical sense: npm, PyPI, crates, RubyGems.
+**Exception, "ecosystem" as a category.** Package and learn pages use "ecosystem" in its
+technical sense: npm, PyPI, crates, RubyGems. That names a category, not a community size, so
+the scoped ban above does not cover it.
+
+**Exception, "hyped".** Harlan approved "hyped" for the homepage H1 and "Stay hyped" for the
+trending tile. Both name what devs talk about on X and Bluesky, which we measure and show. Use
+them only for social trending. "Hot", "popular" and "top" stay banned.
 
 ## Open questions
 
diff --git a/DESIGN.md b/DESIGN.md
index c98327aa..2633144a 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -304,7 +304,7 @@ The mark is a prompt caret with one rose dot after it. The caret is a terminal p
 | `logo.svg`, `logo-light.svg` | The lockup, outlined, for dark and light backgrounds. READMEs and other repositories link these names |
 | `logo-mark.svg`, `logo-mark-light.svg` | The mark alone, for dark and light backgrounds |
 
-**Placement.** The lockup is the site header, the account and auth layouts, and every OG card. The mark alone goes where a square fits and a wordmark does not: favicons, avatars, app icons.
+**Placement.** The lockup is the site header, the account and auth layouts, and every OG card. The mark alone goes where a square fits and a wordmark does not: favicons, avatars, app icons. The homepage H1 ends on the rose dot in place of a typed full stop. The page draws that dot, and it counts as the hero's rose element.
 
 **Never:**
 
diff --git a/GLOSSARY.md b/GLOSSARY.md
index 37c34018..4220c5df 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -149,6 +149,8 @@ Collisions
 
 **Is:** Skills ranked by devs talking about them on X and Bluesky (ADR-0004). Never by installs.
 
+**Marketing phrase:** "hyped", as in the homepage H1 and the "Stay hyped" tile. It names the same social signal.
+
 **Never:** popular, hot, top, leaderboard.
 
 ### registry
diff --git a/VISION.md b/VISION.md
index 318747c7..7ad1c741 100644
--- a/VISION.md
+++ b/VISION.md
@@ -143,9 +143,9 @@ Skills install as plain files in the user's repository. They work offline, survi
 
 ### 7. Quiet craft
 
-The interface recedes; the content speaks. Warm stone, rare rose, mono chrome, borders not shadows, the noise field in exactly three contexts. The voice is editorial: confident, warm, grounded, no hype words, every claim concrete. Craft is scope, not afterthought; a feature that works but reads loud or generic is not done. Full systems live in DESIGN.md and COPY.md; this principle makes them vetoes.
+The interface recedes; the content speaks. Warm stone, rare rose, mono chrome, borders not shadows, three brand textures with one job each. The voice is editorial: confident, warm, grounded, no hype words, every claim concrete. "Hyped" is the one approved exception, and it names social trending only (COPY.md). Craft is scope, not afterthought; a feature that works but reads loud or generic is not done. Full systems live in DESIGN.md and COPY.md; this principle makes them vetoes.
 
-**How to apply:** polish PRs are first-class. New surfaces ship with empty states, motion within the 400ms budget, and copy that passes the banned-language list. The noise field never escapes its three contexts.
+**How to apply:** polish PRs are first-class. New surfaces ship with empty states, motion within the 400ms budget, and copy that passes the banned-language list. A brand texture never leaves its job.
 
 **Test:** would this screen pass as a page of a well-edited technical magazine? If it reads like a startup landing page, fail.