Lab notes · 001

Ten design systems, one page.

July 2026 · Infinite Parallel Labs

This portfolio has a strange property: it is one HTML document, but it ships with ten complete design languages — and you're reading this note in whichever one you were last wearing. Here's how it works, and why it's less code than you'd think.

1. The token contract

The layout is written once, against a contract of ~40 CSS custom properties: surfaces, text tiers, two accents, a radius ladder, font slots, button physics, an easing curve. Each skin is just a re-declaration of that contract plus a handful of signature rules:

[data-theme="pupilmon"] {
  --font-display: "Press Start 2P", monospace;
  --card-border: 4px solid #182860;
  --card-shadow: 4px 4px 0 #05081F;   /* hard offset, no blur */
  ...
}

Because structure and skin never mix, a whole world — Win96 bevels, arcade shadows, peony script — costs 60–100 lines. The discipline is the feature: if a skin needs a new element, the element goes in the shared layout and every other skin inherits the slot.

2. Switching is a ceremony

Skins don't just swap — they arrive. Entering the Win96 skin plays a BIOS boot with a striped progress bar; leaving it fires a CRT power-off. The tactical skin sweeps a gunmetal curtain with a glowing scanline edge. The handheld skin flashes a VS screen and shakes. Everything else cross-fades through the incoming skin's base color, so dark-to-light never flashes raw white. All of it is skipped under prefers-reduced-motion.

3. The field-strip monogram

The hero's ∥ mark is a real-time 3D wireframe of ten shards — one per shipped project, tinted with its accent. Drag rotates it; scrolling field-strips it apart, CAD-style, with leader-line labels; clicking a shard wears that project's skin. The projection engine is ~120 lines of hand-rolled canvas math — rotation matrices, perspective divide, depth-faded strokes — distilled from the CAD lab we built for a firearms manufacturer's site.

4. Everything else that keeps the illusion

URL-addressable skins — ?skin=pamax applies before first paint.
Per-skin share cards — static stub pages carry each skin's Open Graph art, so a link can unfurl in the skin you chose.
Favicon and theme-color re-tint per skin; even the browser tab plays along.
Self-hosted fonts — twelve families vendored locally, so a skin switch never waits on a third party.
The details — an ACOG reticle cursor in the machined-brass skin, a flying-orca screensaver if you idle on the Win96 desktop, per-skin switch blips behind a sound toggle.

Why bother?

Because a portfolio's job is proof. Anyone can claim range; this page demonstrates it every time someone touches the Skins button. Every client we build for gets this same treatment — tokens, type, motion, and atmosphere invented for them, not adapted from a template.

Start a build