The raster/painterly atmosphere layer — full-bleed hero imagery (Gemini, per ADR-014), a CSS halftone-corner accent, and a dust-speck flourish, composited behind real Nav, hero type, mark, and cards. Only one value here is a systematic token: background opacity (effect.atmosphere.opacity → --atmosphere-opacity, dark 0.6 / light 0 — the light-mode kill switch). Every other dial is live, art-directed, and lab-local: tuned by eye, not locked.
Caveat (2026-07-18): the four tiles are round-1 draft comparison art, generated to answer "atmosphere vs. grid" and "hero-only vs. full-bleed" — not final assets. Tiles 2 and 4 are the finalists; the call between them (and whether "hero-only, fades to flat" becomes a structural rule at all) waits on real Phase 6 page content that doesn't exist yet. Nothing on this page is locked but the one opacity token.
Preview
Portfolio — technical spike
Designer/engineer working across brand systems, motion, and product interfaces. This composite is the review stage for the atmosphere layer — real chrome, real type, real cards, sitting on the generated hero art.
Selected work
A token-first pass at duration, easing, and signature interaction behaviors — built as a standalone tuning lab before being ported into the production site.
Selected work
Built and scaled the token pipeline, component library, and governance model that let five orgs ship consistent product without a central bottleneck.
Labs
From a two-agent prototype to a sixteen-agent internal practice — the backlog of talks, workshops, and prototypes that never made it public until now.
Which style tile, and how strong. Opacity is the one token-backed dial — it previews --atmosphere-opacity's dark value on the stage; in light the token's own 0 takes over and the whole atmosphere is killed.
Style tile
Lab-local. A few small blurred specks drifting on a slow ambient loop (CSS-only, transform/opacity). Its easing references the --ease-ambient motion token; reduced-motion disables the loop.
Lab-local. A tight top-right dot-matrix accent (CSS radial-gradient grid + radial mask — a precise repeating pattern, vector-native, not atmosphere). Its color already reads var(--color-accent); the geometry is what's tunable.