PPTppt-confident-color-block-deck

Confident Color-Block Deck

흰 바탕에 큼직한 솔리드 컬러 블록(슬라이드당 1~2색)을 비대칭으로 깔고 화이트 헤비 산세리프를 얹는 자신감 있는 모던 피치 덱.

미리보기

Confident Color-Block Deck 샘플 렌더

색 토큰

bg
#FFFFFF
surface
#FFFFFF
text
#141414
text_muted
#6E6E6E
text_on_block
#FFFFFF
accent 1
#F0531C
accent 2
#1D4ED8
accent 3
#1B6E4A
border
#E0E0E0

타이포 · 간격 토큰

display · {"family":"Archivo","fallback":"Space Grotesk, Helvetica, Pretendard","size":"60pt","weight":800,"tracking":"-0.025em","leading":1}
headline · {"family":"Archivo","size":"38pt","weight":700,"tracking":"-0.015em","leading":1.05}
kicker · {"family":"Archivo","size":"13pt","weight":700,"tracking":"0.06em","case":"uppercase"}
body · {"family":"Archivo","fallback":"Space Grotesk, Pretendard","size":"19pt","weight":400,"leading":1.4}
kpi · {"family":"Archivo","size":"80pt","weight":800}
caption · {"family":"Archivo","size":"11pt","weight":400,"color":"#6E6E6E"}
spacing.unit · 8
spacing.margin_x · 0.7in
spacing.margin_y · 0.6in
spacing.block_padding · 0.6in

스타일 축

색채vivid-primary
타이포heavy-display
레이아웃asymmetric
여백airy
모션snappy
familyconfident-color-block

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 시각 원리(컬러 블록 비율·비대칭 배치·차트 스타일) 명세이며 특정 피치 덱 템플릿이나 Figma 브랜드 자산·로고 사본이 아니다. 폰트는 오픈 라이선스 대체(Archivo / Space Grotesk)를 지정한다.

이 팩 적용하기 — design-pick 스킬

Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.

PPT 만들기
design-pick 스킬로 "ppt-confident-color-block-deck" 팩을
적용해서 [내 주제] 발표자료를 만들어줘

스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick .claude/skills/에 복사하면 됩니다.

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 컨피던트 컬러블록 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 흰 바탕에 큼직한 솔리드 컬러 블록을 비대칭으로 대담하게 깔고 그 위에 화이트 텍스트를 크게 얹는, 자신감 있는 모던 피치 미감.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 슬라이드마다 캔버스 면적의 35~55%를 차지하는 솔리드 컬러 블록 1~2개가 비대칭으로 앉아 있다(직사각형, 풀하이트 컬럼, 또는 풀블리드 절반). (2) 컬러 블록 위 텍스트는 화이트, 흰 바탕 위 텍스트는 잉크 블랙 — 그 외 색 텍스트 없음. (3) 굵은 그로테스크 산세리프 헤드라인이 블록 안에 크게 비대칭으로 앉고, 본문은 같은 패밀리 레귤러로 절제된다.

## 색
- 배경 `#FFFFFF` (순백 고정, 그라디언트·텍스처 금지)
- 컬러 블록 팔레트(슬라이드당 1~2색만): 오렌지 `#F0531C` / 코발트 `#1D4ED8` / 딥그린 `#1B6E4A`. 이 3색이 강조색 전체 — 다른 색 금지.
- 흰 바탕 위 텍스트 `#141414` (잉크 블랙)
- 컬러 블록 위 텍스트 `#FFFFFF`
- 보조 텍스트·캡션(흰 바탕) `#6E6E6E`
- 헤어라인·구분선(필요 시) `#E0E0E0` (1px) — 최소 사용
- 컬러 블록은 솔리드 평면 채움만. 그라디언트·그림자·투명도 금지.

## 타이포그래피
- 폰트: `Archivo`(헤드라인) + `Archivo`(본문, 같은 패밀리). 대체 `Space Grotesk`, `Helvetica`. 한글 병기 시 `Pretendard`.
- 표지/섹션 헤드라인: 60pt / Archivo / ExtraBold(800) / 자간 -2.5% / 행간 1.0 / 최대 3줄
- 슬라이드 헤드라인: 38pt / Archivo / Bold(700) / 자간 -1.5% / 행간 1.05 / 최대 2줄
- 키커 라벨: 13pt / Archivo / Bold(700) / 대문자 / 자간 +6%
- 본문: 19pt / Archivo / Regular(400) / 행간 1.4 / 슬라이드당 최대 5줄
- 거대 퍼센트 숫자: 80pt / Archivo / ExtraBold(800)
- 캡션·출처: 11pt / Archivo / Regular(400) / 색 `#6E6E6E`

