Colophon

Source Serif 4, drawn by Frank Grießhammer for Adobe, sets every Latin letter on the site. Reading text is its text cut at 17 pixels; the name and the page titles use its display cut, and tables and labels its caption cut, which is drawn for small sizes. Weight 400 throughout, with a true italic and true small caps; figures are old-style in prose and lining in tables.

李, and the characters of the cellar book’s title slip and folios, are set in Shippori Mincho Medium by FONTDASU. Each face is cut down to the characters the site uses and served from the site itself. A first visit to the home page loads 85.6 KB of fonts.

Eight colours, each named for a material: paper, a washi a little greyer than white; kinari, unbleached cloth, under a highlighted row; sumi ink at full strength and at two dilutions; keisen, the colour of a ruled line; walnut; and ai, the indigo of 藍.

Walnut marks keyboard focus and the focused row of the index. Indigo marks a link under the pointer and the title of a highlighted row. Neither appears anywhere else in the stylesheet. Night is a separate palette, lacquer black with paper-coloured ink, not an inversion of the day. Every colour is flat colour, with no blends and no transparency. The cellar book’s indigo cover is dyed paper, an object’s material rather than a colour of the page.

A margin column 7 rem wide holds section names and metadata, and the text column stops at 62 characters. On a wide screen the right third is left empty; on the home page the ink is written there. Below 1080 pixels the margin narrows, and below 720 the page becomes one column with each margin note set above what it labels.

The vertical spaces are uneven on purpose: 136 pixels before the index and before the contact lines, 84 elsewhere, 52 before the footer.

The ink is written once per visit, over about six seconds, and then stops. The cellar book moves only when the reader turns it. The listening room changes only when its owner plays something. Navigation between pages crossfades where the browser supports it, with 李 held still.

Nothing moves on scroll. With reduced motion set, the ink appears finished and the crossfade is off.

Static HTML made with Vite, and no framework. Every page reads in full without JavaScript; the scripts add the ink, the theme word, the cellar book and the room’s line about what is playing. The site is hosted on Cloudflare Pages, and one function at the edge fills the listening room’s title block. The case-study figures are drawn at build time from the projects’ own data and code; nothing in them is illustrated unless its note says so.

Measured on 7 October 2026 with Lighthouse, on its mobile and desktop settings: the home page, this page and the page for a missing address each score 100 for performance, accessibility, best practices and SEO, with no layout shift. A first visit to the home page transfers 218 KB, most of it fonts and the atlas the ink is written from; this page transfers 97 KB.

The cellar is a thread-bound book of the bottles Michael keeps, with one line on each, drawn as a lit object from a reader’s seat. It opens and turns only when the reader turns it; its leaves are simulated as paper that bends and does not stretch, and its text is rendered from the page’s own text, which can be read in full under “All leaves on one page”.

The listening room is a measured drawing of Michael’s speakers, with what they are playing written into the title block. Dimensions the makers publish are drawn as published, and anything not yet measured is drawn as a phantom line and says so in the schedule. The Spotify mark in its credit line is the only logo on the site; Spotify’s terms require it beside anything read from Spotify.

• The calligraphy: 先, 後 and 甜 by Mi Fu, from his letters including 惠柑帖 and 丹陽帖; 苦 and the signature 李 by Dong Qichang. Each character is a cleaned copy of the museum’s image, levels and stray marks only, with no stroke moved or redrawn.
• 宋米芾尺牘 卷。國立故宮博物院，台北，CC BY 4.0 @ www.npm.gov.tw
• 明董其昌書七言律詩 冊。國立故宮博物院，台北，CC BY 4.0 @ www.npm.gov.tw
• 明董其昌論畫 冊。國立故宮博物院，台北，CC BY 4.0 @ www.npm.gov.tw
• The AccessKit figure stands on MediaPipe’s canonical face model, licensed under the Apache License 2.0.
• The images are licensed under CC BY 4.0. Source Serif 4 and Shippori Mincho are licensed under the SIL Open Font License.

The previous version of this site had a three-dimensional skull, two bands of words that scrolled sideways without end, a custom cursor and counters that counted up to their numbers. A basin of still water that took a drop now and then was designed for the home page and not built.