How this site is built.

The stack

This is a static site. Plain HTML, one custom stylesheet, one custom JavaScript file, and Tailwind via CDN for utility classes. There is no build step, no framework, and no runtime. Pages are served directly by GitHub Pages out of the repository.

That sounds like a constraint and is. It's also the point. The simplest stack that produces the result is also the one most likely to still load in ten years. Maggie Appleton's Garden History explicitly recommends static-site generators like Astro, Eleventy, Hugo, or Jekyll for content-heavy personal sites; this goes one step further and uses nothing.

Typography

The reading body is set in EB Garamond at 19.5 px with a 1.82 line height. UI, navigation, and metadata use Inter. Dates and code use JetBrains Mono. All three are served from Google Fonts with font-display: swap.

EB Garamond is here because it pairs warm authorship with very good readability at body sizes. The aspirational upgrade is Canela Text (the face Maggie Appleton uses); that's a paid license decision for another day. The font stack is tolerant — if EB Garamond fails to load you get Iowan Old Style, then Georgia, then Times.

Color, contrast, and motion

The palette is paper-toned. Background #F9F6F0, primary text #1A1714, deep teal accent #115E59. The teal-on-paper measures at roughly 7.4:1 contrast, which clears WCAG AA for both normal and large text. Every body/link/metadata pair was checked.

A subtle dark mode is shipped for night reading. It is a token swap — the components reference CSS variables only, so the same components render correctly in either theme. Your preference is remembered in localStorage and respects your operating system's prefers-color-scheme on first visit.

Motion is restrained. Default transitions are 150–200 ms with a single easing curve. Every animation respects prefers-reduced-motion; transforms collapse to instant, opacity changes stay. There is no parallax, no horizontal-scrolling reading, no scroll-jacking.

Accessibility commitments

A skip-to-content link is the first focusable element on every page. The nav uses a <nav aria-label="Primary"> landmark. The reading-progress bar exposes role="progressbar" with live aria-valuenow. Interactive widgets in essays use aria-live="polite" on metric readouts. The command palette is fully keyboard-driven — open with ⌘K, navigate with arrows, run with Enter, dismiss with Escape.

The reading measure is capped at 65 ch, which sits comfortably inside Baymard's 50–75 character readability range. Below the 640 px breakpoint the prose drops to 18 px with a slightly tighter leading.

Performance

The targets are the public Core Web Vitals: LCP within 2.5 s, INP under 200 ms, CLS under 0.1, all at the 75th percentile. Above-the-fold images load eagerly; everything below uses loading="lazy" with decoding="async". Theme scripts are deferred. The hand-drawn essay diagrams are JPEGs in the 250–300 KB range; converting them to WebP/AVIF is the next optimization target.

Credits and inspirations

This redesign owes specific debts to specific writers and designers. Most directly:

• Maggie Appleton — for the garden metaphor and the idea that a writer's site can be organized around kinds of thinking, not generic pages.
• Works in Progress — for proof that an independent publication can feel like a real magazine.
• Josh W. Comeau — for showing how interactive components can live inside long-form without competing with the text.
• Craig Mod — for the case that running your own site is the only way to keep control of speed, design, and archive.
• Robin Sloan — for a literary index that reads like a small private library.
• Gwern Branwen — for sidenotes, collapsibles, and the conviction that depth is its own affordance.
• Stripe Press — for the reminder that an object-driven moment of awe, used sparingly, earns its keep.

The starting design language was a private mock built around those references. The detailed component CSS — pull quotes, framework notes, the command palette modal, the essay-card lift — descends from that mock.

License

Prose on this site is © Varun Varia and licensed for non-commercial reuse with attribution (CC BY 4.0). Site code (HTML/CSS/JS in this repository) is MIT. Hand-drawn figures are © Varun Varia; if you'd like to use one, just ask.

Changelog

• 27 May 2026 — Full redesign. Move from the Massively dark template to this warm editorial system. Add Notes, Colophon, RSS, command palette, and a dark-mode token swap. Migrate the LLM Inference essay into the new system.
• 1 May 2026 — Publish Why You Can't Serve LLMs Like Regular Models (And How to Fix It).
• April 2020 — Earliest posts on a Massively HTML5 UP base. Preserved in git history, no longer surfaced.