Paper, not screen
A cream ground with a warm border reads as printed stock, which makes a small business feel established before a single word is read.
Demo Site 5 — Retro
Warm, printed, unhurried.
Retro takes its cues from the printed page: cream stock, a serif that was set with a composing stick, mustard and rust, and rules heavy enough to be seen from across the room.
What this theme does
Four habits that make a page feel like an object rather than a screen.
One serif, two jobs
Headlines and body share a family, the way a brochure does, so the page stays consistent without leaning on size alone.
Rules over shadows
A 2px border and a hard offset shadow do the separating, so depth comes from ink rather than from blur.
Warmth on purpose
Rust, mustard and olive sit closer together than a modern palette would, which is what makes the page feel calm rather than busy.
The theme in numbers
Small, measurable decisions are what make a warm page feel deliberate rather than dated.
-
3
Warm accents
Rust, mustard and olive, all muted so none of them shouts.
-
1
Type family
Georgia for headings, body copy and labels alike.
-
2px
Border weight
A single heavy rule that reads at any distance.
-
320px
Narrowest layout
Fluid rules hold all the way down to 320px.
Typography and spacing
A serif for everything, the way a printed piece would set it, with the specimen on the left using the same tokens as the page.
-
Display 68px
Set in a warm serif
-
Heading 36px
A second, quieter voice
-
Title 22px
Card and section titles
-
Body 17px
The reading size. Comfortable for a long sit-down with a coffee.
-
Caption 13px
Labels, notes and metadata
- Display
- Georgia italic at display size, tight leading.
- Body
- Georgia regular at 17px on a 1.7 line height.
- Scale
- 68 / 36 / 22 / 17 / 13 px, five sizes and no more.
- Spacing
- 4, 8, 16, 24, 32 and 64 px from one rhythm.
- Measure
- 60ch for ledes, 70ch for running text.
- Grid
- 12 columns, 1200px maximum, 24px gutter.
- Corners
- 2 to 6px. Just enough to soften, never enough to notice.
- Borders
- A single 2px rule in the ink colour.
- Shadows
- One hard offset, no blur, no glow.
- Motion
- 150ms on transform and colour only.
- Icons
- 1.05rem, 1.8px outline stroke, no fills.
- Files
- 3 HTML, 2 CSS, 2 JS. No build step, no framework.
What you get in the box
Six things that are already solved, so the work that remains is your own content.
-
Design tokens
Every colour, radius and shadow is a CSS variable, so the light and dark palettes live in a single block of overrides.
-
Semantic markup
Landmarks, one h1, ordered headings and real lists, so assistive technology reads the page in the order you wrote it.
-
Keyboard support
Every control is reachable with Tab and shows a visible 2px focus ring that is never removed.
-
Responsive by default
Fluid type and grid rules hold from 320px. Breakpoints only handle the navigation and the mode switcher.
-
Reduced motion
When the operating system asks for less movement, every transition on the page collapses to nothing.
-
No dependencies
No framework and no bundler. Open the file in a browser and it runs.
How a build with this theme goes
Four steps, usually two or three days for a small business site from brief to handover.
-
1
Pick the stock
We settle on one paper tone and one ink tone before anything else, because everything else is judged against them.
-
2
Set the serif
One family at four weights, with the display size left deliberately tight so headlines do not sprawl.
-
3
Draw the rules
Borders and offsets carry the structure, so the layout stays legible even before the colour loads.
-
4
Prove it
We check contrast, keyboard order and a 320px viewport before the theme goes anywhere near production.
Is this the right theme for you?
Retro is a strong opinion, so it is worth being honest about where it works and where it will fight you.
Use it when
- Food, hospitality and retail, where a warm page matches the room.
- Studios, makers and small firms that want to look established, not startup.
- Landing pages for a product with a story and a founding year worth showing.
- Readers who scroll for pleasure rather than for a spec sheet.
Skip it when
- Dashboards and data tools, where density beats warmth every time.
- Medical, financial or government services, where a cream ground can read as unserious.
- Products aimed at a very young audience, who tend to read this as old-fashioned.
- Brands that need six accent colours to tell sections apart.
Questions people ask
The things clients usually want to know before committing to a printed-page look.
Can I copy this demo as a starting point?
Yes. The eight demos share css/styles.css and css/demo-themes.css. Each theme is one token block plus one character block, so copying a page and its theme gives you a working site with no wiring to redo.
Is retro the same as vintage?
Not quite. Vintage copies a decade; retro borrows the printing conventions that still work, which is why the palette is muted rather than faded and the rules are crisp rather than distressed.
Why a serif for the whole page?
Because that is what the printed reference does. Using one family for headings and body keeps the page consistent, and the contrast between sizes does the work that a second family would otherwise do.
Does the dark mode hold up?
It is a separate set of tokens, not an inversion. Light is cream paper in daylight; dark is a deep walnut ground with the same warm accents lifted, so text stays easy on the eyes at night.
What fonts can I swap in?
Anything with a similar range of weights. The theme uses --display-font and --body-font, so you can point both at one family or run a second family for headings without touching the markup.
Is it accessible?
The light palette is checked token by token against the 4.5:1 ratio WCAG asks for, and dark mode is checked the same way. Focus rings are never suppressed, the FAQ uses real disclosure widgets, and every list on the page is a real list.
It looks like something our customers already trust, which is the whole point. We did not have to explain the design in the meeting.
Live colour palette
Ten tokens, two palettes. The chips are painted with the same custom properties the page uses, and the code under each one is read live from the computed style, so the switch in the header updates both together.
- Background --bg
- Surface --surface
- Surface tint --surface-strong
- Primary --primary
- Primary soft --primary-soft
- Secondary --secondary
- Accent --accent
- Text --text
- Muted --muted
- Border --border
Light mode is cream paper with rust and mustard. Dark mode drops to a deep walnut ground with the accents lifted, so the warm feeling survives the switch. The value under each chip is read live from the computed style.
Try the other themes
The same content, seven other personalities. The mode you pick follows you between them.
- Demo Site 1 · Minimalism Less, but better. Monochrome, hairline rules and one accent spent only where it matters. Open the demo
- Demo Site 2 · Futuristic Built for what comes next. Deep blue, glow and a technical grid. Reads as fast and engineered. Open the demo
- Demo Site 3 · Pixel art Press start to build. Hard edges, chunky borders and a tiny palette lifted from 8-bit games. Open the demo
- Demo Site 4 · Clay style Soft edges, solid build. Big radii, warm colour and stacked shadows that feel moulded by hand. Open the demo
- Demo Site 6 · Pop art Loud on purpose. Flat primaries, ink outlines and a halftone ground. Impossible to ignore. Open the demo
- Demo Site 7 · Maximalism Everything, all at once. Dense colour and stacked decoration, with no empty space anywhere. Open the demo
- Demo Site 8 · Editorial Ink, paper, one red rule. High-contrast serif headlines set like a magazine feature. Open the demo
Want this warmth for your business?
Tell us what you do and what you would rather stop saying. We will send back a stripped-down first pass, a fixed price, and an honest note on anything we think should be cut.
Replies within one working day. No newsletter and no follow-up calls.