Design on Liftoff

Every markdown element, on one page

Fri, 10 Jul 2026 00:00:00 +0000

This article exists to be ugly on purpose. It runs through every markdown element the theme styles, so you can check typography, spacing, and dark-mode contrast in one place. If something looks wrong here, it will look wrong in your content too.

Every section shows the source first, then the result.

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.

Hello, Liftoff

Wed, 15 Apr 2026 00:00:00 +0000

I kept rebuilding the same scaffold for every small product page: a hero with a code block, OS-specific install tabs, a feature grid, a docs section, and a closing CTA. Liftoff bundles those pieces into one Hugo theme with sensible dark-first defaults.

What’s in the first cut

Hero partial driven by front matter
OS tabs as a CSS-light shortcode
Code blocks with copy buttons
Feature, integrations, pricing, testimonial, and CTA shortcodes
Docs layout with card index, on-this-page TOC, and prev/next navigation
Blog and showcase sections

Where it’s going

Internationalisation strings ship for German and English. More languages are a i18n/<lang>.yaml file away.