Systemone Demo

Notes on editorial neubrutalism

Tue, 03 Feb 2026 00:00:00 +0000

Editorial neubrutalism is the umbrella term Systemone’s design spec uses for its own visual grammar: oversized display type, monospace utility text, square geometry, thin ink rules, and occasional hard-offset shadows on warm paper. This post walks through the nine signatures and a few of the things that break them, mostly as a fixture for headings — this page has enough h2/h3 structure to be a realistic candidate for a future table of contents component.

A zero-build CSS pipeline for Hugo

Wed, 14 Jan 2026 00:00:00 +0000

Systemone ships hand-written plain CSS. There is no Sass, no PostCSS, no Tailwind, and no Node build dependency — resources.Concat, resources.Minify and resources.Fingerprint are the only build tooling, and Hugo is already running them.

The theme’s head.html partial assembles the final stylesheet from an ordered list of files:

{{- $cssFiles := slice "css/reset.css" "css/tokens.css" "css/base.css" "css/prose.css" "css/a11y.css" -}}
{{- $cssResources := slice -}}
{{- range $cssFiles -}}
 {{- with resources.Get . -}}
 {{- $cssResources = $cssResources | append . -}}
 {{- end -}}
{{- end -}}
{{- $css := $cssResources | resources.Concat "css/systemone.css" -}}
{{- if hugo.IsProduction -}}
 {{- $css = $css | minify | fingerprint -}}
{{- end -}}

A small generated stylesheet, built from validated design.* params, is appended last so a site’s hugo.toml can override a handful of tokens without touching the theme’s own CSS files:

About this demo

Mon, 01 Jan 0001 00:00:00 +0000

This is a standalone page — no dates, tags, or author card, per the design spec’s standalone-page recipe. It exists to exercise the theme’s prose typography at the standard 68ch reading measure.

Why this site exists

Systemone is built directly from a written design specification rather than from a moodboard. Every color, size, weight, tracking value, radius, and shadow in the theme traces back to that document, so this example site is deliberately plain: it is here to prove the type scale, the rules, and the geometry read correctly, not to demonstrate a finished editorial product.