revealed.design

typography · 01

The weight ladder.

The site runs on Gill Sans MT Pro in eight cuts—Light, Light Italic, Book, Book Italic, Medium, Medium Italic, Bold, Bold Italic, Heavy. Headings lean on 300 and 500; body sits on 400; emphasis escalates to 700 only when a line has earned it. No synthetic bolds, no faux italics, no fallback stacks masquerading as Gill. When a weight isn't in the library, the answer is to write the line shorter, not to fake the weight.

The license is a proper Monotype Web Font License—twenty-one styles purchased, nine deployed. The remaining twelve are held in reserve for a print one-sheet that may or may not exist.

typography · 02

The two-typeface rule.

Gill Sans MT does the talking. Inconsolata does the pointing. Inconsolata appears only inside the @ sign, the . in revealed.design, keyboard captions like [SPACE], and timestamp labels. It does not, under any circumstance, render prose. If you see a sentence in Inconsolata on this site, that is a bug and the bug predates this document.

typography · 03

Tracking, leading, the boring math.

Display sizes sit at -0.01em tracking; body sits at +0.005em; uppercase labels widen to 0.22em and keep climbing up to 0.36em for section heads. Leading is 1.15 for credits (two-line centered cadence), 1.55 for prose. These numbers are not negotiable within a session; they are negotiated once per year.

palette · 01

Four colors, not five.

#2C2C2C graphite—primary surface. Slightly above absolute black so film grain can live in it.

#F5F0E8 cream—text, the one warm note. Not white. Never white. White implodes any photograph it touches.

#1E5FA8 bitossi—secondary accent, sampled from the Rimini Blu glaze on an Aldo Londi vase that lives on the shelf. Reserved for hyperlinks, section-sub labels, and one-word emphasis.

#E8460A flame—primary accent. Reserved for state changes, dot separators, section heads, and the SAL900X eye. Used sparingly on purpose; the moment it becomes common it stops meaning anything.

halftone · 01

The AM clustered-dot screen.

Keybind H toggles a full-page amplitude-modulated halftone. The screen is an 8×8 threshold matrix, two centers per tile—one at n/4, one at 3n/4. Cell size defaults to 16px. At rest it looks like a thumbnail in a Sunday paper.

Shift-H enters escalate mode: cell size scales with each slot's swell curve so that the center (plateaued) image breaks down into Lichtenstein-scale benday dots while the off-axis thumbnails stay tight and legible. The curve is the same cubic-bezier used for slot scale, taken to the 4.5 power so the dots only blow up inside the last 15% of the plateau.

riso duotone · 01

Two-color process, without a press.

Keybind I (and Shift-I for the inverted plate) runs the image through a simulated riso pull. Shadows hit on the graphite plate; highlights pass on the flame plate. The pass is a per-pixel multiply blend in canvas context, not a CSS filter, because CSS filters compress a narrow midtone band and a proper duotone needs the full range.

Rejected palette: Bitossi + Flame. The blue's R-channel sits at 0.12, which annihilates the flame in multiply and turns every photograph into a blue mud. Some duotones do not work and the only honest response is to not ship them.

motion · 01

The ILM swell.

The conveyor belt in photoplate.html uses an asymmetric cubic-bezier—0.32, 0, 0.16, 1—in and out of a short plateau at center. The plateau is deliberate. Without it the image never holds still long enough to reward looking at it.

All motion respects prefers-reduced-motion. The swell collapses to a cross-fade; the ambient particles freeze in place; the halftone dither stays static. Nobody on this site is going to get a headache.

infrastructure · 01

The service worker.

Every GLB, every WOFF2, every custom cursor PNG is cache-first. The HTML is network-first so edits propagate. sw.js versions bump on every shipped change (revealed-v{N}), and old caches are purged on activate. This is the unsung department head of the whole production—she never gets a billing card but the photoplate loads in 140ms on a cold cache and 30ms on a warm one because of her.

photography · 01

What counts as a photograph.

A frame earns a slot if it answers one of three questions: what does the light do here, what does the object refuse to do, or who else was in the room. Frames that only document an event do not go in. The conveyor is not a camera roll; it is a curated edit.

3d viewer · 01

Three.js r128 and the cursor dance.

The viewer is a GLB loader wrapped in a minimal orbit control. Every cursor state—hover, grab, grabbing—is a pre-rendered 32px PNG with a 64px hi-dpi fallback. Browsers can't be trusted to scale SVG cursors on all platforms, so the set is baked, quantized, and shipped. The cursor set also includes a light variant for cream-background frames, swapped via data-attribute on the slot.

form & footer · 01

Negative space is expensive.

The biggest line item in the design budget is the white space nobody talks about. The contact page breathes at a 12vh vertical rhythm and refuses to compress even on 13-inch laptops, which is why the ticker is pinned to the viewport floor. Breathing room earns trust; dense layouts ask the reader to prove they're worthy of the information. This is not that kind of site.

for anyone who read the source.

fine print · 01

No cookies are set. No third-party scripts are loaded. No analytics are transmitted. The only network calls this site makes are to its own edge and to a press-kit function at /.netlify/functions/press-kit, which logs nothing beyond a counter.

Gill Sans MT Pro is licensed under the Monotype Web Font License; redistribution of the WOFF2 files is prohibited. Inconsolata is under the SIL Open Font License. Three.js r128 is under the MIT License. All photography on the site is the property of Steven.

Any resemblance to HAL 9000 is affectionate and deliberate. Warner Bros. owns the rest.

Typeset in Gill Sans MT Pro at weights 300, 400, 500 and 700.

Monospace passages in Inconsolata.

Set on a 12-column baseline grid with a 12vh vertical rhythm.

Built in plain HTML, plain CSS, plain JavaScript. No framework, no build step, no transpiler.

A reconstruction across three periods — 1998 DOS-edutainment register, 2012 iMac chrome, 2026 build. The eras are quoted, not lived.

Written in a small room over several evenings.

Deployed by git push.