sunset modem glow
Ember
Warm oranges with a bright blue companion accent. This is the most overtly nostalgic default.
style-guide.njk
design system
Style Guide
A visual map of Retro Garden’s typography, panels, badges, palettes, and content patterns.
Typography
Readable body, deliberate display
The body face stays calm for long reading sessions while the Silkscreen headings keep the hand-made retro voice.
Surface language
Panels, chrome, and gentle noise
Instead of using nostalgia as a joke, the theme uses window chrome and grid-paper backgrounds to frame content with intent.
Customization
Designed to be edited
Retro Garden works best when people can quickly delete what they do not need and add their own personality without a refactor.
Palette previews
Each palette uses the same layout skeleton, but changes the emotional temperature of the whole site.
icy portal chrome
Surf
Cool blue panels with teal highlights. Good when you want the retro shell to feel lighter and more technical.
garden terminal
Mint
A greener palette that leans a little more handmade and zine-like while still keeping strong contrast.
Common interface pieces
The theme leans on a small set of recognizable building blocks instead of a huge design system.
88x31 buttons
Tags
Status card
Accessible by default
Visible focus, feed support, reduced motion awareness, and clean landmarks are all included.
Content samples
The journal posts exercise these patterns too, but it helps to see them in one place.
Keep the reading surface calm. Put the loud personality around it, not on top of it.
---
layout: layouts/post.njk
title: A New Entry
description: Show the theme in action.
postSidebar: false
tags:
- post
- indieweb
---
{% button88 "RSS FEED", "/feed.xml", "ember" %}Syntax samples
These blocks use different language grammars so you can see how the token colors shift across common theme files.
<article class="h-entry">
<h1 class="p-name">Palette Tour</h1>
<p class="p-summary">Same layout, different emotional temperature.</p>
</article>.palette-card--surf {
--palette-main: #2578e7;
--palette-soft: #e5f3ff;
--palette-strong: #174da2;
--palette-secondary: #17b7b3;
}const params = new URLSearchParams(window.location.search);
const theme = params.get("theme") ?? "ember";
document.documentElement.dataset.accent = theme;{
"title": "Retro Garden",
"defaultTheme": "ember",
"features": ["rss", "webc", "og-image", "share-links", "syntax-highlight"]
}npm run start
npm run build
npm run audit:a11y