## 레이아웃 / 그리드
- **비대칭 12열 그리드.** 좌우 여백 각 0.7in, 상하 각 0.6in. 단, 컬러 블록은 여백을 무시하고 캔버스 가장자리까지 풀블리드로 나갈 수 있다.
- 컬러 블록 패턴(슬라이드마다 의도적으로 다르게): ① 좌측 5열 풀하이트 컬러 컬럼 + 우측 7열 흰 면, ② 우상단 코너 큰 직사각 블록, ③ 캔버스 하단 절반 풀블리드 블록, ④ 두 색 블록이 대각선으로 비대칭 배치.
- 헤드라인은 컬러 블록 안에서 좌측 정렬, 블록 안쪽 패딩 0.6in. 텍스트가 블록의 상단 또는 하단에 치우치게(중앙 정렬 금지).
- 본문 텍스트는 흰 면에 배치, 좌측 정렬, 최대 폭 5열.
- 좌하단 슬라이드 번호 11pt, 우하단 출처 캡션 11pt(흰 면 위).

## 형태 / 질감
- 모서리 반경 0px — 컬러 블록·이미지·도형 모두 직각. 둥근 모서리 전면 금지.
- 그림자·그라디언트·글로우·텍스처 전면 금지. 깊이는 색 대비로만.
- 아이콘은 2pt 스트로크 라인 아이콘만(또는 솔리드 단색 도형), 단색 — 흰 면에선 `#141414`, 컬러 블록 위에선 `#FFFFFF`.
- 이미지는 직각 크롭, 보더 없음. 듀오톤(블록 색 + 흰) 처리 허용.

## 차트 / 데이터 시각화 (컬러 블록 — 평면 채도색 + 큰 퍼센트)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩의 차트는 "컬러 블록과 같은 채도의 평면 도형이 큰 숫자와 함께 한눈에 외쳐지는" 그래픽이다.
- **차트 영역(절대값):** 플롯 영역 가로 약 6.5in × 세로 약 3.6in. 흰 면 위에 그리거나, 컬러 블록 위에 흰 데이터로 반전해 그린다. 모든 막대·축은 픽셀 단위 정렬.
- **차트 타입 매칭:** 항목 비교=세로 막대(굵게), 비중=도넛(조각 3개 이하, 중앙에 80pt 퍼센트) 또는 100% 누적 막대 1줄, 추세=라인(굵게). 파이 5조각 이상·3D 금지.
- **데이터 잉크 최소화:** 차트 테두리 박스·배경 채움·범례 박스 제거. 격자선 그리지 않음(컬러 블록 미감엔 격자선이 노이즈). y축 눈금 라벨 생략 — 값은 직접 레이블로.
- **축:** x축 기준선만 1pt 헤어라인(흰 면=`#E0E0E0`, 컬러 블록 위=`#FFFFFF` 30% 불투명). y축선 생략. **막대 기준선은 데이터 0에서 시작**(잘린 y축 금지).
- **직접 레이블링:** 카테고리 이름을 각 막대 아래 13pt Bold(흰 면=`#141414`, 블록 위=`#FFFFFF`). 값 레이블은 막대 끝 위 0.08in에 20pt ExtraBold, 가장 중요한 값 1개는 별도 80pt 거대 퍼센트로 차트 옆/위에. 자릿수·단위 일관, 탭형 정렬.
- **데이터 색:** 강조할 막대 1개만 슬라이드의 블록 색(`#F0531C`/`#1D4ED8`/`#1B6E4A` 중 1색), 나머지 막대는 `#C9C9C9`(중립 회색). 컬러 블록 위에 그릴 땐 강조 막대 `#FFFFFF`·나머지 흰색 35% 불투명. 무지개·계열별 다른색 금지.
- **세로 막대:** 막대 폭 : 간격 = 4 : 2(굵은 막대 — 자신감 있게). 모서리 반경 0px. 외곽선 없음, 평면 솔리드 채움.
- **도넛:** 링 두께 균일(반지름의 약 30%), 조각 3개 이하, 강조 조각만 블록 색·나머지 `#C9C9C9`, 중앙에 80pt ExtraBold 핵심 퍼센트. 3D·다중 링 금지.
- **라인 차트:** 3pt 실선(굵게), 강조 계열만 블록 색·비교 계열 `#C9C9C9` 2pt, 마커는 끝점에만 지름 8px 원. 면적 채움 없음. 직선 세그먼트.
- **헤드라인 + 출처:** 차트 슬라이드도 38pt 헤드라인 의무. 차트 하단에 단위 명기, 우하단 11pt 출처 캡션 의무.

