The design system for alanwatts.org

Sumi Rising

One sheet of washi, read left to right. At the left edge the ink is still wet: thin, blue, just written, this is what AWO is making now. At the right edge the same ink went down sixty years ago: dried warm-black, soaked into aged fiber, and holding all the color of its era. The site is the ink's lifetime. You never leave the paper.

Modern → Vintage Two islands, one inversion 4:3 windows Static · Cloudflare Pages
01

The spectrum wet ink to dried ink

Each section pins one value of the single root variable --ink-age (0 to 1). That one number derives the ground colour, the ink hue, the grain, the frame dress, the type mix, and how much colour is allowed in. Nothing ever rests mid-gradient, so any page paints instantly legible as the modern side or the archive side.

--ink-age 0.5
About
the fulcrum · shows both polarities · leads the nav
--ink-age 0.0
Course
Offerings
wet pole · cold blue-black surround · brightest content
--ink-age 0.45
Collections
first shadow · warm dark · letterpress plates → .com
--ink-age 0.7
Story ·
Timeline
light ground, most frequent dark frames, frame after frame
--ink-age 1.0
Film
Archive
the dried pole · warm · inverted · colour forward
--ink-age 0.5
Support
neutral, like About · lives in the footer of every page
← wet · thin · blue · nowdried · warm · black · then →
02

The inversion how ink is looked at

A fresh sheet is a bright page on a dark writing desk. Old ink is held up dark against backlit paper. So Courses is a light island on a dark surround, and the Film Archive is the exact inverse, dark islands on a glowing light surround. The flip is the visitor's cue that they have crossed into the archive world, and nobody has to be told.

Course Offerings · wet pole · light on dark

The Way of Zen

the current course, cold ink blooming to colour on touch
6 SESSIONS · 4:20:00 · SOUNDS TRUE
Enroll at Sounds True →
Film Archive · dried pole · dark on light
AW · 1959 · KQED · R014

Eastern Wisdom & Modern Life

restored · full colour · 28 min · reel 014

Same site. The ink tells you which side you are on.

03

The 4:3 window frame weight is the ruler

One shape everywhere, 4:3 (the anchor is real: Watts's 1959 KQED broadcasts were 4:3). No widescreen on .org. The frame gets heavier and warmer as the ink dries, from a wet hairline to a 10px projector gate.

Wet0.5px hairline + ticks
Balanced1px rule, cream mat
Letterpressdouble rule plate
Slide-mountdark block, hairline gap
Gate10px dried-ink border
04

The paper & the ink ten inherited, three new

Pure black and pure white appear nowhere. The modern dark is always cold (#0a1428), the vintage dark is always warm (#241a10), and --sumi is the constant structural black between them. Three tokens are added: the compromised cream, aged paper, and dried ink.

Washi Cream
#F1E9D7 · the compromise
Washi Warm
#FBF9F3 · white pole
Washi
#F6F3EC · substrate
Washi Deep
#EBE7DE · Story ground
Washi Aged
#E7DCC0 · archive light
Ink Thin
#1A2848 · blue when thin
Sumi Ink
#0A1428 · cold dark
Sumi
#1A1814 · structural
Ink Dry
#241A10 · warm dark
Vermillion
#A3331A · accession
Gold
#B8954B · thread
Sunset
#AB713A · warmth
05

Three voices no new typefaces

The ink voice
IM Fell English

A 1600s humanist serif. Its share grows with age: an accent on the modern side, the owner of every display head and dropcap in the archive.

modern · title + italic accent only
archive · display, running heads, dropcap, ink-wobble
The reading voice
Spectral holds the body at a constant 17px, the one steady thing across sixty years.

Weight and measure shift by age: airy 300 on the modern side, settled 400 with a tighter measure in the archive.

modern · 300, measure 66ch, leading 1.7
archive · 400, measure 54ch, leading 1.55
The registrar
IBM Plex Mono · AW·1959·R014

Nav, labels, the support row, accession plates. The same face never ages: it is the thread sewing the whole spectrum together, in two costumes.

modern · 300, quiet, sentence case
archive · 400, tracked caps, vermillion
06

The ink remembers the signature moment

Every page opens with the fresh signature in the header and closes with the identical signature, sixty years browned, in the footer. A life passing in one scroll, for the cost of two CSS declarations. On the home page the hero goes further: a portrait of Alan bleeds into blank washi under your cursor, and you draw him out of the paper with your own hand.

Header · wet · just written
Footer · dried · sixty years on