스위스 에디토리얼 볼드
정밀 그리드 위에 거대한 압축 디스플레이 활자를 일러스트처럼 쓰는 의도된 혼돈의 편집 디자인.
미리보기

색 토큰
bg
#F2F0EB
bg_invert
#111111
surface
#111111
text
#111111
text_invert
#F2F0EB
accent 1
#FF4A1C
accent 2
#0047FF
chart 1
#111111
chart 2
#F2F0EB
chart_emphasis 1
#FF4A1C
chart_emphasis 2
#0047FF
chart_base
#111111
border
#111111
타이포 · 간격 토큰
display · {"family":"Archivo Black","fallback":"Pretendard ExtraBold, sans-serif","size":"130pt","weight":900,"tracking":"-0.03em"}
heading · {"family":"Archivo Black","fallback":"Pretendard ExtraBold, sans-serif","size":"44pt","weight":900,"tracking":"-0.02em"}
body · {"family":"Inter","fallback":"Pretendard, sans-serif","size":"24pt","weight":400,"leading":1.35}
caption · {"family":"Inter","fallback":"Pretendard, sans-serif","size":"14pt","weight":500,"tracking":"0.08em","transform":"uppercase"}
spacing.unit · 8
spacing.margin_x · 0.7in
spacing.margin_y · 0.6in
spacing.grid_columns · 12
스타일 축
| 색채 | vivid-primary |
| 타이포 | heavy-display |
| 레이아웃 | strict-grid |
| 여백 | balanced |
| 모션 | snappy |
| family | swiss-editorial-bold |
출처
- Bloomberg Businessweek — Commercial Typeofficial
- At Work With Richard Turley, Bloomberg Businessweek — Magculturearticle
원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.
이 팩 적용하기 — design-pick 스킬
Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.
design-pick 스킬로 "ppt-swiss-editorial-bold" 팩을 적용해서 [내 주제] 발표자료를 만들어줘
스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick을 .claude/skills/에 복사하면 됩니다.
스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
# 스위스 에디토리얼 볼드 — ppt 디자인 팩 ## 이 스타일의 정체성 스위스 그리드의 엄정함 위에 거대한 활자의 폭발. 정밀 12열 그리드에 거대한 압축(condensed) 디스플레이 활자를 늘이고·잘라 타이포그래픽 일러스트 그 자체로 쓴다. 흑백 기반에 강한 스팟 컬러 한둘, "질서 위의 의도된 혼돈" — 한눈에 Bloomberg Businessweek 계열 에디토리얼로 식별된다. ## 색 - 배경: `#F2F0EB`(웜 화이트) 또는 `#111111`(잉크 블랙) — 슬라이드별 반전 허용. - 텍스트: 배경 반전색(`#111111` 또는 `#F2F0EB`). - 스팟 컬러 2개: `#FF4A1C`(버밀리언 오렌지), `#0047FF`(일렉트릭 블루). 한 슬라이드에 1색만, 거대 활자 또는 도형 블록에. - 그라디언트·면 채움 그라디언트 금지. 색은 채도 그대로의 플랫. ## 타이포그래피 - 디스플레이: `Archivo Black` 또는 압축 `Archivo Expanded` (대체: `Pretendard ExtraBold`, sans-serif). 표지·타이포 일러스트 96~140pt. 자간 -0.03em. - 헤드라인: 동일 패밀리 Bold 44pt. - 본문: `Inter` (대체: `Pretendard`, sans-serif) 24pt, 행간 1.35. 슬라이드당 6줄 이하. - 캡션: `Inter` Medium 14pt, 대문자, 자간 0.08em. - 거대 활자는 슬라이드 경계에서 잘려나가게(crop) 배치 — 글자가 화면 밖으로 흐른다. ## 레이아웃 / 그리드 - 캔버스 16:9 (13.33×7.5in). 좌우 여백 각 0.7in, 상하 각 0.6in. - 엄격한 12열 모듈러 그리드 — 모든 콘텐츠 블록은 그리드 셀에 정확히 스냅. 거대 활자만 그리드를 벗어나 잘린다. - 비대칭 배치: 텍스트 블록을 한쪽으로 강하게 몰고 반대편에 거대 활자 또는 단색 컬러 블록. - 본문 슬라이드 제목은 좌상단 그리드 1~6열 고정. ## 형태 / 질감 - 형태: 직사각형 컬러 블록·룰 라인만. 곡선 도형 금지. - 보더: 룰 라인 1pt·3pt 솔리드. 박스 보더는 거의 안 씀. - 그림자 전무 — 깊이는 색 대비와 겹침으로만. - 모서리 반경 0 — 모든 모서리 직각. - 이미지: 흑백 또는 듀오톤(검정+스팟 컬러), 사각 풀크롭. 그리드 셀에 정확히 맞춤. ## 전환 (PPT) - 전환은 Push(좌→우), 0.25s — 빠르고 단호하게. Fade·Morph 금지. - 거대 활자는 Wipe 등장 허용. ## 하지 말 것 - 그라디언트·그림자·곡선 도형·둥근 모서리 금지. - 스팟 컬러를 2색 동시에 한 슬라이드에 쓰지 말 것 — 슬라이드당 1색. - 활자를 얌전히 작게 쓰지 말 것 — 거대 활자가 정체성이다. - 콘텐츠를 그리드에서 임의로 어긋나게 두지 말 것(거대 활자 crop 제외). - 이모지·아이콘·클립아트·일러스트 금지. 시각 요소는 활자·블록·룰 라인. - 중앙 정렬 본문 금지 — 좌측 정렬·비대칭. - **차트 금지사항(아마추어 회귀 차단):** 3D·입체 막대·원근 파이 금지. 그림자(하드·소프트 모두) 금지. 격자선 금지. 범례 박스 금지 — 직접 레이블링만. 무지개색·스팟 컬러 다색 동시 사용 금지(슬라이드당 1색). 둥근 막대 금지. 잘린 y축 금지. 데이터 영역 테두리 박스 금지. div·표 셀 막대 금지 — SVG 정밀 렌더. ## 차트·데이터 시각화 스위스 차트 = 무채색 막대 + 스팟 컬러 강조 1막대 + 그리드 정합 + 대문자 캡션 레이블. 맥킨지식 절제 기법(강조 1개·나머지 무채색)을 스위스 그리드 정밀성으로 실행한다. - **렌더링:** SVG로 정밀하게 그린다. 막대 폭 : 간격 = 3 : 2, 모서리 반경 0(각진 막대). 막대·축은 12열 모듈러 그리드에 정확히 스냅. 막대 하단 기준선은 값 0에 정확히 정렬. 잘린 y축 절대 금지. - **축·격자:** 격자선 완전 제거. x축(기준선)만 3pt 솔리드 룰 라인 `#111111`(반전 슬라이드에선 `#F2F0EB`). y축선 제거. 눈금 라벨 최소(0·최댓값). - **데이터 색:** `tokens.json`의 `color.chart`. 모든 막대는 무채색(잉크 `#111111`, 반전 슬라이드는 `#F2F0EB`). 비교에서 가장 중요한 막대 1개만 그 슬라이드의 스팟 컬러(`#FF4A1C` 또는 `#0047FF`, 슬라이드당 1색). 명도 단계 무지개 금지. - **값 레이블:** 막대 위 직접 표기. `Inter` Medium 14pt 대문자 자간 0.08em, 탭형 정렬, 일관된 자릿수·단위 — 캡션 활자와 동일 스타일. - **직접 레이블링:** 범례 박스 금지. 항목명은 막대 아래 14pt 대문자 캡션으로 직접 붙인다. - **차트 타입:** 비교=각진 세로/가로 막대(무채색 + 스팟 1). 추세=2pt 직선 꺾은선(무채색, 강조 구간만 스팟). 비중=100% 누적 막대 1개(무채색 구간 + 스팟 1구간) 또는 도넛(조각 3개 이하, 무채색 + 스팟 1, 중앙 핵심 수치 `Archivo Black` 44pt). 파이 4조각+·다중 도넛 금지. - **거대 수치:** 단일 핵심 메트릭은 차트 대신 88pt 스팟 컬러 거대 활자(경계 crop 허용)로 표현해도 된다 — 팩 정체성과 일치. ## 다이어그램·컴포넌트 스위스 다이어그램 = 12열 그리드에 스냅된 직각 블록 + 3pt 룰 라인 커넥터 + 대문자 캡션. 곡선·둥근 모서리·아이콘 없이 사각 블록·룰 라인·번호만으로 구성한다. 모든 다이어그램이 한 언어를 공유한다 — 노드는 모서리 반경 0 직사각형, 커넥터는 3pt 솔리드 룰 라인, 번호 배지는 무채색 정사각형, 강조는 슬라이드당 스팟 컬러 1색. 전부 SVG 정밀 렌더, div 블록 금지. - **공통 다이어그램 언어:** 노드 = 직사각형(반경 0). 커넥터 = 3pt 솔리드 룰 라인 `#111111`(반전 `#F2F0EB`), 화살촉은 채운 삼각형 변 0.18in. 번호 배지 = 한 변 0.36in 정사각형, 무채색 채움 + 반전색 숫자 `Archivo Black` 20pt. 활성/강조 요소만 스팟 컬러 1색, 나머지 무채색. - **프로세스 플로우:** 4~5단계, 직사각형 노드 폭 2.4in × 높이 0.9in, 12열 그리드에 정확히 스냅. 노드 사이 간격 0.4in을 3pt 룰 라인 + 채운 삼각형 화살촉으로 연결(좌→우). 노드 좌상단에 정사각형 번호 배지, 노드 내부는 24pt 헤드라인 + 14pt 대문자 캡션. 활성 단계 1개만 스팟 컬러 블록 채움(텍스트 반전), 나머지는 1pt 룰 라인 아웃라인 노드. - **타임라인:** 수평 축 = 3pt 솔리드 룰 라인 `#111111`, 좌우 끝 12열 그리드 경계에 정렬. 마일스톤 마커 = 축 위 한 변 0.2in 정사각형, 축에서 0.5in 올린 위치에 14pt 대문자 날짜 라벨 + 24pt 헤드라인. 현재 시점만 스팟 컬러 정사각형 + 그 위 88pt 스팟 활자 키워드. 마커 간격은 실제 날짜 비례. - **비교 레이아웃:** 2~3열 대조, 각 열 폭 균등(12열을 6+6 또는 4+4+4). 열 사이 3pt 세로 룰 라인으로만 구분(박스 보더 없음). 각 열 최상단 44pt 헤드라인 + 그 아래 0.5in 띄우고 14pt 대문자 캡션 항목들. 우세/추천 열 1개만 헤드라인을 스팟 컬러로, 나머지 무채색. vs 표기는 열 사이 거대 88pt 스팟 활자 "VS". - **매트릭스 2×2:** 정사각 사분면, 한 변 4.2in, 12열 그리드 중앙 정렬. 사분면 구분은 3pt 십자 룰 라인만(셀 채움·보더 박스 없음). 축 라벨 = 상하·좌우 끝에 14pt 대문자 자간 0.08em. 데이터 포인트 = 한 변 0.3in 무채색 정사각형 + 옆 24pt 라벨, 핵심 포인트 1개만 스팟 컬러 정사각형. - **계층/퍼널:** 수직 적층 직사각형 단(段), 각 단 높이 0.9in 균등, 폭은 위→아래(계층) 또는 아래→위(퍼널)로 단계적 축소 — 폭 차이 1.6in씩. 단 사이 간격 0.12in. 각 단 좌측에 정사각형 번호 배지, 내부 24pt 헤드라인 + 14pt 대문자 캡션. 정점/병목 단 1개만 스팟 컬러 채움. - **KPI·스탯 카드:** 카드는 박스 보더 없이 12열 그리드 셀에 스냅된 영역으로 정의. 거대 수치 = 88pt `Archivo Black` 스팟 컬러(슬라이드당 1색), 그 아래 3pt 룰 라인, 룰 아래 14pt 대문자 캡션 라벨. 증감은 채운 삼각형(▲▼) + 수치, 14pt 대문자. 카드 3개는 12열을 4+4+4로 균등 분할, 카드 사이 3pt 세로 룰 라인. ## 적용 예 - 표지: 웜 화이트 배경, 화면을 가로지르는 130pt 검정 압축 활자 제목(우측 글자가 경계에서 잘림), 하단 좌측에 오렌지 블록 + 14pt 대문자 캡션. - 본문: 좌측 1~6열에 44pt 헤드라인 + 24pt 본문, 우측 7~12열에 거대 88pt 스팟 컬러 키워드 한 단어. - 차트: SVG 각진 막대 차트. 막대 폭:간격 = 3:2, 12열 그리드 스냅. 막대는 전부 무채색(`#111111`/반전 `#F2F0EB`) + 핵심 막대 1개만 슬라이드 스팟 컬러. 격자선·범례 제거, x축만 3pt 룰 라인, 기준선 0. 값 레이블 14pt `Inter` 대문자 자간 0.08em으로 직접 표기, 항목명 막대 아래 14pt 대문자. - 다이어그램(프로세스): SVG 4단계 플로우. 직사각형 노드(2.4×0.9in, 반경 0) 12열 그리드 스냅, 3pt 룰 라인 + 채운 삼각형 화살촉으로 좌→우 연결. 노드 좌상단 정사각형 번호 배지, 활성 단계 1개만 스팟 컬러 블록 채움. - 다이어그램(매트릭스 2×2): SVG 정사각 사분면(4.2in), 3pt 십자 룰 라인으로만 분할(셀 채움 없음). 축 라벨 14pt 대문자 자간 0.08em, 데이터 포인트는 0.3in 무채색 정사각형 + 핵심 1개만 스팟 컬러.
복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.