FeaturedTheming
Designing a token system that survives dark mode
Four tiers per hue, and why a value tuned as a background is unreadable as text.
Read the post: Designing a token system that survives dark modeRetro Dispatch
Demo site for RetroCSS 9x, a free Win9x-style Hugo theme for blogs and documentation, in the visual language of the mid-90s desktop: retro chrome, dark mode, WCAG AA contrast, RTL and client-side search.
This is a Hugo theme demo
You are looking at hugo-theme-retrocss — a free, open-source Win9x-style Hugo theme for blogs and documentation, built on the RetroCSS UI framework. It reproduces the look of the mid-90s Windows desktop; it is not affiliated with or endorsed by Microsoft. Everything below is the theme rendering ordinary Hugo content.
Install it as a Hugo module and you have the whole 90s desktop look — raised and sunken bevels, square corners, a grey chassis — with dark mode that follows the operating system, WCAG AA contrast in both themes, keyboard-operable components, right-to-left support, and client-side search. No Sass toolchain, no Node build step, and no CDN request at runtime: the standard Hugo binary is enough.
hugo mod get github.com/PhantomPixelDev/hugo-theme-retrocssLatest posts
Components
Building a component that is square on purpose
Corners are a token, not a decision made 40 times.
Read more: Building a component that is square on purpose
Accessibility
Why your div is not a button
Everything you have to rebuild by hand the moment you style the wrong element.
Read more: Why your div is not a button
Dark mode
Painting the right theme before the first frame
Why the dark palette ships in CSS, and what the four lines of inline script are actually for.
Read more: Painting the right theme before the first frame
Typography
A type scale for interfaces that shout
Seven steps, one ratio, and why the body size is 16px even in a 1995 costume.
Read more: A type scale for interfaces that shout
Changelog
What we removed in 3.0, and why
A changelog entry about deletion, which is the part of a release nobody advertises.
Read more: What we removed in 3.0, and why
Components
Sign-in forms that behave when the network does not
Password toggles, live requirements, and the states everyone forgets.
Read more: Sign-in forms that behave when the network does not