What is minimalism?
Minimalism isn't "empty" — it's intentional. You remove everything that doesn't earn its place so the few things that remain feel important. The opposite of maximalism, it's the look behind Apple, Stripe, and most premium brands.
Whitespace
Empty space isn't wasted — it gives content room to breathe and signals quality and calm.
Restrained palette
Mostly neutrals with one accent color, used sparingly so it actually means something.
Clear hierarchy
A few sizes and weights make it obvious what to read first. No competing elements.
One focal point
Each screen has a single, obvious thing to do. Remove distractions around it.
The minimal hero
One short headline, one line of support, one button — surrounded by space. Nothing competes with the message.
Everything you need. Nothing you don't.
A calm, focused workspace that gets out of your way.
Get started<section class="hero"> <h1>Everything you need. Nothing you don't.</h1> <p>A calm, focused workspace that gets out of your way.</p> <a class="btn" href="#">Get started</a> </section>
.hero { text-align: center; padding: 56px 24px; } /* lots of space */
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.02em; }
.hero p { color: #6b7280; max-width: 420px; margin: 0 auto 24px; }
.btn { background: #2563eb; color: #fff; padding: 12px 28px; border-radius: 8px;
text-decoration: none; } /* the single accent color */
The minimal card
A thin border, generous padding, neutral text, and one accent link. No shadows or gradients needed.
<article class="card"> <h3>Focus mode</h3> <p>Hide everything but the task in front of you. One thing at a time.</p> <a href="#">Learn more →</a> </article>
.card {
border: 1px solid #e5e7eb; /* a hairline, not a heavy box */
border-radius: 12px;
padding: 28px; /* generous padding does the work */
}
.card p { color: #6b7280; } /* soft grey, not pure black */
.card a { color: #2563eb; text-decoration: none; }
Whitespace is the technique
Same content, two amounts of padding. The roomy version instantly reads as calmer and more premium. When in doubt, add space.
Plans
Pick the plan that fits your team and budget today.
Plans
Pick the plan that fits your team and budget today.
<div class="cramped"><h3>Plans</h3><p>Pick the plan that fits your team and budget today.</p></div> <div class="roomy"><h3>Plans</h3><p>Pick the plan that fits your team and budget today.</p></div>
.cramped { padding: 8px; } /* feels cheap and busy */
.roomy { padding: 28px; } /* feels calm and premium */
/* the only difference is breathing room */
Restrained palette & navigation
Neutrals plus one accent. The accent appears only on the thing you want clicked. Navigation stays sparse — logo and a few links.
<nav class="nav">
<span class="logo">Acme</span>
<div class="links">
<a href="#">Product</a>
<a href="#">Pricing</a>
<a href="#">Docs</a>
<a href="#" class="cta">Sign up</a>
</div>
</nav>
:root {
--bg: #fff; --surface: #f3f4f6; --muted: #9ca3af; --ink: #111827;
--accent: #2563eb; /* the ONLY non-neutral */
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a.cta { color: var(--accent); font-weight: 600; } /* accent = the one action */
Floating elements
Minimalism leans on soft elevation rather than borders to separate things. A floating card gently lifts off the page with a soft shadow (and an optional slow bob), and a floating action button hovers in the corner. Empty space + a soft shadow does all the work.
Floating card
Soft shadow + a gentle bob makes it feel weightless.
Another
A staggered delay so they drift independently.
<article class="float-card"> <h3>Floating card</h3> <p>Soft shadow + a gentle bob makes it feel weightless.</p> </article> <article class="float-card delayed"> <h3>Another</h3> <p>A staggered delay so they drift independently.</p> </article> <button class="fab" aria-label="Add">+</button> <!-- floating action button -->
/* float = soft shadow (no border) + a slow bob */
.float-card {
background: #fff; border-radius: 16px; padding: 24px;
box-shadow: 0 18px 40px rgba(30,41,59,.16);
animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-card.delayed { animation-delay: 1.2s; } /* stagger them */
/* floating action button, pinned to a corner */
.fab {
position: absolute; bottom: 14px; right: 14px; /* or position: fixed on a real page */
width: 56px; height: 56px; border-radius: 50%;
background: #2563eb; color: #fff;
box-shadow: 0 12px 28px rgba(37,99,235,.45);
}
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } } /* respect motion */
prefers-reduced-motion. More on motion in Web Page Motion.A whole page in this style
The minimal aesthetic assembled into a clean SaaS landing page — quiet nav, a roomy hero with one real photo, hairline feature cards, and a calm footer.
<div class="page">
<nav>…logo, links, one accent button…</nav>
<header class="hero">
<div><h1>Do your best work, calmly.</h1><a class="btn">Start free</a></div>
<img src="workspace.jpg" alt="">
</header>
<section class="features"><article class="card">…</article></section>
<footer>…</footer>
</div>
:root { --accent: #2563eb; --line: #e5e7eb; --muted: #6b7280; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
align-items: center; padding: 44px 26px; } /* generous space */
.btn { background: var(--accent); color: #fff; } /* the one accent */
.card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; } /* hairline */
p { color: var(--muted); } /* soft grey body */
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } }
<img src> and let the whitespace carry the rest. Free photos at Unsplash.Characteristics & components
The signals that make a design read as minimal:
Lots of white space Simple typography Limited colors Clean layouts
Components to build
Nav, hero, CTA, feature cards, and a footer — the bones of a minimal page, live first, then the code.
Loads instantly.
One thing at a time.
<nav class="nav">
<strong>Acme</strong>
<div class="links">
<a href="#">Product</a>
<a href="#">Pricing</a>
<a href="#" class="cta">Sign up</a>
</div>
</nav>
<section class="hero">
<h1>Everything you need. Nothing you don't.</h1>
<p>A calm, focused workspace.</p>
<a class="btn" href="#">Get started</a>
</section>
<div class="features">
<article class="card"><strong>Fast</strong><p>Loads instantly.</p></article>
<article class="card"><strong>Simple</strong><p>One thing at a time.</p></article>
</div>
<footer class="footer">
<span>© 2026 Acme</span>
<span><a href="#">Privacy</a> <a href="#">Terms</a></span>
</footer>
.nav, .footer { display: flex; justify-content: space-between; align-items: center; }
.nav { border-bottom: 1px solid #e5e7eb; }
.cta { color: #2563eb; font-weight: 600; } /* the one accent */
.hero { text-align: center; padding: 56px 24px; } /* whitespace = focus */
.btn { background: #2563eb; color: #fff; padding: 11px 26px; border-radius: 8px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px; } /* hairline */
.footer { border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: .8rem; }
Do & don't
Do
- Add more whitespace than feels necessary
- Limit to neutrals + one accent
- Use one or two type sizes with clear weight
- Give each screen a single focal point
- Remove anything that doesn't earn its place
Don't
- Confuse "minimal" with "empty & boring"
- Sneak in extra colors and gradients
- Cram elements to "use the space"
- Hide key actions for the sake of clean looks
- Drop contrast so low text is hard to read
The takeaway
Minimalism = whitespace, a restrained palette (neutrals + one accent), clear hierarchy, and one focal point per screen. Every element must earn its place; when unsure, remove it. The result feels calm, premium, and effortless to use — the quiet opposite of maximalism.