Hafen 1.0: One Theme, 38 Looks, Zero Font Files
Our block theme leaves the 0.x series behind. Version 1.0 turns five colour variations into a look system with 38 faces, tunes the reading column for readability and carries the hardening from a real production migration. Here is exactly what is inside and the decisions that stand behind it.
A theme release carrying the number 1.0 is a promise: this has been thought through to the end. Hafen has been running on production sites since version 0.4, from an association to a coaching platform, and every one of those installations has left its mark on the theme. Version 1.0 bundles all of it into a state we stand behind without footnotes. The biggest part of it is the look system.
From five colour variations to 38 looks
Almost every block theme offers style variations, and almost everywhere that means the same page in different colours. That was not enough for us, because the character of a website depends at least as much on type, shape and space as on the palette. The 38 looks in Hafen 1.0 therefore play across four design axes: colour, typography (font pairing and size scale), shape (corner radii from sharp-edged to pill-shaped) and density (spacing, line height, text width).
The result is eight characters with four expressions each, plus one outlier for the beach: sober and functional for service providers, warm and narrative for personal sites, loud and bold for campaigns, calm and serious for law firms and consultancies, maximally accessible, technical, playful, editorial. Switching is one click in the Site Editor, your content remains untouched, and because radii and shadows live as tokens in theme.json since 1.0, cards, buttons, images and even the blog pagination follow along consistently in every look.
Zero font files, in every single look
Here sits perhaps the most unusual decision in 1.0: all 38 variations use system font stacks. Segoe UI on Windows, San Francisco on Apple devices, Roboto on Android, carefully paired and weighted, but without a single font download. Only the default look loads the bundled Inter, as one single variable file from your own server, with no connection to Google Fonts or any other third-party server.
The gain is twofold: there is nothing to load and nothing shifts while loading, and in terms of privacy there is simply no third-party font provider to think about.
The contrast check as a build stop
Checking 38 looks for readability by hand is an illusion, so a machine checks instead. A verification tool lays each variation over theme.json, resolves all colour values and measures around 30 foreground and background pairs that actually occur in the theme against WCAG 2.1 AA. If a mandatory pair fails, the release build aborts. On its very first run the tool promptly found six contrast errors in code that had already been approved at the time, all fixed in 1.0. That is exactly what such guardians are built for.
A reading column that serves the text
The most noticeable change for existing sites: body text now runs in a 680-pixel column with an 18-pixel base font, which is roughly 68 characters per line instead of about 90 before. The typographic rule of thumb for comfortably readable lines has stood at 45 to 75 characters for decades, and practically every reading platform lands there. Post lists, feature sections and wide blocks remain untouched at 1180 pixels, and the text additionally gains a true vertical rhythm: headings bind to the paragraph that follows them instead of floating in uniform spacing.
And because reading width is also a matter of taste, it remains a setting: in the Site Editor under Styles, Layout, documented in four recommended steps from 620 to 860 pixels. The default is a recommendation, not a dogma.
The hardening from a real migration
Version 1.0 also absorbs everything that moving a grown production site from a classic theme to Hafen brought to light: a page template for fixed-width legacy content, an embed airbag against mobile layout jumps caused by old video embeds, anchor jumps that no longer disappear beneath the sticky header, and a mobile menu that carries the theme colours in dark looks as well. The complete series of measurements, with all figures and limits, is in our case study on the theme switch.
What comes next
Version 1.1 is already sketched out: complete page recipes as patterns (home, about, contact and pricing to click together), a centred header variant and further accessibility work towards the official accessibility-ready review. Anyone with requests is welcome in the support forum for the theme.
Try Hafen 1.0
In the official WordPress theme directory, free and GPLv2. Install it, browse the 38 looks in the Site Editor under Styles and find your own.
Frequently asked questions
Is Hafen really free?
Yes, completely. Hafen is available under GPLv2 in the official WordPress theme directory, with no Pro version and no upsell barriers. All 38 looks, all patterns and all templates are included in the free package.
What is a look and how do I switch it?
A look is a style variation of the theme: a coordinated package of colours, typography, corner radii and density. You switch it in the Site Editor under Styles with a single click, without anything about your content changing. Switching back is just as lossless.
Does the update to 1.0 change my existing website?
Not your content, and your chosen look stays chosen. What changes are details: the reading column is slightly narrower at 680 pixels and the base font slightly larger at 18 pixels, headings sit closer to the paragraph that follows them, forms are styled. If you prefer the old width, one value in the Site Editor under Styles, Layout brings it back.
Why is the reading column narrower now?
Because long lines are hard to read. At the old width a line held around 90 characters, while the typographic rule of thumb is 45 to 75. The new 680 pixels come to roughly 68 characters. Magazine grids and wide blocks stay at 1180 pixels, and the width remains freely adjustable, documented in four steps from 620 to 860 pixels.
