Colophon
A note on how this site is made — the tools, the type, the colour system, and the ideas that shaped its structure. Everything here is deliberate.
Technology
SvelteKit
Built with SvelteKit in static-prerender mode — every page is compiled to plain HTML, CSS, and a thin layer of JavaScript at build time. No server runtime, no hydration overhead for content pages. The site ships as a bundle of static files deployable anywhere.
@chenglou/pretext
Long-form essays and articles use Pretext (v0.0.8), a true obstacle-aware text reflow engine. Unlike CSS floats, Pretext measures each line individually and computes exact offsets so text wraps tightly around figures — no gaps, no overlaps, no manual break points.
Hand-written CSS
No utility framework, no CSS-in-JS. The entire visual system is defined in a single set of CSS custom properties and scoped component styles. Design tokens for type, spacing, and colour are declared once and referenced everywhere — easy to audit, easy to change.
Static Deployment
The prerendered output is served as static files. No databases, no API calls, no tracking scripts. The entire site loads in a single request per route, with fonts loaded asynchronously via Google Fonts.
Typography
Inter
Interface → Headings, navigation, UI labels
Designed by Rasmus Andersson. A neutral grotesque with an open aperture and tall x-height — engineered for screen legibility at every size. Loaded at weights 400, 500, 600, and 700.
The quick brown fox jumps over the lazy dog.
Newsreader
Reading → Body text, essays, prose
Designed by Production Type. A contemporary serif calibrated for long-form reading on screens. Its optical sizing axis adjusts stroke contrast at different sizes. Loaded with italic variants for emphasis.
The quick brown fox jumps over the lazy dog.
JetBrains Mono
Detail → Code, metadata, tags, labels
Designed by Philipp Nurullin for JetBrains. A monospaced typeface with increased x-height for better code readability. Used for technical annotations, timestamps, and small-caps-style labels throughout.
The quick brown fox jumps over the lazy dog.
Type Scale
A modular scale based on the 1.250 (Major Third) ratio.
Each step uses clamp() for fluid responsiveness between mobile
and desktop without media-query breakpoints.
--step-5 Heading 1--step-4 Heading 2--step-3 Heading 3--step-2 Heading 4--step-1 Lead paragraph--step-0 Body text--step--1 Caption / codeColour
The palette is intentionally restrained — warm neutrals for structure, a single accent of cobalt blue for interaction. Both light and dark themes are defined via CSS custom properties and switch automatically based on the visitor's operating-system preference.
Light Theme
Dark Theme
Spacing & Rhythm
Vertical rhythm is governed by a fixed spacing scale — nine tokens from --space-3xs to --space-4xl. This ensures consistent
breathing room between every element without ad-hoc pixel values.
--space-3xs 0.25rem--space-2xs 0.5rem--space-xs 0.75rem--space-s 1rem--space-m 1.5rem--space-l 2rem--space-xl 3rem--space-2xl 4rem--space-3xl 6rem--space-4xl 8remInspirations
aman.bh
A reference for editorial restraint — confident typography, generous whitespace, and a structure that lets content breathe without decoration.
wholeearth.info
An inspiration for the intersection of archive and design — the idea that a personal site can be both a portfolio and a living library.
forensic-architecture.org
A model for how research and spatial thinking can be communicated on the web — rigorous, visually precise, and unafraid of complexity.
@chenglou/pretext
The text-layout engine itself, and its demo at pretext-demos — proof that the web can do better than
CSS floats for long-form reading.
Standards & Accessibility
Semantic HTML
Pages use proper landmark elements (header, nav, main, footer) and heading
hierarchies are kept strictly ordered for screen-reader navigation.
Reduced Motion
All animations and transitions respect the prefers-reduced-motion media query — visitors who disable
motion see a static experience with no loss of information.
Focus Visibility
Keyboard navigation is supported with a visible focus ring
(:focus-visible) using a 2-pixel accent outline at
2-pixel offset.
Colour Contrast
Text and background combinations are tested for WCAG AA compliance in both light and dark themes. The accent colour is never used as the sole indicator of state.
Fluid Layout
No fixed pixel widths. Typography and spacing scale fluidly using clamp() and viewport-relative units. The layout adapts
from 320px mobile to ultrawide displays without breakpoints.
Open Source
The codebase is open. SvelteKit and Pretext are both MIT-licensed. Fonts are licensed via Google Fonts (SIL OFL). No proprietary dependencies.