Minimalism in web design: subtraction, white space and one accent
Minimalism as subtraction, where it came from, what to remove and what to keep, white space as a material and why minimal is not invisible — with live examples and prompts for images.
In short
Minimalism in web design is not emptiness but subtraction: everything that does not help the person do what they came for is removed, and what remains gets more space and more weight. It keeps one typeface in two or three sizes, a neutral palette with one rare accent, a lot of white space and one main action per screen. The idea goes back to “less is more” in architecture and Dieter Rams’s “less, but better”. Minimalism works when the content is strong — a product, a photo, a clear offer — and fails when it turns into pale grey text, hidden navigation and icons without labels. A good minimal page is calm, fast and readable at a glance.
Minimalism is subtraction
Remove the extra step by step: badges, gradients and shadows, extra buttons, icons, filler text. What remains is the product, its price and one action.
At every step ask: does the person lose anything if this disappears? The badges, the second and third buttons and the words “unique” and “exclusive” do not tell anything new. The fact “handmade, matte glaze” does — so it stays.
Where minimalism came from
Minimalist website homepage for a handmade ceramics brand, desktop screenshot, lots of negative space, one large photo of a single white ceramic vase on a pale sage-green background, a small flush-left headline in a light grotesque, a single underlined text link, muted palette of off-white, sage and graphite with one tiny acid-lime dot as the only accent, no decorative elements, calm and airy, flat 2D UI design, aspect ratio 16:9The phrase “less is more” is associated with the architect Ludwig Mies van der Rohe, and in the 1960s minimalism became a movement in art — simple forms, repetition, no ornament. In product design the idea was formulated by Dieter Rams: “less, but better” — not fewer things for the sake of it, but only what serves the purpose.
On the web minimalism grew together with phones: on a small screen every extra element costs space, attention and loading time.
What to remove and what to keep
Minimalism removes decoration, not information.
Remove
- decorative gradients and shadows
- repeated calls to action
- icons that add nothing
- extra fonts and weights
- carousels and pop-ups
- words like “unique” and “premium”
Keep
- readable text contrast
- one clear main action
- labels on icons that not everyone knows
- one typeface in two or three sizes
- one strong image
- facts: price, size, delivery
White space is a material
Move the slider: only the spaces change. At 8 px the block is crowded, at 32–40 px it is calm and expensive.
In minimalism space does the work that frames, backgrounds and lines do in other styles: it separates, groups and points to what matters. That is why spaces are taken from a scale and are larger between sections than inside them.
Minimal is not invisible
The same product. On the left, the text is pale, the menu is icons only, the action is a small grey word. On the right, everything is just as simple — and readable.
Light grey on white looks elegant in a mock-up and disappears on a real screen in the sun. Text keeps a contrast of at least 4.5 to 1, and grey is used for secondary lines, not for everything.
Minimalism in a product
Minimalist mobile app screen for a meditation timer, iPhone mockup on a plain light background, large thin numerals 10:00 in the centre, one round graphite start button, a pale sage-green circle behind the numerals, tiny grey-graphite labels, off-white screen background, generous spacing, no decoration, flat UI design, crisp, aspect ratio 4:5In an interface minimalism means one task per screen and gradual disclosure: the main thing is visible at once, the rest opens on request. Advanced settings hide behind “More options”, rare fields behind a link — and the screen stays simple for most people without taking anything away from the rest.
Minimalism in code: 2 examples
The whole style in a dozen variables, and gradual disclosure without a single line of script.
The style in variables
One font, three sizes, three spaces, two neutrals and one accent.
:root {
--ink: #171817;
--muted: #434541; /* grey, but readable: not lighter than this */
--paper: #F8F8F8;
--accent: #E4FF4E; /* one accent, used rarely */
--font: "Manrope", system-ui, sans-serif;
--step-0: 1.0625rem;
--step-2: 1.6rem;
--step-4: 2.5rem;
--space-s: 1rem;
--space-m: 2.5rem;
--space-l: clamp(4rem, 12vw, 10rem); /* space between sections does the main work */
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 var(--step-0)/1.6 var(--font);
}
h1 {
font-size: var(--step-4);
line-height: 1.05;
letter-spacing: -0.02em;
}
.section { padding-block: var(--space-l); }
.section > * + * { margin-top: var(--space-m); }
.text { max-width: 60ch; color: var(--muted); }Gradual disclosure
The rare options live in details: the form is short for most people and complete for the rest.
<form class="order">
<label for="qty">Quantity</label>
<input id="qty" name="qty" type="number" value="1" min="1">
<!-- The main thing is visible, the rest opens on request -->
<details class="order__more">
<summary>Gift wrap and a note</summary>
<label><input type="checkbox" name="gift"> Wrap as a gift</label>
<label for="note">Note to the recipient</label>
<textarea id="note" name="note" rows="2"></textarea>
</details>
<button class="button" type="submit">Add to cart</button>
</form>7 rules of minimalism that works
-
01
Every element earns its place
If nothing is lost when it disappears, it goes.
-
02
Space is a material
It groups and separates instead of frames and backgrounds.
-
03
One accent
Used for the main action and almost nowhere else.
-
04
Contrast stays
Simple does not mean pale: text is at least 4.5 to 1.
-
05
Navigation stays visible
Fewer items, but each with a word, not just an icon.
-
06
Fewer, but larger
What remains gets more size and space.
-
07
Typography carries the page
One typeface, a clear scale, a comfortable line length.
Common mistakes with minimalism
-
Grey on grey
Elegant in a mock-up, unreadable on a phone in the street.
-
A burger on a desktop
The menu is hidden for the sake of emptiness, and people do not find the sections.
-
Icons without words
Space is saved, the meaning is lost.
-
Emptiness without hierarchy
Everything is the same size, and the eye does not know where to start.
-
Too thin a font
A hairline weight falls apart on ordinary screens.
-
Removed information
No price, no delivery terms — and people leave to ask elsewhere.
Questions about minimalism
What is minimalism in web design?
A style that keeps only what helps the task: one typeface, a neutral palette with one accent, a lot of space and one main action per screen.
How is minimalism different from the Swiss style?
Minimalism is about removing; the Swiss style is about a strict system — a grid, a scale, asymmetry. They often meet, but a Swiss page can be dense.
Does minimalism reduce sales?
It does when it removes information people need — price, delivery, reviews. Removing decoration and noise usually helps.
How much white space is enough?
Space between sections is noticeably larger than inside them — on a desktop often 96 px and more. All spaces come from one scale.
Which fonts suit minimalism?
A clear grotesque or a calm serif in regular and bold weights. Hairline weights look elegant but read poorly.
Isn’t minimalism boring?
Not if the content is strong: one good photo, a precise headline and a confident scale give character without decoration.
Online form
Less, but
better
I design calm, fast sites where nothing distracts from the product — and nothing important is hidden. Tell me about the project — I answer within one working day.