## 다이어그램·컴포넌트 (컬러 블록 — 직각 솔리드 도형이 큰 번호와 함께 외쳐진다)
다이어그램은 전부 SVG로 정밀 렌더한다(div 블록 금지). 이 팩의 다이어그램 언어는 컬러 블록·차트와 동일하다 — **모서리 반경 0px 직각, 평면 솔리드 채움, 활성 노드 1개만 슬라이드 블록 색·나머지 중립 회색 `#C9C9C9`, 그림자·그라디언트 없음**. 화살촉은 굵은 솔리드 삼각(채움). 단계 번호는 동일 배지로: 0.5in 정사각형 솔리드 블록(슬라이드 블록 색 채움, 직각), 안에 `Archivo` ExtraBold 22pt `#FFFFFF` — 비활성 단계는 `#C9C9C9` 채움. 다이어그램도 비대칭으로 배치(중앙 정렬 금지). 텍스트는 흰 면 위 `#141414`, 블록·노드 위 `#FFFFFF`.
- **프로세스 플로우:** 수평 단계 노드, 노드 = 직각 솔리드 사각 블록, 폭 2.3in × 높이 1.0in, 반경 0px, 내부 패딩 0.22in. 활성 1개만 슬라이드 블록 색 채움(`#FFFFFF` 라벨), 나머지 `#C9C9C9` 채움(`#141414` 라벨). 노드 안 좌상단 0.5in 정사각 번호 배지, 그 아래 19pt `Archivo` Bold 라벨. 커넥터 = 3pt `#141414` 실선 + 굵은 솔리드 삼각 화살촉(폭 0.14in). 노드 간격 0.35in. 최대 5단계.
- **타임라인:** 수평 3pt `#141414` 굵은 축 막대 1줄. 마일스톤 마커 = 한 변 0.18in 정사각형(45° 회전 금지 — 직각 유지), `#C9C9C9` 채움, 핵심 시점만 슬라이드 블록 색 채움. 마커 위 13pt `Archivo` Bold 대문자 날짜, 마커 아래 19pt `Archivo` Bold 이벤트명. 마커 6개 이하, 등간격.
- **비교 레이아웃:** 2~3열 대조. 각 열 = 풀하이트 솔리드 컬러 블록(서로 다른 팔레트 색 또는 1색+`#C9C9C9`), 헤더는 블록 안 상단 좌측 정렬 38pt `Archivo` Bold `#FFFFFF`, 본문 19pt. 열 사이 간격 0px(블록끼리 맞붙임 — 색 경계가 구분선). 중앙 정렬 금지, 텍스트 상단 치우침.
- **매트릭스 / 2×2:** 4개 직각 사분면을 솔리드 블록으로 채운다 — 3개 `#C9C9C9`·강조 1개만 슬라이드 블록 색(흰 십자 1px 분리선). 또는 사분면 채움 없이 4pt `#141414` 굵은 십자 축. 축 라벨 13pt `Archivo` Bold 대문자, 사분면명 19pt Bold. 데이터 포인트 = 한 변 0.2~0.5in 직각 정사각, 강조 1개만 블록 색·나머지 `#C9C9C9`.
- **계층 / 피라미드 / 퍼널:** 3~4레벨, 위→아래 폭이 변하는 직각 막대 스택(사다리꼴 아닌 계단형 직사각 권장). 각 레벨 솔리드 채움 — 강조 1레벨만 슬라이드 블록 색·나머지 `#C9C9C9`. 레벨 사이 0.06in 흰 간격. 레벨 라벨 도형 안 19pt `Archivo` Bold(`#FFFFFF` 또는 `#141414`).
- **KPI·스탯 카드:** 직각 솔리드 컬러 블록 카드 — 슬라이드 블록 색 채움 또는 흰 면 + 굵은 색 보더(상단 6px). 구성 = 13pt `Archivo` Bold 대문자 키커 → 80pt `Archivo` ExtraBold 거대 퍼센트/숫자 → 19pt 설명. 컬러 블록 카드는 텍스트 전부 `#FFFFFF`. 증감은 수치 옆 굵은 솔리드 ▲/▼ 삼각 글리프 + 16pt Bold. 카드 사이 간격 0px 또는 0.2in.

