Design Engineering · robertbabiarz.com · 2026

This site is the case study.

Ten case studies argue that working software beats slideware. The eleventh is the argument itself: 29 self-contained pages on one token system, designed and engineered with an AI pair, zero build steps, and receipts for every number on the page.

Read the full case study See the system
The interactive homepage of this portfolio: architect-paper light theme, a large hero headline about designing clarity and control for complex systems, teal pill CTA, and a contour-field backdrop
The homepage is itself a working product: boot-verified subsystems, a playable watch floor, a photometric planner

Portfolios assert. This one runs.

A portfolio that claims systems thinking should be a system you can inspect. Every page here is a single self-contained file — the research, the flows, the visual system, and the shipped code are one artifact with no handoff layer anywhere in it. The prototype is simultaneously the spec, the demo, and the production page.

It was built the way the industry is starting to work: a designer directing an AI pair against a machine-readable brief — the design rules live in the repo as working agreements — with browser automation verifying every change before it counts as done. The craft on display isn't just the screens. It's the discipline that produced them.

Role
Designer & design engineer — solo, AI-paired (Claude Code)
Stack
Zero-build HTML · CSS · vanilla JS · React 18 via CDN on 3 pages · Python build scripts
Scale
29 pages · ~76,000 hand-authored lines · 11 case studies · 9 in-page simulations
The Challenge

Three problems every senior portfolio has, solved structurally.

01
Prove, don't assert
"Systems thinking" is a claim on every resume. Here it has to survive inspection: view-source shows the tokens, the audit shows the contrast math, the paytable shows the odds.
02
Docs that can't drift
A design system documented apart from its product goes stale. This one is documented by the product: the case study you're reading renders from the same tokens it describes.
03
AI velocity without AI slop
One designer with an AI pair can ship at team speed — but only if verification replaces vibes. Every change is driven in a real browser before it lands, and every number gets a source.
The Visual System

One system, three faces.

The homepage ships as three complete, switchable identities — architect-paper Interactive, classified-file Dossier, phosphor-CRT Retro — rendered by one discipline: one accent per screen, meaning never riding on hue alone, coral as the strongest risk signal, and every animation gated on reduced motion. The skin changes; the rules don't.

Interactive homepage variant: warm paper canvas, dark ink typography, teal accent, contour-line backdrop
Interactive · the primary surface, dark and light mirrors
Dossier homepage variant: manila case-file paper, CONFIDENTIAL stamp in classified red, typewriter mono labels
Dossier · a classified case file, stamp-red accent
Retro homepage variant: CRT terminal with phosphor-green boot log, VT323 pixel headline, scanline overlay
Retro · a phosphor CRT terminal, boot log and all
The Token Architecture

Tokens all the way down

232 token values in a three-tier mirror — primitive → semantic → theme — feed two runtime systems that share one discipline and one saved theme preference. The rule is written down and enforced: reference var(--…), never hardcode a hex. Even the one domain that needs a severity scale re-tints every value per theme.

The CTOC security operations dashboard: severity-scaled KPI strip, incident table, and kill-chain panels, every color a token
The severity exception · CTOC's scale, paired with shape and label, re-tinted for dark
The work index lobby view: a grid of eleven case-study tiles, each with its own accent riding the shared dark canvas
Eleven case tiles, eleven accents · one canvas, one grid, one rule set
The Evidence Layer

Playable, not pictured.

Nine in-page simulations carry the case studies' claims as operable systems — a photometric sandbox, an AI layout generator, a mathematically honest slot machine, playable defence drills. Every one is dependency-free vanilla JS with a real keyboard path, screen-reader announcements, and an instant reduced-motion mode. You don't read about the interaction design; you operate it.

Parlay Reels demo slot mid-session: five reels of animal symbols, bet controls, and the session ledger
Parlay Reels · RTP 96.04%, exact — the paytable publishes the reel strips
The Light ARchitect AI AutoLayout demo: ranked candidate layouts over a footcandle grid with goals and constraints
AI AutoLayout · ranked candidates you can refine and re-rank
The AEGIS watch-floor drill on the homepage: radar sweep, contact receipts with source pips and dissent, CLEAR/HOLD/TAG verb rail
AEGIS watch floor · J/K/L keys, receipts before verdicts
The Process

Built with an AI pair, gated by receipts

Claude Code works as a standing pair against a machine-readable brief — the design principles, token rules, accessibility bar, and content voice live in the repo as working agreements the model loads every session. Playwright then drives the real pages before any change counts as done. When an adversarial review of the slot's math found a 0.127-point RTP gap the Monte Carlo couldn't see, the process worked exactly as designed: the model brought receipts, the designer kept the decision.

The site's build record at the bottom of a case study: established date, deployment count, version, toolchain, and image-rights lines on a dark navy strip
The build record on every page · each number derived from git and the deployments API, never typed
By the Numbers

Numbers with sources.

0
npm dependencies
NO BUNDLER, NO SERVER, NO BACKEND · REACT 18 FROM A CDN ON 3 PAGES · DEGRADES GRACEFULLY OFFLINE
76k
hand-authored lines
COUNTED FROM THE WORKING TREE BY BUILD-COLOPHON.PY · GENERATED FILES EXCLUDED FROM THE COUNT
29
self-contained pages
11 CASE STUDIES · 3 HOMEPAGE VARIANTS · EVERY PAGE ONE FILE THAT OPENS ANYWHERE
96.04%
verified demo RTP
EXACT, ENUMERATED OVER 68,883,048 REEL COMBINATIONS · THE REVIEW THAT PROVED IT ALSO CAUGHT A 0.127-POINT BUG

"The system's proof isn't a spec document. It's that the page you're reading renders from it."

The Wider Shift

Where the craft is going — and where this site already is.

Six movements are reshaping how design work gets made and judged. Each one is practiced here, not just cited.

01 · Discipline
Design engineering, named
The designer-who-ships-code became a recognized role, not a curiosity. This portfolio has no handoff layer at all — the person who framed the research also wrote the shipped CSS.
02 · Canvas
Code as the design surface
Prompt-to-prototype tools made working software the primary design artifact. Every case study here is the prototype: the file you review is the file that ships.
03 · Standard
Tokens reach a real spec
The W3C Design Tokens spec went stable in late 2025. This site has run token-first since day one: three tiers, semantic names, and a written never-hardcode rule.
04 · Culture
Evals cross into UX
Structured verification is replacing vibes as the shipping gate. Here, Playwright drives the real page and an adversarial review checks the math before anything lands.
05 · Platform
The buildless web returns
Native dialog, CSS nesting, view transitions — the platform caught up, and zero-build sites are a deliberate modern architecture again. This one deploys as pure static files.
06 · Trust
Honest-data UX
As AI floods interfaces, trust hinges on receipts: citations, provenance, calibrated claims. This site's editorial spine — where a number isn't real, say what it represents.
Grounded in Figma's 2025 AI report, the W3C Design Tokens specification (2025.10), the European Accessibility Act enforcement wave, and 2025–26 industry writing · full sources cited in the deep dive
Open the Hood

The deep dive documents everything.

The token architecture with a live inspector reading this very page. The seven principles and where each is enforced. The AI-paired process, the bug the adversarial review caught, and a re-derivation of the slot's exact RTP that runs in your browser.

Read the deep dive
Version Quick tour Deep dive