The site wears the same design system as the tools I build at work: one set of colours with a dark twin for each, three typefaces, and a handful of building blocks. Everything below is drawn with the site's own styles, so switching the theme at the top shows both. One stylesheet, app/design-system.css, carries all of it.
Colours are used by name only: var(--accent), never #0f4c5c. Each token has a light and a dark value, shown under its name. Text on an accent fill uses --on-accent, never white.
--bgThe page#f4f6f8 · #10161c--paperCards, prints, the header and footer#ffffff · #171f27--ruleBorders#cfd6dd · #34414d--rule-softRow lines, chips, quiet fills#e4e9ee · #26313b--inkHeadings and text#1b2430 · #e6ebf0--ink-2Secondary text#566371 · #9aa7b3--ink-3Labels and captions#64707c · #7f8d9a--accentLinks, buttons, figures#0f4c5c · #7ec4d4--accent-softHover and the pressed theme button#e2eef1 · #1b3038--accent-deepButton hover#0a3540 · #a5dbe7--on-accentText on an accent fill#ffffff · #0b1e24--coreUp, on, playing#1f6f3f · #7fcf9a--tapeTape on a printrgba(255, 226, 150, .72) · rgba(224, 176, 90, .40)--screenTetris's screen, dark in both themes#121a22 · #121a22--screen-inkFigures on the screen#e6ebf0 · #e6ebf0--screen-ink-2Labels on the screen#8d9aa7 · #8d9aa7--h0No contributions#e4e9ee · #26313b--h1A few#b6d6de · #1d4550--h2Some#78afbd · #2b6a79--h3Many#3a8095 · #4f9aac--h4The most#0f4c5c · #8fd0deSource Serif 4 for the name, headings, tile names and figures; IBM Plex Sans for text; IBM Plex Mono for eyebrows, captions, tags and the subtitles under tile names.
Paper bar with a bottom rule: the wordmark (Bard in the accent), Projects and Connect, and the theme switch, the same three-way pill as the work tools: light, match my computer, dark. The choice is saved in this browser and applied before the page paints, so it never flashes. On a phone the bar wraps instead of hiding behind a menu. It's live at the top of this page.
A photo on a paper border with a wide bottom lip and a mono caption, held on with tape and tilted by hand. The tilt and tape come by position from two lists in lib/projects.ts, so a row looks scattered whatever moves. Photos stay in full colour.
OSCARBernese mountain dogA print standing over the top of its card. A tile says what the thing does and what it runs on. Personal projects add a footer: the board, or what it's written in, and GitHub when the repo is public.
LUCYPit and lab mixPolls a domain-name watch service every couple of hours for newly registered look-alike domains, works out which brand in the portfolio manages each one, and emails Legal a digest with Take action and Dismiss buttons — then follows every actioned domain until it's gone.
KnobdeckESP32-S3A desk controller on a 360×360 round touchscreen you turn. It plays your music behind seven beat-reactive visualisers — and the moment a Teams call starts, the screen becomes your mic and camera as two giant buttons: red means you are on air, tap a half to toggle it.
A big print over the left edge of its panel. FEATURED in lib/projects.ts picks it, and it is left out of its group below.
Stream Deck Neo TakeoverNodeA Node daemon that owns the USB device outright and draws every pixel itself, with the Elgato software removed from the picture. Seven live pages — Claude Code sessions, Codex tasks, Spotify, stocks, weather, football, machine vitals — and a key press acts on the thing it shows.
View on GitHub →
Elgato Stream Deck NeoTetris on a dark screen, with Score and Lines beside it. It plays itself in greys until someone presses Play, then takes the arrow keys and space, and only then.
Wesley BardFor something to read, not to open.
The whole card is the link; its border takes the accent on hover.
Go →
<main className="wb wb-page"> and use the classes shown here, with the shared Nav and Footer.TOKENS on this page, or the tests fail..wb, so pages with their own look are untouched.