Editorial Product Deck
크림-아이보리 면에 잉크 블랙, 세리프 헤딩+산세리프 본문, 12열 엄격 그리드의 따뜻한 미니멀리즘 프로덕트 덱.
미리보기

색 토큰
bg
#F7F4EE
surface
#FCFAF5
text
#1F1B16
text_muted
#7A7164
accent
#B5503A
border
#DAD3C4
타이포 · 간격 토큰
display · {"family":"Source Serif 4","fallback":"Lora, Georgia, Noto Serif KR","size":"44pt","weight":600,"tracking":"-0.01em","leading":1.15}
heading · {"family":"Source Serif 4","fallback":"Lora, Georgia, Noto Serif KR","size":"30pt","weight":600,"tracking":"-0.005em","leading":1.2}
kicker · {"family":"Inter","size":"11pt","weight":500,"tracking":"0.10em","case":"uppercase","color":"#7A7164"}
body · {"family":"Inter","fallback":"Helvetica, Pretendard","size":"18pt","weight":400,"leading":1.5}
card_header · {"family":"Inter","size":"15pt","weight":600}
kpi · {"family":"Source Serif 4","size":"40pt","weight":600,"color":"#B5503A"}
caption · {"family":"Inter","size":"10pt","weight":400,"color":"#7A7164"}
spacing.unit · 8
spacing.margin_x · 0.8in
spacing.margin_y · 0.65in
spacing.gutter · 0.18in
스타일 축
| 색채 | earth |
| 타이포 | serif-editorial |
| 레이아웃 | strict-grid |
| 여백 | balanced |
| 모션 | none |
| family | editorial-product |
출처
- Design System Inspired by Notion — getdesign.mdarticle
- What Font Does Notion Use — designyourwayarticle
원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 시각 원리(크림 팔레트·세리프/산세리프 위계·카드·차트 스타일) 명세이며 Notion의 로고·일러스트·아이콘셋·독점 자산 사본이 아니다. 폰트는 오픈 라이선스 대체(Source Serif 4 / Inter)를 지정한다.
이 팩 적용하기 — design-pick 스킬
Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.
design-pick 스킬로 "ppt-editorial-product-deck" 팩을 적용해서 [내 주제] 발표자료를 만들어줘
스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick을 .claude/skills/에 복사하면 됩니다.
스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
# 에디토리얼 프로덕트 — ppt 디자인 팩
아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 따뜻한 크림-아이보리 면 위에 잉크 블랙 텍스트, 헤딩만 클래식 세리프로 가르는 "따뜻한 미니멀리즘" 프로덕트 덱 — 문서처럼 차분하게 읽히는 12열 엄격 그리드 미감.
## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 배경이 순백이 아니라 따뜻한 크림 `#F7F4EE`, 카드는 그보다 한 톤 밝은 면으로 그림자 없이 단차를 낸다. (2) 헤딩만 세리프(`Source Serif 4`), 본문·라벨·캡션은 전부 산세리프(`Inter`) — 위계가 색이 아니라 서체 대비로 만들어진다. (3) 모든 슬라이드 좌상단에 동일한 섹션 키커 + 0.75pt 룰 라인, 본문은 12열 그리드에 좌측 정렬. 강조는 단 하나의 차분한 테라코타.
## 색
- 배경 `#F7F4EE` (따뜻한 크림 — 순백 금지, 텍스처·그라디언트 금지)
- 표면/카드 면 `#FCFAF5` (크림보다 한 톤 밝음, 그림자 없이 면 대비로만 단차)
- 본문 텍스트 `#1F1B16` (잉크 블랙, 순흑 아님)
- 보조 텍스트·캡션 `#7A7164` (웜 그레이)
- 헤어라인·룰·구분선 `#DAD3C4` (0.75pt)
- 강조색 **1개만**: `#B5503A` (차분한 테라코타) — 헤딩 강조 어절, KPI 숫자, 차트 핵심 데이터, 룰 라인 끝점 마커에만. 본문 텍스트엔 컬러 금지.
## 타이포그래피
- 헤딩 폰트(세리프): `Source Serif 4` (대체 `Lora`, `Georgia`). 한글 병기 시 `Noto Serif KR`.
- 본문·라벨 폰트(산세리프): `Inter` (대체 `Helvetica`, `Pretendard`).
- 표지 제목: 44pt / Source Serif 4 / Semibold(600) / 자간 -1% / 행간 1.15 / 최대 2줄
- 슬라이드 헤딩: 30pt / Source Serif 4 / Semibold(600) / 자간 -0.5% / 행간 1.2 / 최대 2줄
- 섹션 키커(헤딩 위 라벨): 11pt / Inter / Medium(500) / 대문자 / 자간 +10% / 색 `#7A7164`
- 본문: 18pt / Inter / Regular(400) / 행간 1.5 / 슬라이드당 최대 7줄
- 카드 헤더: 15pt / Inter / Semibold(600)
- KPI 대형 숫자: 40pt / Source Serif 4 / Semibold(600) / 색 `#B5503A`
- 캡션·출처: 10pt / Inter / Regular(400) / 색 `#7A7164`
## 레이아웃 / 그리드
- **12열 엄격 모듈러 그리드.** 좌우 여백 각 0.8in, 상하 여백 각 0.65in. 거터 0.18in.
- 헤딩 영역: 상단 0.65~1.7in. 그 위 키커 라벨, 헤딩 아래 0.75pt `#DAD3C4` 전폭 룰 라인(룰 좌측 끝 0.12in 구간만 `#B5503A`).
- 본문 콘텐츠: 1.95in부터 6.6in까지. 2열·3열 카드 모듈로 분할. 모든 모듈은 그리드 열에 정확히 스냅.
- 카드: `#FCFAF5` 면, 보더 없음(또는 0.75pt `#DAD3C4` 1면), 내부 패딩 0.22in. 카드 사이 간격 거터와 동일.
- 좌하단 슬라이드 번호 10pt, 우하단 출처/캡션 10pt.
## 형태 / 질감
- 모서리 반경 4px(극히 미세, 직각에 가까움). 그림자 전면 금지. 그라디언트 금지. 면 단차는 `#F7F4EE` vs `#FCFAF5` 두 톤 대비로만.
- 아이콘은 1.25pt 스트로크 라인 아이콘만, 단색 `#1F1B16`, 채움 금지. 슬라이드당 아이콘 4개 이하.
- 이미지는 4px 반경, 보더 없음. 컬러 사진 허용하되 채도를 낮춰 크림 면과 어울리게.
## 차트 / 데이터 시각화 (에디토리얼 — 세리프 캡션 + 잉크빛 단색)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩의 차트는 "신문 도표처럼 차분하게 읽히는 문서 그래픽"이다.
- **차트 영역(절대값):** 플롯 영역 가로 약 6.4in × 세로 약 3.5in(12열 중 좌측 7열). 좌측 값축 여유 0.25in, 하단 카테고리 라벨 0.5in. 모든 막대·점·축은 픽셀 단위 정렬.
- **차트 타입 매칭:** 항목 비교=세로/가로 막대, 시계열 추세=얇은 라인, 비중=도넛(조각 3개 이하, 중앙에 핵심 수치 세리프), 구성 변화=기울기 그래프. 파이 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스·배경 채움·범례 박스 제거. 격자선은 그리지 않거나 y축 주요 눈금에만 0.5pt `#DAD3C4` 헤어라인 1~2개. y축 눈금 라벨은 0과 최댓값 2개만.
- **축:** x축 기준선만 0.75pt `#DAD3C4` 헤어라인. y축선 생략. **막대 기준선은 데이터 0에서 시작**(잘린 y축 절대 금지).
- **직접 레이블링:** 범례 대신 카테고리 이름을 각 막대 아래 11pt `Inter` `#7A7164`. 값 레이블은 막대 끝 위 0.06in에 14pt `Inter` Semibold, 강조 막대 값만 `#B5503A`·나머지 `#1F1B16`, 자릿수·단위 일관, 탭형(tabular figures) 정렬. 축 라벨은 세리프 `Source Serif 4` 11pt도 허용.
- **데이터 색:** 강조할 막대 1개만 `#B5503A`, 나머지 막대는 전부 `#C8BFAD`(크림 톤 중립). 무지개·계열별 다른색 금지. 계열이 둘이면 `#B5503A` + `#9B917F` 두 톤만.
- **세로 막대:** 막대 폭 : 간격 = 3 : 2. 모든 막대 폭·정렬 픽셀 일치. 모서리 반경 0~2px. 외곽선 없음.
- **라인 차트:** 1.5pt 실선, 주계열 `#B5503A`·보조 `#9B917F`, 마커는 끝점·강조점에만 지름 5px 원. 면적 채움 없음(또는 8% 불투명도 `#B5503A` 면적까지만 허용). 직선 세그먼트.
- **헤딩 + 출처:** 차트 슬라이드도 상단 세리프 헤딩 의무. 차트 하단에 단위 명기("단위: %, 2025"), 우하단 10pt 출처 캡션 의무.
## 다이어그램·컴포넌트 (에디토리얼 — 헤어라인으로 짜인 문서 그래픽)
다이어그램은 전부 SVG로 정밀 렌더한다(div 블록 금지). 이 팩의 다이어그램 언어는 차트와 동일하다 — **0.75pt `#DAD3C4` 헤어라인 골격, 채움 없는 직각 노드, 활성 1개만 테라코타, 4px 미세 반경**. 모서리 반경 4px, 화살촉은 가는 V자(채움 없음). 단계 번호는 항상 동일한 배지로: 지름 0.34in 원, 0.75pt `#DAD3C4` 테두리, 채움 없음, 안에 `Source Serif 4` 14pt — 활성 단계만 원·숫자 `#B5503A`. 모든 다이어그램은 12열 그리드에 스냅, 본문과 동일한 좌측 정렬 기조.
- **프로세스 플로우:** 수평 단계 노드, 노드 = `#FCFAF5` 면 + 0.75pt `#DAD3C4` 1면 보더, 폭 2.0in × 높이 0.95in, 4px 반경, 내부 패딩 0.18in. 노드 위 좌측에 번호 배지, 노드 안 15pt `Inter` Semibold 라벨 + 12pt `Inter` `#7A7164` 보조 1줄. 커넥터 = 1.25pt `#DAD3C4` 실선 + 끝에 가는 V자 화살촉(폭 0.1in). 노드 간격 0.4in. 최대 5단계, 활성 단계만 보더·번호 배지 `#B5503A`.
- **타임라인:** 수평 0.75pt `#DAD3C4` 축선 1줄(좌우 여백 0.8in 안). 마일스톤 마커 = 지름 8px 원, 채움 `#FCFAF5` + 0.75pt `#DAD3C4` 테두리(현재/핵심 시점만 `#B5503A` 채움). 마커 위 11pt `Inter` Medium 대문자 날짜 라벨(자간 +10%), 마커 아래 14pt `Source Serif 4` 이벤트명. 마커 6개 이하, 등간격.
- **비교 레이아웃:** 2~3열 대조. 열 사이 0.75pt `#DAD3C4` 수직 구분선(거터 중앙). 각 열 상단 키커 라벨(11pt 대문자) + 0.75pt 룰(좌측 0.12in `#B5503A`) → 15pt `Inter` Semibold 헤더 → 18pt 본문. 열 배경 채움 없음(헤어라인으로만 구분). vs 표기는 두 열 사이 중앙에 14pt `Source Serif 4` Italic "vs".
- **매트릭스 / 2×2:** 가로·세로 축선 각 0.75pt `#DAD3C4` 십자, 캔버스 중앙. 사분면 채움 없음(헤어라인 격자만). 축 라벨은 11pt `Inter` Medium 대문자, 사분면 코너에 14pt `Source Serif 4` 사분면명. 데이터 포인트 = 지름 0.16~0.4in 원, 채움 없음 + 1.25pt 테두리(`#C8BFAD`), 강조 1개만 `#B5503A` 채움. 점 옆 11pt `Inter` 라벨.
- **계층 / 피라미드 / 퍼널:** 3~4레벨, 위→아래로 폭이 단계적으로 변하는 사다리꼴/막대. 면 채움 없음(또는 `#FCFAF5`), 0.75pt `#DAD3C4` 보더. 레벨 사이 0.1in 간격. 레벨 라벨은 도형 안 15pt `Inter` Semibold + 우측 여백에 12pt `#7A7164` 설명. 최하·핵심 레벨 1개만 보더 `#B5503A`.
- **KPI·스탯 카드:** `#FCFAF5` 면, 0.75pt `#DAD3C4` 1면 보더(상단만 권장), 4px 반경, 내부 패딩 0.22in, 폭 2~3열. 구성 = 11pt 키커 라벨 → 40pt `Source Serif 4` Semibold 수치(`#B5503A`) → 14pt `Inter` 설명. 증감은 수치 옆 13pt `Inter` Semibold + 가는 ▲/▼ 글리프(`#B5503A` 상승 / `#7A7164` 하락 — 무채색 절제). 카드 사이 간격 거터 0.18in.
## 전환 (PPT)
모핑·날아오기·줌 금지. 슬라이드 전환은 즉시 컷 또는 0.25s 페이드만.
## 하지 말 것
- 배경을 순백 `#FFFFFF`로 쓰기 — 반드시 크림 `#F7F4EE`.
- 본문에 세리프 쓰기, 헤딩에 산세리프 쓰기 — 헤딩=세리프, 본문=산세리프 고정. 위계를 뒤섞지 말 것.
- 강조색 2개 이상, 본문 텍스트에 컬러 입히기.
- 둥근 카드(반경 8px 이상), 그림자, 그라디언트, 글로우.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 막대 그림자·광택·베벨, 무지개·계열별 색칠, 격자선 과다, 차트 테두리 박스, 배경 채움, 범례 박스(계열 4개 미만), 잘린 y축, div 블록 막대.
- 모든 요소 중앙 정렬 — 본문은 전부 좌측 정렬, 12열 그리드에 스냅.
- 이모지 불릿·클립아트·스톡 아이콘 남발.
- 슬라이드를 7줄 넘는 글로 채우기.
## 적용 예
- **표지:** 크림 배경, 좌측 정렬 — 상단 11pt 키커 라벨, 44pt 세리프 제목 2줄, 그 아래 0.75pt 룰 라인(좌측 0.12in 테라코타), 하단에 날짜·작성처 10pt 산세리프. 우측 1/3에 채도 낮춘 이미지 4px 반경.
- **본문 슬라이드:** 키커 + 30pt 세리프 헤딩 + 룰 라인. 아래 3열 `#FCFAF5` 카드, 각 카드 15pt 산세리프 헤더 + 18pt 본문 4줄. 우하단 출처.
- **차트 슬라이드:** 키커 + 30pt 세리프 헤딩 + 룰. 좌측 7열에 약 6.4×3.5in SVG 세로 막대 — 막대 폭:간격 3:2, 강조 막대 1개만 `#B5503A`·나머지 `#C8BFAD`, 막대 끝 위 14pt Semibold 탭형 값 레이블(강조값만 테라코타), 막대 아래 11pt 카테고리명, x축 0.75pt 헤어라인 1줄, 막대는 데이터 0 기준선. 우측 5열에 18pt 해석 텍스트 3~4줄. 차트 하단 단위 명기, 우하단 10pt 출처.
- **프로세스 다이어그램 슬라이드:** 키커 + 30pt 세리프 헤딩 + 룰. 4단계 수평 플로우 — 각 노드 2.0×0.95in `#FCFAF5` 면 + 0.75pt 보더, 노드 위 0.34in 원형 번호 배지, 1.25pt `#DAD3C4` 커넥터 + 가는 V자 화살촉, 활성 단계 1개만 `#B5503A`. 하단 18pt 해설 2줄.
- **매트릭스 슬라이드:** 키커 + 30pt 세리프 헤딩 + 룰. 중앙에 0.75pt `#DAD3C4` 2×2 십자 축, 사분면 채움 없음, 11pt 대문자 축 라벨 + 14pt 세리프 사분면명, 데이터 포인트는 채움 없는 원 + 강조 1개만 `#B5503A` 채움. 또는 4행 KPI 스탯 카드 행 — 40pt 세리프 테라코타 수치 + 키커 라벨 + ▲/▼ 증감.
복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.