Systemone Demo
00 / Article

A zero-build CSS pipeline for Hugo

How Systemone assembles hand-written CSS with Hugo Pipes alone, no Node build step required.

css hugo build

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:

[design]
  appearance = "auto"
  lime = "#d4ff3f"
  pink = "#ee5ba6"
  containerMax = "1160px"

Why this matters

A user should be able to clone the theme, point Hugo at it, and read the site without running npm install first. That constraint shapes everything else: no webfonts, no icon font, and — in Stage 1 at least — no JavaScript at all.

Authoring remains build-tool-free CSS. A user can understand and edit the theme without package installation.

— docs/DESIGN-SYSTEM.md, §7

Inline code like resources.Concat reads the same monospace stack as fenced blocks, just smaller and boxed in a thin ink line rather than a full terminal panel.