Design Atlas
한국어
▣ Presentation & slides

Slide Hierarchy

슬라이드 위계

Size, weight, and color differences tell the eye where to look first — title, then subhead, then body — without anyone saying so.

Also known as: Visual hierarchy (slides)Type scale (slides)
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="stack">
    <p class="ln title" id="l1"></p>
    <p class="ln sub" id="l2"></p>
    <p class="ln body" id="l3"></p>
  </div>
  <div class="gaze"></div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:8vmin 9vmin}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.stack{display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);height:100%;justify-content:center}
.ln{margin:0;font:700 clamp(11px,2.6vmin,15px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.slide.good .title{font-size:clamp(15px,4vmin,22px);font-weight:800}
.slide.good .sub{font-size:clamp(11px,2.6vmin,15px);font-weight:600;color:var(--muted)}
.slide.good .body{font-size:clamp(9px,2vmin,12px);font-weight:400;color:var(--muted)}
.gaze{position:absolute;left:5%;top:14%;width:clamp(6px,1.6vmin,10px);aspect-ratio:1;border-radius:50%;background:var(--accent-3);opacity:0}
.slide.good .gaze{opacity:1;animation:travel 2s ease-in-out infinite}
@keyframes travel{0%,40%{top:14%}55%,70%{top:46%}85%,100%{top:78%}}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 위계 없음', '✓ 위계 있음'], l: ['디자인 시스템 도입', '반년 만에 개발 속도 30% 상승', '컴포넌트 재사용률과 리뷰 시간을 함께 측정했다'] },
  en: { badge: ['✕ No hierarchy', '✓ Clear hierarchy'], l: ['Adopting a design system', 'Shipping speed up 30% in six months', 'Measured both component reuse and review time'] },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('l1').textContent = t.l[0]; el('l2').textContent = t.l[1]; el('l3').textContent = t.l[2];
}
render();
setInterval(() => { n++; render(); }, 2200);

A slide with no hierarchy sets every line at the same size and weight, so the audience has to guess what matters. With hierarchy, the title is the biggest and boldest, the subhead sits in the middle, and the body is small and muted — the eye follows that order on its own.

The demo's ✕ sets title, subhead, and body at the same size and color, so the eye has nowhere obvious to start. The ✓ gives the same three lines distinct size, weight, and color so they read top to bottom in order — the traveling dot traces the actual gaze path.

Checklist: squint at the slide — can you still tell what matters most, does the slide use no more than three text sizes, are subheads and captions set in a lighter color than the body.

When to use

If a title, subhead, body, and caption all look the same style on one slide, rebuild the hierarchy first.