[{"data":1,"prerenderedAt":313},["ShallowReactive",2],{"work:index":3},[4],{"id":5,"title":6,"body":7,"description":280,"extension":289,"eyebrow":290,"meta":291,"navigation":292,"number":293,"order":294,"path":295,"results":296,"seo":303,"status":183,"stem":304,"summary":305,"tags":306,"__hash__":312},"work\u002Fwork\u002Fwebsite.md","binary-punks.com & the design system",{"type":8,"value":9,"toc":279},"minimark",[10,35,76,100,156,206],[11,12,14,19,28],"cs-block",{"eyebrow":13},"The brief",[15,16,18],"h2",{"id":17},"a-site-that-argues-by-being-what-it-claims","A site that argues by being what it claims.",[20,21,22,23,27],"p",{},"We needed a marketing site that did more than describe binary-punks — it had to ",[24,25,26],"strong",{},"demonstrate"," the way we work. A software workshop whose own site loads third-party trackers, ships a cookie banner, or scores poorly would be its own counter-argument.",[20,29,30,31,34],{},"So the brief was strict: a fast, accessible, privacy-first static site, and a ",[24,32,33],{},"design system portable enough"," to reuse across decks, emails and prototypes — all on a token architecture a future Nuxt build could adopt without a rewrite.",[11,36,38,42],{"eyebrow":37},"Constraints",[15,39,41],{"id":40},"the-rules-we-set-ourselves","The rules we set ourselves.",[43,44,45,52,58,64,70],"ul",{},[46,47,48,51],"li",{},[24,49,50],{},"Zero third-party requests."," Every font, icon and asset self-hosted — a visitor's browser talks only to us.",[46,53,54,57],{},[24,55,56],{},"No cookies, no tracking, no banner."," Privacy by architecture, not by consent dialog.",[46,59,60,63],{},[24,61,62],{},"Token-driven, framework-portable."," One source of truth that mirrors what Nuxt UI generates, usable with or without Nuxt.",[46,65,66,69],{},[24,67,68],{},"AA accessible in light and dark"," — contrast calibrated at the token level, not patched per component.",[46,71,72,75],{},[24,73,74],{},"Every standard a CI gate"," — the build fails if performance, accessibility or the self-host rule regress.",[11,77,79,83,91,97],{"eyebrow":78},"What we built",[15,80,82],{"id":81},"a-token-layer-then-everything-on-top-of-it","A token layer, then everything on top of it.",[20,84,85,86,90],{},"The foundation is a framework-free token stylesheet that reproduces the Nuxt UI 4 layering exactly: six primitive palettes, then semantic aliases, then ",[87,88,89],"code",{},"--ui-*"," surface tokens, with light and dark resolved at the token level. Every page and component reads those tokens, so a theme change is one edit, not a hundred.",[92,93],"diagram",{":boxes":94,"band":95,"bar":96},"[{\"dt\":\"@theme\",\"dn\":\"Palettes\",\"dd\":\"flame · ink · moss · azure · gold · scarlet\"},{\"dt\":\"aliases\",\"dn\":\"Semantic\",\"dd\":\"primary · neutral · success…\"},{\"dt\":\"--ui-*\",\"dn\":\"Surfaces\",\"dd\":\"bg · text · border · light\u002Fdark\"},{\"dt\":\"output\",\"dn\":\"Pages\",\"dd\":\"7 static pages · components\"}]","Self-host everything & CI gates run across the whole pipeline","architecture · token flow",[20,98,99],{},"On top sit seven static pages — Home, Services, About, Standards, Work, and the two legal pages — plus a standalone design system document that doubles as the spec and a drop-in for non-Nuxt artifacts.",[11,101,103,107,122,136,146],{"eyebrow":102},"Decisions & trade-offs",[15,104,106],{"id":105},"where-we-chose-and-why","Where we chose, and why.",[108,109,111],"decision",{"q":110},"Monospace everywhere?",[20,112,113,114,117,118,121],{},"The legacy site set all text in mono. We kept ",[24,115,116],{},"JetBrains Mono as the structural face"," for identity, but opted body-length legal copy into ",[24,119,120],{},"Hanken Grotesk"," — mono is the voice, sans is for reading. Identity without punishing the reader.",[108,123,125],{"q":124},"Self-host vs. a fonts CDN",[20,126,127,128,131,132,135],{},"A CDN is easier, but it leaks every visitor's IP to a third party. We chose ",[24,129,130],{},"self-hosting"," and made it a CI gate. Honest caveat: the original review files still used a CDN — the production build closes that, and we say so on ",[24,133,134],{},"Standards",".",[108,137,139],{"q":138},"Show scores we hadn't measured?",[20,140,141,142,145],{},"Tempting, but off-brand. Metrics render as ",[24,143,144],{},"\"to be measured\""," until CI verifies them on the live domain. A number only counts when it's real.",[108,147,149],{"q":148},"Framework lock-in",[20,150,151,152,155],{},"Rather than couple the system to Nuxt, we wrote the tokens ",[24,153,154],{},"framework-free"," — they mirror Nuxt UI's output but work anywhere. The Nuxt build adopts them; decks and emails reuse them. No rewrite tax.",[11,157,159,163,199],{"eyebrow":158},"Results",[15,160,162],{"id":161},"measured-not-invented","Measured, not invented.",[164,165,166,173,179,185,189,194],"results",{},[167,168],"result",{"label":169,"note":170,"status":171,"value":172},"third-party requests","to verify in CI","target","0",[167,174],{"label":175,"note":176,"status":177,"value":178},"Lighthouse, all four","to be measured","tbm","100",[167,180],{"label":181,"note":182,"status":183,"value":184},"WCAG 2.2, light + dark","verified in DS","live","AA",[167,186],{"label":187,"note":176,"status":177,"value":188},"TLS & security headers","A+",[167,190],{"label":191,"note":192,"status":183,"value":193},"token source of truth","shipped","1",[167,195],{"label":196,"note":197,"status":183,"value":198},"cookie banners shipped","none, by design","—",[20,200,201,202,135],{},"Placeholders marked \"to be measured\" become linked, third-party-verified results once the pipeline runs against the live domain — see ",[203,204,134],"a",{"href":205},"\u002Fen\u002Fstandards",[11,207,209,213,267],{"eyebrow":208},"Stack",[15,210,212],{"id":211},"what-it-runs-on","What it runs on.",[214,215,216,236,253],"stack-cols",{},[217,218,220],"stack-col",{"title":219},"Foundation",[43,221,222,228,233],{},[46,223,224,227],{},[24,225,226],{},"Nuxt UI 4"," (≥ 4.8)",[46,229,230],{},[24,231,232],{},"Tailwind CSS v4",[46,234,235],{},"DTCG-style design tokens",[217,237,239],{"title":238},"Type & icons",[43,240,241,246,250],{},[46,242,243],{},[24,244,245],{},"JetBrains Mono",[46,247,248],{},[24,249,120],{},[46,251,252],{},"Lucide (ISC), self-hosted",[217,254,256],{"title":255},"Delivery",[43,257,258,261,264],{},[46,259,260],{},"Static output",[46,262,263],{},"Own EU infrastructure",[46,265,266],{},"CI quality gates",[20,268,269,270,274,275,278],{},"The ",[271,272,273],"em",{},"what"," and the ",[271,276,277],{},"why"," — not a copy-paste blueprint. The interesting part was never the package list; it was the discipline around it.",{"title":280,"searchDepth":281,"depth":281,"links":282},"",2,[283,284,285,286,287,288],{"id":17,"depth":281,"text":18},{"id":40,"depth":281,"text":41},{"id":81,"depth":281,"text":82},{"id":105,"depth":281,"text":106},{"id":161,"depth":281,"text":162},{"id":211,"depth":281,"text":212},"md","Case 01 · Internal",{},true,"01",1,"\u002Fwork\u002Fwebsite",[297,298,299,300,301,302],{"value":172,"label":169,"status":171,"note":170},{"value":178,"label":175,"status":177,"note":176},{"value":184,"label":181,"status":183,"note":182},{"value":188,"label":187,"status":177,"note":176},{"value":193,"label":191,"status":183,"note":192},{"value":198,"label":196,"status":183,"note":197},{"title":6,"description":280},"work\u002Fwebsite","A static marketing site and a portable design system, built on the Nuxt UI token architecture — self-hosting everything, gated in CI, and private by construction. The site you're reading now.",[307,308,309,226,310,311],"Advise","Build","Run","Tailwind v4","Design tokens","UgEmuA0ClmKuv2HE52tkx5rMw0NyC8MQmhzozMktX1I",1781542678784]