발표자료 디자인 시스템 · 슬라이드 표준화
발표자료를 디자이너 없이도 일관되게 만드는 시스템. 컬러 토큰부터 슬라이드 레이아웃 패턴 10종까지 — 복사해서 바로 쓸 수 있는 CSS + 실전 가이드.
팔레트를 클릭하면 아래 인터랙티브 미리보기에 적용됩니다.
임원 보고·기술 발표에 최적. 높은 대비, 집중도 극대화.
인쇄·외부 공유용. 화이트 배경, 모던 미니멀.
마케팅·영업 자료. 에너지·열정 전달.
컨설팅·전략 발표. 신뢰·전문성 강조.
ESG·헬스케어·친환경. 자연·성장 이미지.
배경 60% · 서브 30% · 강조 10%
강조색을 10%만 써야 "강조"가 된다.
↑ 위 팔레트를 클릭하면 슬라이드 미리보기가 실시간으로 바뀝니다
← 스와치 클릭하면 HEX 코드 복사
← 행 클릭 시 해당 CSS 복사
/* 2열 균등 */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
/* 60-40 비대칭 */
grid-template-columns: 3fr 2fr;
/* 3열 */
grid-template-columns: repeat(3,1fr);cdn.jsdelivr.net/gh/orioncactus/pretendard
/* ─── 발표자료 디자인 토큰 (Dark) ─── */
:root {
/* 배경 계층 (60%) */
--bg: #0f172a; /* 페이지 배경 */
--panel: #111c33; /* 카드·패널 */
--sub: #334155; /* 보조 배경 */
--line: #1e293b; /* 구분선·테두리 */
/* 텍스트 계층 (30%) */
--text: #e2e8f0; /* 주요 텍스트 */
--muted: #94a3b8; /* 보조 텍스트 */
/* 강조색 (10%) */
--accent: #38bdf8; /* 주강조 (Cyan) */
--accent2: #818cf8; /* 부강조 (Purple) */
--green: #34d399; /* 상승·긍정 */
--amber: #fbbf24; /* 경고·주의 */
--red: #f87171; /* 위험·하락 */
--pink: #f472b6; /* 포인트 */
/* 타이포그래피 */
--font: "Pretendard", "Apple SD Gothic Neo", sans-serif;
--font-mono: "SFMono-Regular", Menlo, monospace;
/* 스케일 */
--text-xs: 12px; --lh-xs: 1.2;
--text-sm: 14px; --lh-sm: 1.5;
--text-base: 16px; --lh-base: 1.6;
--text-lg: 18px; --lh-lg: 1.5;
--text-xl: 22px; --lh-xl: 1.4;
--text-2xl: 28px; --lh-2xl: 1.3;
--text-3xl: 36px; --lh-3xl: 1.2;
--text-4xl: 48px; --lh-4xl: 1.1;
/* 스페이싱 */
--sp-xs: 4px; --sp-sm: 8px;
--sp-md: 16px; --sp-lg: 32px;
--sp-xl: 48px; --sp-2xl: 64px;
/* 반지름 */
--r-sm: 6px; --r-md: 12px;
--r-lg: 16px; --r-full: 999px;
/* 이징 */
--ease: cubic-bezier(.16,1,.3,1); /* easeOutExpo */
}