Retro Dispatch

Installation

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

As a Hugo module

hugo mod init github.com/you/your-site
hugo mod get github.com/PhantomPixelDev/hugo-theme-retrocss

As a submodule

git submodule add https://github.com/PhantomPixelDev/hugo-theme-retrocss themes/hugo-theme-retrocss

Configuration

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

Accent hue

Set params.accentHue to any RetroCSS hue and the whole site follows, in both themes.

Corners

params.borderRadius is the framework’s single radius token. 0 keeps the Windows 95 squares.

Titles and credit

params.tagline is appended to the site title in the home page’s <title>, so a search result says what the site is rather than only what it is called.

Shortcodes

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

The theme ships one shortcode per interactive component. None of them add CSS — each is a thin wrapper over markup the framework already styles.

Alerts

Heads up

Alerts take type (primary, success, warning, danger, info) and an optional title.

A warning with no header.

Cards

System Properties

Cards take header, footer, image and imageAlt.

Badges and buttons

Shipped Beta Default

About

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

This is the demonstration site for RetroCSS 9x — a Hugo theme built on RetroCSS , a UI framework that brings the mid-90s desktop look to the modern web.

Every page here is assembled from framework components. The theme adds about eighty lines of layout CSS and nothing else: no bespoke colours, no second palette, no per-page overrides. What you see is what the framework does.

Trademarks

The theme imitates the visual style of mid-1990s desktop software. It is an independent project, not affiliated with, sponsored by, or endorsed by Microsoft. Windows is a trademark of Microsoft Corporation, named here only to describe the look the theme reproduces. No Microsoft artwork, icon or font is included.

Theming

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

Everything visual routes through RetroCSS tokens, so a site re-themes itself from configuration rather than from CSS overrides.

Accent hue

[params]
 accentHue = "teal"

Any of the framework’s hues works: primary, success, danger, warning, info, teal, tan, pink, lime, cyan, orange, brown, violet, gray, maroon, gold, navy, olive, silver. The theme aliases the four --retro-primary* tiers plus -rgb onto that hue, and because the dark palette redefines every hue, the accent follows into dark mode with its contrast intact.

Right-to-left

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

[languages.ar]
 languageName = "العربية"
 direction = "rtl"
 weight = 2

The theme emits dir on <html>, and RetroCSS positions everything with logical properties, so spacing, alignment and start/end positioning mirror with nothing to import.

What does not mirror

The bevels. In the Win9x visual language the light source is fixed at the top-left, and Windows keeps it there in RTL; flipping the raised and sunken edges would make every button read as sunken on the wrong side. Only the semantic accents move — an alert’s stripe, a blockquote’s rule — because those mark where a line of text begins.

Deploying

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

Build

hugo --minify --gc

The theme has no Node step and no Sass step. The framework’s CSS and JavaScript are vendored into the theme and served through Hugo Pipes, which means the standard Hugo binary is enough — you do not need the extended build.

What ships

One concatenated, fingerprinted stylesheet with a Subresource Integrity hash, one deferred script, and a search index built as a page resource. Nothing is fetched from a CDN at runtime, so the site works offline and behind a strict content security policy.

Designing a token system that survives dark mode

Wed, 02 Sep 2026 00:00:00 +0000

Why tiers

A colour is not one value. The blue that fills a button is not the blue that reads as text on grey, and using either in the other’s place is how a design system ships something illegible.

The four tiers

Fill, on-fill, on-surface, and states. Every hue carries all four.

:root {
 --retro-primary: #0000aa;
 --retro-primary-fg: #ffffff;
 --retro-primary-text: #000080;
}

What it buys you

One class sets both a fill and the text colour that survives on it.

Building a component that is square on purpose

Fri, 28 Aug 2026 00:00:00 +0000

One token

Every component routes its corners through --retro-border-radius, so one declaration rounds the whole framework.

The exceptions

Pills are named for their shape, and tables ignore border-radius outright because border-collapse: collapse merges their cell borders.

Why your div is not a button

Fri, 21 Aug 2026 00:00:00 +0000

A div with a click handler looks like a button and behaves like nothing.

What you lose

Tab order. Enter and Space. The implicit button role. The disabled state. Form submission. Focus visibility. Every one of those is a line of code you now own, and a line you will forget on the next component.

What it costs to get back

<div role="button" tabindex="0"
 onkeydown="if (event.key === 'Enter' || event.key === ' ') this.click()">
 Save
</div>

That is the minimum, and it still does not report a disabled state, still does not submit a form, and still needs event.preventDefault() so Space does not scroll the page.

Painting the right theme before the first frame

Fri, 14 Aug 2026 00:00:00 +0000

A theme flash is not a rendering quirk. It is a page admitting that it decided what colour to be after it had already been drawn.

Do it in CSS

The dark palette is emitted twice: once for [data-theme="dark"], and once under @media (prefers-color-scheme: dark) for :root:not([data-theme="light"]). A visitor whose system is dark gets dark on the first paint, before any script has run — before the bundle has even been requested.

A type scale for interfaces that shout

Fri, 07 Aug 2026 00:00:00 +0000

Windows 95 shipped at 96 DPI with an 8pt UI font. Reproducing that number today produces text nobody can read on a phone, which is the difference between an homage and a re-enactment.

Steps, not sizes

--retro-font-size-xs through -3xl, all in rem, all derived from one body size. A component asks for a step, never a pixel value, so a site that raises the base size moves everything with it.

What we removed in 3.0, and why

Thu, 30 Jul 2026 00:00:00 +0000

The `!important` on the radius reset

It was load-bearing by accident. Dropping it woke thirty-one dormant radius declarations and rounded eleven components — which is why 3.0.0 was followed by 3.0.1 the same week.

A documentation renderer

Unmaintained since 2022, its output was never published, and it accounted for every security advisory in the dependency tree. The SassDoc comments stayed; only the renderer left.

Sign-in forms that behave when the network does not

Sat, 18 Jul 2026 00:00:00 +0000

The happy path of a sign-in form is four elements. Everything else is the interesting part.

The states worth building

Pending — the button is busy, not disabled-and-silent.
Rejected — the message is next to the field, not in a toast that vanished.
Rate-limited — say how long, not “try again later”.
Offline — the form should still hold what was typed.

The password toggle

Make it a real button with aria-pressed, keep the field type in sync, and never place it where it covers the text it reveals.

Search

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

Everything on this site is indexed at build time — the whole search runs in your browser, with nothing sent anywhere.

Retro Dispatch

Installation

As a Hugo module #

As a submodule #

Configuration

Accent hue #

Corners #

Titles and credit #

Shortcodes

Alerts #

Cards #

Badges and buttons #

About

Trademarks #

Theming

Accent hue #

Right-to-left

What does not mirror #

Deploying

Build #

What ships #

Designing a token system that survives dark mode

Why tiers #

The four tiers #

What it buys you #

Building a component that is square on purpose

One token #

The exceptions #

Why your div is not a button

What you lose #

What it costs to get back #

Painting the right theme before the first frame

Do it in CSS #

A type scale for interfaces that shout

Steps, not sizes #

What we removed in 3.0, and why

The !important on the radius reset #

A documentation renderer #

Sign-in forms that behave when the network does not

The states worth building #

The password toggle #

Search

As a Hugo module

As a submodule

Accent hue

Corners

Titles and credit

Alerts

Cards

Badges and buttons

Trademarks

Accent hue

What does not mirror

Build

What ships

Why tiers

The four tiers

What it buys you

One token

The exceptions

What you lose

What it costs to get back

Do it in CSS

Steps, not sizes

The `!important` on the radius reset

A documentation renderer

The states worth building

The password toggle