Case 01 · Internal
binary-punks.com & the design system
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.
The brief
A site that argues by being what it claims.
We needed a marketing site that did more than describe binary-punks — it had to 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.
So the brief was strict: a fast, accessible, privacy-first static site, and a 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.
Constraints
The rules we set ourselves.
- Zero third-party requests. Every font, icon and asset self-hosted — a visitor's browser talks only to us.
- No cookies, no tracking, no banner. Privacy by architecture, not by consent dialog.
- Token-driven, framework-portable. One source of truth that mirrors what Nuxt UI generates, usable with or without Nuxt.
- AA accessible in light and dark — contrast calibrated at the token level, not patched per component.
- Every standard a CI gate — the build fails if performance, accessibility or the self-host rule regress.
What we built
A token layer, then everything on top of it.
The foundation is a framework-free token stylesheet that reproduces the Nuxt UI 4 layering exactly: six primitive palettes, then semantic aliases, then --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.
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.
Decisions & trade-offs
Where we chose, and why.
The legacy site set all text in mono. We kept JetBrains Mono as the structural face for identity, but opted body-length legal copy into Hanken Grotesk — mono is the voice, sans is for reading. Identity without punishing the reader.
A CDN is easier, but it leaks every visitor's IP to a third party. We chose 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 Standards.
Tempting, but off-brand. Metrics render as "to be measured" until CI verifies them on the live domain. A number only counts when it's real.
Rather than couple the system to Nuxt, we wrote the tokens framework-free — they mirror Nuxt UI's output but work anywhere. The Nuxt build adopts them; decks and emails reuse them. No rewrite tax.
Results
Measured, not invented.
Placeholders marked "to be measured" become linked, third-party-verified results once the pipeline runs against the live domain — see Standards.
Stack
What it runs on.
Foundation
- Nuxt UI 4 (≥ 4.8)
- Tailwind CSS v4
- DTCG-style design tokens
Type & icons
- JetBrains Mono
- Hanken Grotesk
- Lucide (ISC), self-hosted
Delivery
- Static output
- Own EU infrastructure
- CI quality gates
The what and the why — not a copy-paste blueprint. The interesting part was never the package list; it was the discipline around it.
Built to this bar — for you.
Same engineering, same standard, pointed at your problem. Tell us what you're trying to do.
disko@binary-punks.com