Colophon
The system.
This site is an instrument, not a fixed picture. Every colour below is derived from whatever background you choose — one ink at stepped opacities, accents that hold their contrast — and everything moves on a single, small motion vocabulary. This page renders in that system, so what you see is the real thing. Open the settings button in the bottom-right and change the background — this page re-derives with it.
Colour — adaptive ink + accent
Ink ramp — one colour, stepped by opacity
- ink-1 Titles, names
- ink-2 List-item titles
- ink-3 Body prose
- ink-4 Secondary text, links
- ink-5 Metadata, dates
Accent
- Accent · strong Hover, highlights, focus ring
- Accent · base Labels, filled buttons, pills
- Sage Garden reading-page identity
- Aa On-accent Text on a filled accent, solved per theme
Stage colours — hue-stable, contrast-solved
- Seedling Just planted
- Budding Taking shape
- Evergreen Settled, evergreen
These identify a note's growth stage, so the hue is held constant everywhere — an evergreen note reads teal on every background. Hue-stable is not untouched: in the communal garden the colour is the only thing marking a plot's stage, so each runs through the same hue-preserving solver the accents use and is blended toward the ink exactly as far as 3:1 requires. The chips above are the derived colours, live; the mono values are the nominal ones the solver starts from — identical on the dark surfaces, deepened on bone.
Background swatches — the configurator set
- Warm black · default #171512
- Ink #0c0b09
- Midnight #0f141c
- Bone #f7f4ec
- White #ffffff
- Oat #e9e6db
- Rust #9f3e1d
- Cobalt #1d57b4
Hairlines
- Section rule
- Row divider
- Column rail
- Control edge
Ink family is chosen by measured contrast, not a luminance threshold. The ramp is a floor: any step that would fail AA against a lighter or more saturated background is raised at runtime, never lowered — so the design renders exactly as drawn wherever it already passes.
Typography
- The systems the pixels grow from. Mozilla Text Base — the default reading + instrument voice
- I am because we are. Newsreader Emphasis + pull quotes; the “Serif” reading voice (chrome stays Mozilla)
- 01 / 05 · WORK · MAY 2026 IBM Plex Mono Counters, dates, tags; the “Mono” reading voice
- Pick your own typeface. Instrument Sans The “Sans” reading voice
- Readable by design. OpenDyslexic The “Dyslexic” accessibility voice — the one full swap
Scale — seven fluid steps — resize the window and the ramp breathes
- Aa text-masthead The one page-title size, every masthead
- Aa text-subhead The next-study card title, close quotes
- Aa text-reading Prose chapter headings + pull quotes
- Aa text-body Body copy — the rule, prose included
- Aa text-secondary Descriptions, fact values, prose chapter headings
- Aa text-meta All labels, mono readouts, dates, tags, pills, chrome, rail
- Aa text-label Configurator field labels and values
Hierarchy is weight (400 / 500 / 600) and ink opacity — never
size. Each role owns one step; the minimum is the design as drawn, and
every step interpolates gently (about 6%) between a 320px and a 1240px
viewport — the Utopia method, clamp() under the hood. The
Text-size slider multiplies the root on top of the ramp, so text
genuinely reflows inside the fixed column — its readout shows the
resolved body size, live.
Structure & radii
- Column
- 720px max, centred
- Gutter
- 28px inner
- Rails
- 1px hairline, left + right
Fluid space — the 4px grid, paired to the type ramp
- space-1
- space-2
- space-3
- space-4
- space-5
- space-6
- space-8
- space-9
- space-10
- space-11
- space-12
- space-13
- space-16
Structural rhythm — section padding, stacked margins, gaps — draws from these steps; each grows by the same factor as the body step. The column itself (720px max, 28px gutter) stays fixed so the measure and flush-image alignment never drift.
Radii
- sm Buttons, inputs
- md Swatches, options
- pill Filter pills, switch
- circle Settings icon button
Motion — three curves, five durations
Easing — hover a card to feel it
- ease-glide cubic-bezier(0.16, 1, 0.3, 1) The house curve — anything that travels
- ease-spring cubic-bezier(0.34, 1.4, 0.64, 1) One small overshoot — moments that feel alive
- ease-exit cubic-bezier(0.4, 0, 1, 1) Leaving, or reacting under the finger
Duration
- dur-tap 0.12s Press feedback
- dur-fast 0.2s Hover, small flips
- dur-mid 0.36s Short moves
- dur-slow 0.6s Panels, entrances
- dur-reveal 0.9s Image resolves
The rule of thumb: the further something travels, the longer and softer
it should take to stop. One global switch honours prefers-reduced-motion
and takes it all back out — a new effect is covered by default.
Components
- Configurator Background, noise, typeface, text size, cursor companion — live, persisted to the device.
- Work card One shared card: cover → title → Role / Timeline / Year. Home carousel + case-study “next study”.
- Garden filter Stage pills with a single pebble that glides between them; the note list filters underneath.
- Communal garden A 96-plot bed — one seed per visitor, KV-backed, hidden on phones.
- Reading rail A left-margin timeline: a bidirectional progress line and a lit dot per section.
- Image lightbox Case-study images open full-screen; click to zoom toward the point, drag to pan.
- Cursor companion A tag that trails the pointer and types context quips — toggleable, fine-pointer only.
Principles
- Colour is derived, in one place — ink, accents, on-accent text, hairlines and washes are solved at runtime from the active background so everything clears WCAG AA.
- One body step on the home page (--text-body). Hierarchy is weight and ink opacity, never scale — every size is one of seven fluid steps that interpolate gently between a 320px and a 1240px viewport.
- One motion vocabulary — three curves, five durations. Animate transform / opacity / filter, never a layout property per frame.
- The bounded 720px column is law: rules stay inside the rails, images sit flush to the edges.
- Spacing follows a fluid 4px grid — structural rhythm uses the --space- steps, paired to the type ramp so space and type grow together.
- Reduced motion, text size, a dyslexic face, and an adaptive palette are controls, not afterthoughts.
The full written spec — the theming engine, the motion system, the file map — lives alongside the code, and this page is generated from the same tokens the site itself renders with.