patdubois.com / bakeoff / guide

Notes on every variation

What each site is trying to do, how it does it, and why its palette and type earn their place.

v1 / vesper

Signal

One peach accent on near-black. The type does the talking.

Direction
Typographic minimalism. One page, one accent, and interactions finished by hand: underline sweeps, a single staggered reveal, hairline link rows. Wins by what it refuses to do.
Technique
Zero images, zero JS beyond the theme toggle. The accent appears statically in exactly one place: the period after the name. Everything else earns it on interaction.
Palette
Vesper verbatim in dark (#101010, one #FFC799 peach; the mint was skipped entirely for discipline). Light is warm paper with the peach deepened to #B4661F so it holds AA contrast.
Type
Quattro 400 body at a 62ch measure, Quattro Var 650 for the restrained h1, Mono 12px uppercase for labels and handles.
Assets
None. 0 credits.
visit v1

v2 / vesper-ghostty

Cozy Terminal

The machine talks back. Type help, or just click something.

Direction
A living terminal: skippable boot sequence, neofetch-style identity card with a hand-made ASCII radio tower, then a real prompt you can type at.
Technique
Seven commands with tab completion, arrow history, clickable help words, and tappable command chips so non-terminal people are never stranded. Reduced motion renders everything instantly, cursor still.
Palette
The exact Vesper-Ghostty pastels on #101010, with strict role assignment: sage prompts, coral commands, lavender links, sand values, rose errors, peach only for the cursor and beacon. Light is a warm-paper terminal with the same roles darkened for contrast.
Type
iA Writer Mono only, every glyph. Hierarchy is weight and the pastel role system, nothing else.
Assets
None. 0 credits. The ASCII tower is hand-drawn.
visit v2

v3 / flexoki

The Broadsheet

Weekend Edition, any given Saturday: the front page of Pat Dubois. Price: nothing.

Direction
Print-editorial discipline: a real nameplate with ears, double rules, a three-column front grid with ruled rail, drop cap, pull quote, dotted-leader directory, asterism, and a -30- end mark.
Technique
Pure CSS print grammar (multicol, column rules, ::first-letter). The theme toggle is the paper's own "Switch to Day/Night Edition" box. Engravings recolor per theme with CSS filters instead of duplicate files.
Palette
Flexoki applied verbatim per its official light/dark rules; base-200 text in dark, never paper. One working accent (Flexoki red) plus blue reserved for links.
Type
IBM Plex Serif nameplate and headlines, Quattro justified body, Mono folios and kickers. Plex Serif shares DNA with Quattro, so the marriage is clean.
Assets
Two AI-generated etchings: a copperplate broadcast microphone and a steel-engraved radio tower. 66 credits.
visit v3

v4 / kanagawa dragon

Ink in Water

Ink in still water. A voice you can read.

Direction
A real-time shader painting: sumi-e ink plumes drifting almost imperceptibly behind a composed column of type. The 3D slot, spent on restraint instead of spectacle.
Technique
Raw WebGL fragment shader, no library: domain-warped noise clustered into ink bodies and filaments, rendered at half resolution for softness, dithered against banding, paused when hidden, with a damped pointer swirl. Reduced motion gets one seeded still frame.
Palette
Kanagawa Dragon exactly as shipped: near-black water, pale ink mixing blue2 and dragonYellow. Light mode inverts the density: dark ink on rice paper derived from Dragon's own oldWhite family. No Paper hexes mixed in.
Type
Quattro body, Quattro Var 600 name, Mono labels, floating on a soft scrim so the painting never fights the reading.
Assets
None; the paper grain is procedural. 0 credits.
visit v4

v5 / studio amber

The Console

Twenty years at the board. The meters still move.

Direction
The earned radio homage: a four-channel console strip whose faders navigate the page, two VU meters with real spring-damped needle physics, and an ON AIR lamp that is the theme toggle.
Technique
Hand-built inline SVG instrumentation; scroll-spy raises the active channel's fader. Needles idle at -20dB and kick on interaction. Pure simulation: no microphone, no permission prompts, and it says so on the page.
Palette
Custom studio amber: warm near-black browns, cream text, amber needle glow, ON AIR red on exactly one lamp. Light mode is the same studio at 10am. Hardware warmth, zero neon; justified in MANIFEST.
Type
Quattro body, Quattro Var nameplate, Martian Mono tracked wide for all engraved hardware labeling.
Assets
None generated; grain is an inline SVG filter. 0 credits.
visit v5

v6 / paper brutalism

Kinetic

A sixty-second script you scroll. The words are the whole set.

Direction
Type is the entire interface: a broadcast script you scrub through, full-viewport cards of words gaining weight as they cross the screen, with stage-direction cues (COLD OPEN, MIC CHECK, HARD OUT AT :60).
Technique
CSS scroll-driven animations scrub the Quattro variable weight axis 300 to 760 per word, with a rAF fallback verified in Firefox. Position maps to state, so scrubbing feels precise. Reduced motion is a finished static poster.
Palette
Paper-white brutalism with one stamp-red ink; dark mode reads as ink on paper, not a screen. Red is rationed to one word per card so every hit lands on a word that earns emphasis in speech.
Type
Quattro Var everywhere, name at weight 870 up to 18vw; Mono for the cue labels and timecode.
Assets
None. 0 credits.
visit v6

v7 / gruvbox material

The Desk

A tiny warm OS with one user. Read about.txt, then drag it somewhere better.

Direction
A small operating system that feels lived-in: about.txt, links/, building/, a radio.log that types itself out in dry one-liners, and a settings window with wallpaper picker.
Technique
A real vanilla-JS window manager: bounded pointer dragging, focus and z-order, minimize-to-dock with indicator dots, tidy on double-click, working menu-bar clock. At 390px the windows become a composed card stack.
Palette
Gruvbox Material: warm, low-chroma, terminal-culture to the bone. Dark is the #282828 desk at night; light is a genuine cream-paper desktop, not an inversion.
Type
Quattro for window content; Mono for every piece of system chrome, which is what makes it read as a real environment.
Assets
Four generated wallpapers (grain and weave, per mode), all quiet behind the windows. Roughly 55 credits across both build lanes.
visit v7

v8 / paper + riso red

The Zine

A photocopied fanzine about one guy. Issue 01. Price: free. Pass it on.

Direction
A scanned paste-up artifact: xerox grain, masking tape, a stapled mic cutout captioned "(not his microphone)", the bio as an interview, links as back-page mailing stamps.
Technique
Generated scan textures with real alpha baked in Python (unpremultiplied from white for the daylight scan, from black for the midnight copy) so layering survives both themes without blend-mode surprises. Focal chaos lives on the cover; the inner sheets stay calm.
Palette
Cream stock, toner black, one riso red. Dark mode is a midnight photocopy: off-white toner on black stock, built from separate dark textures rather than CSS inversion.
Type
Redaction for display, the one adventurous pick, on the one site about degraded print; typewriter Mono for body. No Quattro: the zine was typed and pasted, not typeset.
Assets
Fifteen texture files: paper stocks, tape, marker, torn edges, copier streaks, halftone mic. 165 credits, the intended spender.
visit v8

v9 / everforest

The Waveform

The bio, spoken: this page draws its own words as a voiceprint.

Direction
The dictation-pilled site: a generative canvas mural computed from the page's actual copy. Same words, same wave, every visit; edit the bio and the artwork changes with it.
Technique
The copy is FNV-1a hashed into a displayed seed; word lengths set amplitude, character codes set fine texture, punctuation carves the breaths. Hovering a paragraph brightens exactly its segment of the wave; the mapping is real, not decorative.
Palette
Everforest: warm forest-floor greens on soft charcoal, sand reserved for meaning (sentence marks, peaks, the active-paragraph highlight). Light on official Everforest paper values.
Type
Quattro body, Quattro Var 600 headings, lowercase tracked Mono for the honest spec labels: input: voice / render: this page's text.
Assets
None. 0 credits. The canvas is the art.
visit v9

v10 / kanagawa paper

The Picture

Twenty years in radio, shown not told: the studio after midnight, still rolling.

Direction
The one with a film: a dim broadcast studio at night, VU needles trembling, dust in one practical light, reels turning. Night plays the video; daylight hangs the poster as a framed print. The asymmetry is the design.
Technique
A generated still fed image-to-video (cheap draft first, one quality final), made seamlessly loopable in ffmpeg by crossfading the head over the tail. 395KB, muted, never loaded in light mode, reduced motion, or data-saver.
Palette
Kanagawa Paper both ways: Ink's amber-on-ink grade matches the footage so the scrim dissolves the film into the page; Canvas treats daylight as paper with a warm regrade of the same frame.
Type
Newsreader display and italic deck, Quattro body, wide-tracked Mono for the credits-style labels. Ends with "Thanks for listening."
Assets
The loop, two graded posters. 946 credits, the planned spend.
visit v10