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