Flat design

플랫 디자인

Strip away shadows, gradients and texture and build purely from flat color shapes and space — popularised by iOS 7 and Windows Metro in 2013.

Also known as: Flat UI

···

html

<div class="poster">
  <div class="icon" id="icon"></div>
  <h1>Weather</h1>
  <p>Clear skies, 21°C</p>
  <button class="btn">Open app</button>
</div>

css

body{background:#eef1f6}
.poster{width:min(84%,280px);background:#fff;border-radius:14px;padding:26px;text-align:center;
  font-family:-apple-system,"Segoe UI",sans-serif}
.icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#3ecbe0;position:relative}
.icon::after{content:'';position:absolute;inset:14px;border-radius:50%;background:#fff}
.icon.cloud::after{border-radius:40% 40% 45% 45%/60% 60% 40% 40%;inset:16px 8px 14px 8px;background:#e4967a}
h1{margin:0 0 4px;font-size:20px;font-weight:700;color:#1c2733}
p{margin:0 0 18px;font-size:13px;color:#6b7686}
.btn{background:#3ecbe0;color:#fff;border:0;border-radius:10px;padding:10px 22px;font-weight:700;
  font-size:13px;cursor:pointer}

const icon = document.getElementById('icon');
setInterval(() => icon.classList.toggle('cloud'), 1700);

Where skeuomorphism said "look like the real thing," flat design says the opposite: the screen is a screen, not a pretend sheet of paper or leather. Icons become flat silhouettes or uniform-weight lines; buttons are told apart by color contrast alone, no shadow.

There were practical reasons too. As high-density (Retina) screens spread, shipping elaborate gradients and texture images at multiple resolutions got expensive, and simple vector shapes were just easier to handle responsively.

Push flatness too far, though, and people can't tell what's a clickable button versus plain text — the "flat design discoverability problem." The industry later settled on "flat 2.0," adding back a touch of shadow or contrast for that reason.