## 전환 (PPT)
컬러 블록이 화면 밖에서 미끄러져 들어오는 짧고 단호한 모션 — 0.25s, ease-out, 이동 거리 캔버스 폭의 15% 이내. 페이드·바운스·회전 금지. 텍스트는 전환 없이 즉시 표시.

## 하지 말 것
- 둥근 모서리(반경 1px 이상) — 모든 도형·블록·이미지 직각.
- 그림자·그라디언트·글로우·투명 그라디언트 — 컬러 블록은 평면 솔리드.
- 팔레트 외 색 사용, 슬라이드당 컬러 블록 3색 이상.
- 컬러 텍스트 — 텍스트는 흰 면 위 잉크 블랙, 블록 위 화이트 둘뿐.
- 모든 요소 중앙 정렬 — 헤드라인·본문 전부 좌측 정렬, 블록 안에서도 좌측·상하 치우침.
- 슬라이드마다 같은 컬러 블록 위치 반복 — 4가지 블록 패턴을 의도적으로 교차한다.
- **아마추어 차트 회귀 금지:** 3D·입체 막대, 막대 그림자·광택·베벨, 무지개·계열별 색칠, 격자선, 차트 테두리 박스, 배경 채움, 범례 박스, 잘린 y축, div 블록 막대, 둥근 막대, 그라디언트 채움.
- 이모지 불릿·클립아트·스톡 아이콘.

## 적용 예
- **표지:** 좌측 5열 풀하이트 오렌지 `#F0531C` 컬러 컬럼 — 그 안에 60pt ExtraBold 헤드라인 3줄(화이트, 블록 상단 치우침) + 하단에 13pt 키커. 우측 7열 흰 면에 13pt 메타 정보. 직각.
- **본문 슬라이드:** 우상단 코너에 큰 코발트 `#1D4ED8` 직사각 블록(38pt 화이트 헤드라인 좌측 정렬). 좌하단 흰 면에 19pt 본문 4줄 + 키커. 직각.
- **차트 슬라이드:** 38pt 헤드라인. 좌측 흰 면에 약 6.5×3.6in SVG 세로 막대 — 막대 폭:간격 4:2, 강조 막대 1개만 블록 색·나머지 `#C9C9C9`, 막대 끝 위 20pt ExtraBold 탭형 값, 막대 아래 13pt Bold 카테고리, x축 1pt 헤어라인, 격자선 0개, 막대는 데이터 0 기준선. 우측에 가장 중요한 값을 80pt 거대 퍼센트로. 차트 하단 단위, 우하단 11pt 출처.
- **프로세스 다이어그램 슬라이드:** 38pt 헤드라인. 4단계 수평 플로우 — 각 노드 2.3×1.0in 직각 솔리드 블록, 활성 1개만 슬라이드 블록 색·나머지 `#C9C9C9`, 노드 안 0.5in 정사각 번호 배지 + 19pt Bold 라벨, 3pt `#141414` 커넥터 + 굵은 솔리드 삼각 화살촉. 비대칭 배치.
- **매트릭스 슬라이드:** 38pt 헤드라인. 2×2 사분면을 직각 솔리드 블록으로 — 3개 `#C9C9C9`·강조 1개만 블록 색, 흰 1px 십자 분리선, 13pt Bold 대문자 축 라벨 + 19pt 사분면명. 또는 4개 직각 솔리드 KPI 컬러 블록 카드 행 — 80pt ExtraBold 거대 퍼센트 + 13pt 키커 + 굵은 ▲/▼.

복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.