Warm Hospitality Deck
흰 캔버스에 단일 산호-레드 강조와 둥근 터미널 휴머니스트 산세리프, 풀블리드 라운드 코너 사진의 환대 미감 덱.
미리보기

색 토큰
bg
#FFFFFF
surface
#FBF7F4
text
#2B2B2E
text_muted
#79767A
accent
#F4625F
accent_tint
#FBD9D7
border
#EDE8E4
타이포 · 간격 토큰
display · {"family":"Poppins","fallback":"Quicksand, Nunito Sans, Pretendard","size":"52pt","weight":600,"tracking":"-0.01em","leading":1.1}
title · {"family":"Poppins","size":"32pt","weight":600,"tracking":"-0.005em","leading":1.2}
kicker · {"family":"Poppins","size":"12pt","weight":600,"tracking":"0.06em","case":"uppercase","color":"#F4625F"}
body · {"family":"Poppins","size":"18pt","weight":400,"leading":1.5}
card_header · {"family":"Poppins","size":"16pt","weight":500}
kpi · {"family":"Poppins","size":"48pt","weight":600,"color":"#F4625F"}
caption · {"family":"Poppins","size":"10pt","weight":400,"color":"#79767A"}
spacing.unit · 8
spacing.margin_x · 0.7in
spacing.margin_y · 0.6in
spacing.gutter · 0.18in
스타일 축
| 색채 | earth |
| 타이포 | minimal-sans |
| 레이아웃 | full-bleed |
| 여백 | airy |
| 모션 | playful |
| family | warm-hospitality |
출처
원자산은 각 출처 라이선스를 따름. 본 팩은 시각 원리만 명세하며 영감 브랜드의 독점 폰트·로고·독점 자산을 복제하지 않는다. 폰트는 오픈 라이선스 Poppins.
이 팩 적용하기 — design-pick 스킬
Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.
design-pick 스킬로 "ppt-warm-hospitality-deck" 팩을 적용해서 [내 주제] 발표자료를 만들어줘
스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick을 .claude/skills/에 복사하면 됩니다.
스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
# Warm Hospitality Deck — ppt 디자인 팩 아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 흰 캔버스에 단 하나의 따뜻한 산호-레드를 브랜드 전압처럼 쓰고, 풀블리드 라운드 코너 사진과 둥근 지오메트릭 산세리프로 여행 매거진 같은 환대(hospitality) 미감을 낸다. ## 이 스타일의 정체성 한눈에 알아보는 단서: (1) 순백 배경에 따뜻한 산호-레드 `#F4625F` 하나가 CTA·평점 점·핵심 지표를 모두 연결한다, (2) 사진은 풀블리드에 가까운 큰 면적 + 일관된 라운드 코너 20px, (3) 둥근 터미널의 지오메트릭 휴머니스트 산세리프와 넉넉한 여백, 부드럽게 튀어오르는 경쾌한 전환. 친근하지만 구조는 또렷하다. ## 색 - 배경 `#FFFFFF` (순백 고정) - 표면/카드 `#FBF7F4` (따뜻한 기 도는 아주 옅은 오프화이트) - 본문 텍스트 `#2B2B2E` (따뜻한 차콜), 보조 텍스트·캡션 `#79767A` - 헤어라인·구분선 `#EDE8E4` (1px, 최소 사용) - 강조색 **1개만**: `#F4625F` (따뜻한 산호-레드). CTA 버튼·평점 점·핵심 KPI 숫자·차트 주계열에만. - 강조 보조 톤: `#FBD9D7` (산호 10% 톤, 차트 보조·하이라이트 면에만). 그 외 컬러 금지. ## 타이포그래피 - 폰트: `Poppins` (대체 `Quicksand`, `Nunito Sans`). 한글 병기 시 `Pretendard`. - 표지 디스플레이: 52pt / SemiBold(600) / 자간 -1% / 행간 1.1 / 최대 3줄 - 슬라이드 제목: 32pt / SemiBold / 자간 -0.5% / 행간 1.2 / 최대 2줄 - 섹션 키커: 12pt / SemiBold / 대문자 / 자간 +6% / 색 `#F4625F` - 본문: 18pt / Regular(400) / 행간 1.5 / 슬라이드당 최대 6줄 - 카드 헤더: 16pt / Medium(500) - KPI 대형 숫자: 48pt / SemiBold / 색 `#F4625F` - 캡션·출처: 10pt / Regular / 색 `#79767A` ## 레이아웃 / 그리드 - **12열 그리드, 풀블리드 사진 중심.** 좌우 여백 각 0.7in, 상하 여백 각 0.6in. 거터 0.18in. - 사진은 슬라이드의 절반(좌 6열 또는 우 6열) 또는 전면을 풀블리드로 채우고 텍스트는 반대편 또는 사진 위 카드에. 사진 가장자리는 슬라이드 끝까지 출혈(bleed)시키되 라운드 코너 20px 유지. - 제목 영역: 상단 0.6~1.7in. 제목 위 키커. - 카드: `#FBF7F4` 면 채움, 보더 없음, 라운드 20px, 내부 패딩 0.25in. - 우하단 7.0~7.3in에 출처/페이지 캡션 10pt. ## 형태 / 질감 - 모서리 반경 20px (사진·카드·버튼 공통, 일관 유지). 그림자는 사진·카드에 매우 옅게 1개 `0 8px 24px rgba(43,43,46,0.08)` 또는 생략. - 아이콘은 2px 스트로크 둥근 끝(rounded cap) 라인 아이콘, 단색 `#2B2B2E` 또는 강조 `#F4625F`. - 평점·강조 점은 산호 `#F4625F` 원형 도트. ## 차트 / 데이터 시각화 (환대식 — 둥근 끝 바 + 산호 단색) 차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 이 팩 차트의 핵심은 "굵고 둥근 끝(rounded cap) 막대 + 산호 단색 + 그리드라인 제거로 따뜻하고 명료하게"다. - **차트 영역(절대값):** 플롯 영역 가로 약 5.6in × 세로 약 3.3in. 좌측 값축 여유 0.25in, 하단 라벨 0.45in. - **차트 타입 매칭:** 항목 비교=가로 또는 세로 막대(둥근 끝, 기본), 비중=도넛(조각 3개 이하, 둥근 끝 세그먼트, 중앙 핵심 수치 48pt), 추세=라인. 파이 5조각 이상·3D 금지. - **데이터 잉크 최소화:** 차트 테두리 박스·배경 채움·범례 박스·격자선 전부 제거(그리드라인 0개 원칙). y축 라벨 생략, 값은 막대에 직접. - **축:** x축 기준선 0.75pt `#EDE8E4` 1줄만(생략도 허용). **막대 기준선은 데이터 0에서 시작**(잘린 y축 금지). - **직접 레이블링:** 범례 대신 카테고리명을 막대 옆/아래 12pt `#79767A`로. 값 레이블은 16pt SemiBold, 강조 막대 값 `#F4625F`·나머지 `#2B2B2E`, 자릿수·단위 일관. - **데이터 색:** 강조 막대 1개만 `#F4625F`, 나머지 막대는 `#FBD9D7`(산호 10% 톤). 무지개·계열별 다른 hue 금지. 계열 2개면 `#F4625F` + `#FBD9D7`. - **둥근 끝 막대:** 막대 폭 : 간격 = 3 : 2. 막대 양 끝(또는 값 끝)에 막대 폭 절반 반경의 라운드 캡. 모든 막대 정렬·기준선 0 정확히. - **도넛:** 링 두께 막대 굵기와 일치, 세그먼트 끝 라운드, 조각 3개 이하, 중앙에 48pt 산호 핵심 수치. - **단위·출처:** 차트 하단에 단위 명기, 우하단 10pt 출처 캡션 의무. ## 다이어그램·컴포넌트 (환대식 — 둥근 20px 카드 노드 + 산호 도트 커넥터) 색·차트만으로는 색 팔레트일 뿐이다. 이 팩은 아래 컴포넌트를 한 다이어그램 언어로 묶는다 — **모든 노드는 모서리 반경 20px(팩 전역 반경과 일치), 채움 `#FBF7F4`(보더 없음), 커넥터는 2px `#F4625F` 둥근 끝(rounded cap) 선, 단계 번호는 지름 0.34in 산호 원형 도트(`#F4625F` 면·흰 숫자 14pt SemiBold), 강조 1요소만 `#F4625F` 면**. 모두 SVG로 정밀 렌더(div 블록 금지). - **프로세스 플로우:** 가로 3~5단계. 각 노드 폭 2.1in × 높이 0.95in 둥근 카드(반경 20px) `#FBF7F4` 면, 좌상단 산호 원형 번호 도트 + 제목 16pt Medium + 캡션 12pt `#79767A`. 커넥터는 2px `#F4625F` 둥근 끝 선 + 끝에 7px 둥근 화살촉. 노드 간격 0.4in. 현재 단계 1개만 `#F4625F` 면·흰 텍스트. - **타임라인:** 수평 축 — 2px `#EDE8E4` 둥근 끝 베이스라인, 마일스톤 마커는 지름 12px 산호 도트(흰 속·`#F4625F` 테두리 2.5px), 현재 시점만 지름 16px `#F4625F` 채움. 날짜 라벨 12pt `#79767A` 아래, 이벤트 제목 16pt Medium 위. 마일스톤 4~6개. - **비교 레이아웃:** 2~3열. 각 열은 `#FBF7F4` 둥근 카드(반경 20px, 패딩 0.25in), 열 사이 구분선 없음, 헤더 16pt Medium + 항목 18pt. 평점 항목은 산호 도트로 표시. 추천 열 1개만 헤더를 `#F4625F` 면·흰 텍스트로. - **매트릭스 / 2×2:** 축선 2px `#EDE8E4` 둥근 끝, 사분면 채움 없음, 축 라벨 12pt `#79767A` 대문자. 데이터 포인트는 지름 0.55in 산호 톤 원(`#FBD9D7` 면), 강조 1개만 `#F4625F` 면. 축 끝 둥근 마감. - **계층 / 퍼널:** 3~4단 수평 띠, 각 높이 0.8in, 반경 20px, 단계당 폭 18% 축소(둥근 모서리 유지). 띠 채움 `#FBF7F4`, 단계 라벨 16pt Medium 좌측 + 수치 16pt SemiBold 우측. 핵심 단 1개만 `#F4625F` 면·흰 텍스트. - **KPI·스탯 카드:** `#FBF7F4` 둥근 카드(반경 20px, 보더 없음, 패딩 0.25in). 거대 수치 48pt SemiBold `#F4625F` + 라벨 12pt `#79767A` 대문자, 평점은 산호 도트 행. 증감은 ▲/▼ 둥근 삼각형 + 값 14pt SemiBold. 카드 3~4개 가로 등간격 0.18in. ## 전환 (PPT) 부드럽게 튀어오르는 경쾌한 모션 — 위로 슬라이드 + 가벼운 바운스(0.3s, ease-out-back, 오버슈트 6% 이내). 사진은 살짝 줌인(scale 1.0→1.03, 0.4s). 회전·플립·과한 바운스 금지. ## 하지 말 것 - 강조색 2개 이상 쓰기, 본문 텍스트에 산호 입히기 — 강조는 `#F4625F` 하나, CTA·평점·KPI·차트 주계열에만. - 각진 모서리(반경 0). 사진을 직각으로 자르기 — 모든 사진·카드는 20px 라운드. - 진한 그림자·다중 그림자·그라디언트(산호 그라디언트 포함). - **아마추어 차트 회귀 금지:** 3D·입체 막대, 막대 그림자·광택, 무지개 계열색, 격자선(이 팩은 그리드라인 0개), 차트 테두리 박스, 범례 박스(계열 2개 이하일 때), 잘린 y축, div 블록 막대. - 이모지 불릿(산호 도트로 대체)·클립아트·채움 아이콘. - 슬라이드를 6줄 넘는 글로 채우기, 사진 없이 글만 가득한 슬라이드. ## 적용 예 - **표지:** 우 6열을 풀블리드 사진(라운드 20px, 슬라이드 끝까지 출혈), 좌 6열 순백에 키커 12pt + 52pt SemiBold 제목 3줄 + 18pt 서브카피. 하단 좌측에 날짜·작성처 10pt. - **본문 슬라이드:** 키커 + 32pt 제목. 좌 또는 우에 사진 절반, 반대편에 `#FBF7F4` 라운드 카드 1~2개(헤더 16pt + 본문 18pt). 평점·지표는 산호 도트 + 48pt KPI. 우하단 캡션. - **차트 슬라이드:** 키커 + 32pt 제목. 좌측에 약 5.6×3.3in SVG 둥근 끝 막대 차트 — 막대 폭:간격 3:2, 라운드 캡, 강조 막대 1개 `#F4625F`·나머지 `#FBD9D7`, 막대 값 16pt SemiBold 직접 레이블, 격자선 0개, x축 0.75pt 헤어라인(또는 생략), 막대 기준선 0. 우측에 해석 텍스트 3줄 + KPI 1개. 차트 하단 단위, 우하단 10pt 출처. - **프로세스 플로우 슬라이드:** 키커 + 32pt 제목. 본문 영역에 가로 4단계 둥근 카드 노드 — 각 2.1×0.95in `#FBF7F4` 면(반경 20px), 산호 원형 번호 도트, 16pt 제목 + 12pt 캡션, 사이는 2px `#F4625F` 둥근 끝 화살표. 현재 단계 1개만 `#F4625F` 면·흰 텍스트. 우하단 캡션. - **KPI·타임라인 슬라이드:** 키커 + 32pt 제목. 상단에 `#FBF7F4` 둥근 KPI 카드 3개 가로 등간격(48pt `#F4625F` 수치 + 12pt 라벨 + 산호 도트 평점), 하단에 수평 타임라인 — 2px `#EDE8E4` 둥근 끝 축, 산호 도트 마일스톤 4~6개, 현재 시점만 `#F4625F` 채움. 우하단 10pt 출처.
복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.