Design Notes on Liftoff

Icons without a build step

Fri, 12 Jun 2026 00:00:00 +0000

Icon fonts ship every glyph to every visitor. Sprite sheets need a build step and a naming convention nobody remembers. Liftoff takes a third route: it fetches each icon from the Iconify API while Hugo builds, and inlines the SVG.

 go-html-template
 
{{ partial "icon.html" "simple-icons:codeberg" }}

Any set on Iconify works, addressed as set:name. A bare name falls back to Material Design Icons, so check and mdi:check are the same icon.

A performance budget you can actually keep

Fri, 15 May 2026 00:00:00 +0000

A performance budget only works if it is short enough to remember. Three numbers are enough for a content site.

Budget	Target	What breaks it
Requests per page	Under 10	Web fonts, analytics
CSS	Under 30 kB	Utility frameworks
JavaScript	Under 10 kB	Anything with a build

Liftoff spends its JavaScript on three things: the theme toggle, the copy buttons on code blocks, and the blueprint filter. All three degrade to something usable when scripting is off, which is the only reason they are allowed to exist at all.

Dark mode that respects the system

Fri, 08 May 2026 00:00:00 +0000

A theme toggle that defaults to dark for everyone is a preference disguised as a feature. Liftoff reads prefers-color-scheme first, and only writes to localStorage once someone actually picks a scheme.

 js
 
 
const stored = localStorage.getItem("liftoff.theme");
const system = matchMedia("(prefers-color-scheme: light)").matches;

That ordering matters. A visitor whose system is light gets a light page on first load, without a flash of dark. A visitor who then picks dark keeps dark, even if their system changes later, because an explicit choice outranks an inferred one.