Design Atlas
한국어
▣ Presentation & slides

Title Slide

타이틀 슬라이드

The opening screen of a talk — title, subtitle, presenter, and date in a clear order, with everything else kept to a minimum.

Also known as: Cover slideOpening slide
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="logo l1"></div><div class="logo l2"></div>
  <div class="shape"></div>
  <p class="ttl" id="ttl"></p>
  <p class="sub" id="sub"></p>
  <p class="meta" id="meta"></p>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:linear-gradient(135deg,var(--bg),var(--surface));border:1px solid var(--line);overflow:hidden}
.slide.good{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.badge{position:absolute;top:4%;right:4%;z-index:3;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.logo{position:absolute;width:9%;aspect-ratio:1;border-radius:4px;background:var(--accent)}
.l1{top:5%;left:5%}
.l2{top:5%;left:16%;background:var(--accent-2)}
.shape{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--accent-3);opacity:.25;bottom:-10%;right:-6%}
.slide.good .logo,.slide.good .shape{display:none}
.ttl{position:absolute;top:14%;left:6%;margin:0;font:800 clamp(11px,3vmin,16px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.sub{position:absolute;bottom:28%;right:8%;margin:0;font:600 clamp(9px,2.2vmin,12px)/1.3 -apple-system,sans-serif;color:var(--accent)}
.meta{position:absolute;bottom:6%;left:6%;margin:0;font:500 clamp(8px,1.8vmin,10px)/1.3 monospace;color:var(--muted)}
.slide.good .ttl{position:static;text-align:center;font-size:clamp(14px,4vmin,22px)}
.slide.good .sub{position:static;text-align:center;color:var(--muted);font-weight:500;margin-top:3vmin}
.slide.good .meta{position:static;text-align:center;margin-top:6vmin}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 산만함', '✓ 정돈됨'], ttl: '디자인 시스템으로 팀 속도 높이기', sub: '3분기 프로덕트 회고', meta: '정하늘 · 2026.03.12' },
  en: { badge: ['✕ Cluttered', '✓ Composed'], ttl: 'Shipping Faster with a Design System', sub: 'Q3 Product Retro', meta: 'Haneul Jung · Mar 12, 2026' },
};
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('ttl').textContent = t.ttl; el('sub').textContent = t.sub; el('meta').textContent = t.meta;
}
render();
setInterval(() => { n++; render(); }, 2200);

The title slide is the screen an audience stares at the longest — before the talk starts, and again during Q&A. The more logos, background photos, and decorative shapes it carries, the more the title itself gets buried.

The demo's ✕ scatters two logos, a decorative shape, and the title, subtitle, presenter, and date into four different corners. The ✓ puts one title front and center, then stacks subtitle, presenter, and date below it in small type, with generous margin.

Checklist: is the title the largest, first thing the eye lands on, is there at most one small logo tucked in a corner if you truly need it, does secondary information — presenter, date, event name — stay smaller than the title.

When to use

When building a new deck template, start by reserving space for the title first — not the logo or background decoration.