Design Atlas
한국어
❖ Design styles

Minimalism

미니멀리즘

Keep only what's essential and cut everything else. Done when there's nothing left to remove — not when there's nothing left to add.

Also known as: Minimalist design
···
html
<div class="stage">
  <div class="dot" id="dot"></div>
  <span class="word">less</span>
</div>
css
body{background:#fafaf8}
.stage{display:grid;place-items:center;width:100%;height:100%}
.dot{width:18px;height:18px;border-radius:50%;background:#15151a;margin-bottom:22px;
  animation:breathe 3.2s ease-in-out infinite}
.word{position:absolute;bottom:18%;font:300 12px/1 -apple-system,"Segoe UI",sans-serif;letter-spacing:.5em;
  color:#9a9aa2;text-transform:uppercase}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}

Architect Mies van der Rohe's "less is more" gets quoted often, but minimalism on the web isn't just about having fewer elements — it's about designing so that whatever remains gets undivided attention. Generous whitespace, a restrained palette (usually neutrals plus one accent), and thin type are its markers.

The important point is that it's prioritization, not just subtraction. For every element you consider adding, you ask "would the user fail their goal without this?" — and if not, it goes. Apple's product pages and Japanese architecture/craft brand sites are the usual reference points.

Force minimalism onto a screen that genuinely needs to carry a lot of information — an admin dashboard, a comparison table — and it backfires: more scrolling, more clicks, worse usability. It fits content-light brand and portfolio sites best.

When to use

Use it where the job is delivering one message clearly — brand and portfolio sites. Don't force it onto screens that inherently need to carry a lot of information.