Css on Liftoff

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.

On design tokens

Sat, 02 May 2026 00:00:00 +0000

Liftoff exposes its palette, spacing scale, and typography as CSS custom properties on :root. Consumers can theme the site without forking the theme.

Override pattern

Drop a small CSS file into your site’s assets/css/ and import it after the theme’s bundle.

 css
 
 
:root {
 --color-accent: #ff7a59;
 --color-bg: #0d0a0a;
}

Light mode is opt-in by setting data-theme="light" on <html>. The built-in toggle remembers the user’s choice in localStorage with prefers-color-scheme as the fallback.