Systemone

Systemone is an editorial neubrutalist Hugo theme built around oversized, tightly tracked display type, monospace utility text, square geometry, thin ink rules, and hard zero-blur offset shadows on warm paper with near-black ink. It is authored by zetxek (published on GitHub) and ships as hand-written plain CSS with no Sass, PostCSS, Tailwind, or Node build step, plus zero runtime dependencies, no webfonts, no icon fonts, and no JavaScript required to read the site.

What is Systemone?

Systemone is a Hugo theme that applies an editorial neubrutalist visual language to a static Hugo site, taking Hugo content and config as input and outputting styled HTML pages through Hugo's templates. It runs wherever Hugo runs and installs either as a Hugo module (github.com/zetxek/systemone added to module.imports in hugo.toml) or as a Git submodule under themes/systemone with theme = "systemone". No npm install is needed. A working exampleSite/ is included, runnable with hugo server --source exampleSite --themesDir ../... A live demo exists at systemone-demo.vercel.app.

Key Features

• Hugo-native, no build step — installed as a Hugo module or Git submodule; ships zero runtime dependencies and no Node/npm pipeline.
• Plain hand-written CSS — no Sass, PostCSS, Tailwind, or other preprocessors, and no webfonts or icon fonts.
• Full dark appearance — an "ink paper" inversion rather than a dimmed light mode; every text pair is verified against WCAG AA in both appearances.
• Three appearance controls — a header button cycling auto → light → dark persisted in localStorage, OS prefers-color-scheme following by default, or a site-wide pin via design.appearance.
• Progressive enhancement — with JavaScript disabled the toggle button is absent rather than dead, the site follows the OS, and there is no flash of the wrong appearance on load.
• Templates included — home, single, list, 404, taxonomy, and term templates plus RSS.
• Params API — design.appearance (auto/light/dark), design.prose (sans/mono), design.ornaments, design.lime (#d4ff3f), design.pink (#ee5ba6), design.containerMax (1160px default), features.appearanceToggle, features.copyCode, and features.postTOC.
• Documented design system — docs/DESIGN-SYSTEM.md is the source of truth for every colour, size, weight, tracking, leading, radius, border, and shadow token.

Who is it for?

• Hugo site owners wanting a distinctive look: apply a neubrutalist editorial theme without adopting a Node or Tailwind toolchain.
• Writers and bloggers: publish articles with oversized display headings and monospace utility text through Hugo's single and list templates.
• Performance-focused developers: deploy a site with no webfonts, no icon fonts, and no JavaScript dependency for reading content.
• Accessibility-conscious teams: rely on WCAG AA-verified text pairs in both light and dark appearances.

Use cases

• Static blog or editorial site: build home, article, list, taxonomy, and 404 pages on Hugo with the shipped templates and RSS feed.
• Dual-appearance publishing: let readers cycle auto/light/dark from the header while defaulting to their OS preference, or pin one appearance site-wide.
• Accent customization: override design.lime and design.pink to rebrand the two expressive accents, keeping in mind custom overrides sit outside the certified default contrast contract until independently rechecked.

Status and limitations

The theme is at Stage 2: the repository skeleton, full token set, base CSS, page templates, RSS, and the appearance system with its toggle are working. Still to come per docs/DESIGN-SYSTEM.md are post cards, table of contents, code/terminal components, admonitions, tables, forms, shortcodes, markdown render hooks, the image pipeline, the copy-button enhancement, and edge ornaments.

License

MIT.