Whitespace
Space is a feature. Generous margins let every element breathe and make the page feel considered rather than crowded.
Demo Site 1 — Minimalism
Less, but better.
Minimalism is not emptiness. It is the discipline of keeping only what earns its place: a calm layout, quiet colour, and typography that does the talking.
What this theme does
Four habits that do most of the work, whatever the page happens to contain.
Hierarchy
One idea per screen, set clearly by size, weight and space. Everything else steps back so the message lands.
Restraint
A monochrome palette removes noise, so the single accent you do use carries far more weight.
Repetition
The same margin, the same type size, the same line length. Repetition is what makes a quiet page feel deliberate.
The theme in numbers
Small, measurable decisions are what make a restrained page feel calm rather than empty.
-
0
Decorative colours
One accent, spent only where it earns attention.
-
1
Type family
Inter at four weights carries the entire page.
-
8px
Spacing unit
A single rhythm behind every margin and gap.
-
320px
Narrowest layout
Fluid rules hold all the way down to 320px.
Typography and spacing
One family, one scale, one rhythm. The specimen on the left is rendered with the same tokens as the rest of the page.
-
Display 68px
Quiet authority
-
Heading 36px
A clear second voice
-
Title 22px
Card and section titles
-
Body 17px
The reading size. Long enough to stay comfortable for an hour.
-
Caption 13px
Labels, notes and metadata
- Display
- Inter 800 with -0.045em tracking, so large type sits tight.
- Body
- Inter 400 at 17px on a 1.65 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
- 56ch for ledes, 68ch for running text.
- Grid
- 12 columns, 1200px maximum, 24px gutter.
- Corners
- 0px. Nothing on this page is rounded.
- Borders
- A single 1px hairline in --border.
- Shadows
- One 1px lift. No glow, no depth tricks.
- Motion
- 150ms on opacity 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
Strip it back
We list every element on the page and delete the ones that do not earn the space they use.
-
2
Set the type
One family, one scale, four weights. Everything else inherits rather than re-declaring.
-
3
Space it out
Margins come from an 8px rhythm, so the page carries an invisible grid even though nothing is lined up visibly.
-
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?
Minimalism is a strong opinion, so it is worth being honest about where it works and where it will fight you.
Use it when
- Portfolios, studios and the sites where the work is the product.
- Editorial, essays and anything a visitor reads for more than a minute.
- Premium and luxury brands whose voice does the selling.
- Small businesses that need to look expensive without a large budget.
Skip it when
- Dashboards and data tools, where density beats calm every time.
- Marketplaces and catalogues that need colour to sort categories.
- Children and games, where an unfriendly page loses the audience.
- Brands that need six accent colours to tell sections apart.
Questions people ask
The things clients usually want to know before committing to a quiet design.
Can I copy this demo as a starting point?
Yes. The four 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.
Why is everything black and white?
A monochrome palette removes the decision that usually goes wrong. With no colour to fight over, contrast, spacing and type become the only things left to get right, and those are the things readers actually notice.
Can I add a colour back?
One. Change --primary and the button, the kicker and the stat values follow. Adding a second accent usually undoes the effect, so keep it to one and let space do the rest of the work.
Does the dark mode hold up?
It is a separate set of tokens, not an inversion. Light is paper white on warm grey; dark is near-black with softened contrast so text stays easy on the eyes at night. The swatches above change with the switcher so you can compare them directly.
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 serif for headings and a sans for body copy without touching the markup.
Is it accessible?
The light palette runs near-black on paper white, far past 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.
We stopped redesigning the brand and started deleting from it. The site finally sounds like the way we actually talk.
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 paper white on warm grey. Dark mode is near-black with softened contrast, so text stays easy on the eyes at night. The value under each chip is read live from the computed style, which is why it changes with the switch.
Try the other themes
The same content, seven other personalities. The mode you pick follows you between them.
- 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 5 · Retro Warm, printed, unhurried. Cream stock, a serif throughout and rules heavy enough to be seen. 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 quiet 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.