Design Atlas
한국어
▣ Presentation & slides

Assertion-Evidence

어서션-에비던스 구조

Writing a slide's headline as a full-sentence claim instead of a topic label, then filling the body with a single piece of evidence that backs exactly that claim.

Also known as: Assertion-evidence approach주장-근거 슬라이드
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="bad-view">
    <h3 class="topic" id="topic"></h3>
    <ul class="bullets"><li id="b1"></li><li id="b2"></li><li id="b3"></li></ul>
  </div>
  <div class="good-view">
    <h3 class="assert" id="assert"></h3>
    <div class="chart">
      <div class="bar" style="--h:38%"></div>
      <div class="bar" style="--h:52%"></div>
      <div class="bar" style="--h:74%"></div>
    </div>
  </div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line)}
.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)}
.bad-view,.good-view{position:absolute;inset:8% 9%;display:none;flex-direction:column;justify-content:center;gap:clamp(6px,2vmin,14px)}
.slide:not(.good) .bad-view{display:flex}
.slide.good .good-view{display:flex}
.topic{margin:0;font:700 clamp(10px,2.6vmin,15px)/1.2 -apple-system,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bullets{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.5em}
.bullets li{font:600 clamp(10px,2.6vmin,14px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.assert{margin:0;font:800 clamp(12px,3.4vmin,19px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.chart{display:flex;align-items:flex-end;gap:8%;height:38%;margin-top:auto}
.bar{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-3))}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { topic: '3분기 실적', b: ['매출이 늘었다', '비용이 줄었다', '고객이 늘었다'], assert: '재구매율이 오르며 매출이 34% 늘었다', tag: ['✕ 주제어', '✓ 주장'] },
  en: { topic: 'Q3 Results', b: ['Revenue increased', 'Costs decreased', 'Customers grew'], assert: 'Revenue grew 34% as retention improved', tag: ['✕ Topic label', '✓ Assertion'] },
};
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.tag[1] : t.tag[0];
  el('topic').textContent = t.topic;
  el('b1').textContent = t.b[0]; el('b2').textContent = t.b[1]; el('b3').textContent = t.b[2];
  el('assert').textContent = t.assert;
}
render();
setInterval(() => { n++; render(); }, 2000);

A traditional "topic title + bullets" slide gives the title no information at all, and the audience reads the bullets instead of listening. The assertion-evidence structure puts the slide's one conclusion, as a full sentence, where the title goes — and fills the body with a single visual that proves that one sentence.

The demo's ✕ lists three unrelated bullets under the topic "Q3 Results" — the audience has to guess which one matters. The ✓ makes "Revenue grew 34% as retention improved" the headline, then backs only that sentence with one bar chart.

Checklist: does the title have a subject and verb instead of being a noun phrase, does the visual below support that one sentence and nothing else, does the sentence still make sense read aloud with no slide behind it.

When to use

Before titling any data, research, or decision slide, first answer "what is this slide's one conclusion?" — then use that sentence as the title.