PPTppt-soft-pastel-system-deck

Soft Pastel System Deck

오프화이트 캔버스에 라일락·민트·피치 파스텔 3색과 부드러운 멀티 섀도, 통통한 라운드 노드·카드로 다이어그램을 한 키트로 묶는 촉각적 소프트 UI 덱.

미리보기

Soft Pastel System Deck 샘플 렌더

색 토큰

bg
#FAF7F4
surface
#FFFFFF
text
#3A3640
text_muted
#8A8492
accent 1
#C9BEEB
accent 2
#A6DAC9
accent 3
#F2C9AE
accent_saturated 1
#8B72D9
accent_saturated 2
#3FA98C
accent_saturated 3
#E08A4E
delta_up
#3FA98C
delta_down
#E0746C

타이포 · 간격 토큰

display · {"family":"Quicksand","fallback":"Verdana, Pretendard","size":"30pt","weight":700,"tracking":"0"}
card_header · {"family":"Quicksand","size":"14pt","weight":600,"tracking":"0.02em"}
kpi · {"family":"Quicksand","size":"46pt","weight":700}
node_number · {"family":"Quicksand","size":"18pt","weight":700}
body · {"family":"Nunito Sans","fallback":"Arial, Pretendard","size":"18pt","weight":400,"leading":1.45}
caption · {"family":"Nunito Sans","size":"11pt","weight":600,"color":"#8A8492"}
spacing.unit · 8
spacing.margin_x · 0.85in
spacing.margin_y · 0.65in
spacing.card_gap · 0.22in
spacing.card_padding · 0.26in
spacing.grid · 12-column, centered, generous rows

스타일 축

색채pastel
타이포minimal-sans
레이아웃centered
여백balanced
모션snappy
familysoft-pastel-system

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.

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

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

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

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

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# 소프트 파스텔 시스템 — ppt 디자인 팩

아래 지시를 한 블록으로 따라 16:9(13.33×7.5in) 슬라이드 덱을 만든다. 소프트 파스텔 시스템 — 포근한 오프화이트 캔버스에 라일락·민트·피치 파스텔 3색, 부드러운 멀티 섀도가 통통한 라운드 카드·노드를 살짝 띄우는 촉각적 소프트 UI 다이어그램 키트.

## 이 스타일의 정체성
한눈에 알아보는 단서: (1) 모든 다이어그램 도형이 통통한 큰 라운드 코너(반경 16~24px) + 라일락·민트·피치 파스텔 채움, (2) 한 줄짜리 하드 섀도가 아닌 부드러운 멀티 레이어 섀도가 도형을 종이처럼 살짝 띄운다, (3) 둥근 휴머니스트 산세리프. 도형이 만지고 싶게 통통하고 따뜻하다.

## 색
- 배경 `#FAF7F4` (포근한 오프화이트)
- 카드/노드 표면 `#FFFFFF`
- 파스텔 3색 시스템(다이어그램 채움):
  - 라일락 `#C9BEEB` — 1차
  - 민트 `#A6DAC9` — 2차
  - 피치 `#F2C9AE` — 3차
- 강조 채도 버전(강조 1요소 전용): 라일락 진 `#8B72D9`, 민트 진 `#3FA98C`, 피치 진 `#E08A4E`
- 본문 텍스트 `#3A3640`, 보조 `#8A8492`
- 파스텔 위 텍스트 `#3A3640`(어두운 잉크 — 파스텔이 옅어 반전 불필요)
- 강조색은 파스텔 3색 + 그 진한 버전뿐. 4번째 색군·원색·네온 금지.

## 타이포그래피
- 폰트: `Quicksand`(디스플레이·헤딩, 둥근 휴머니스트, 대체 `Verdana`), 본문 `Nunito Sans`(대체 `Arial`). 한글은 `Pretendard`.
- 슬라이드 타이틀: 30pt / Quicksand 700 / 자간 0
- 카드 헤더: 14pt / Quicksand 600 / 자간 +2%
- KPI 대형 수치: 46pt / Quicksand 700 / 강조 진한 파스텔
- 노드 번호: 18pt / Quicksand 700 / 떠 있는 원 배지 안
- 본문: 18pt / Nunito Sans 400 / 행간 1.45 / 슬라이드당 6줄 이하
- 캡션·축 레이블: 11pt / Nunito Sans 600 / 색 `#8A8492`

## 레이아웃 / 그리드
- **센터드(balanced).** 좌우 여백 각 0.85in, 상하 0.65in. 12열 그리드, 행 간격 넉넉.
- 콘텐츠 블록은 슬라이드 중앙축 기준 정렬(센터드 위계 — 단, 본문 슬라이드는 좌우 비대칭 허용해 단조로움 회피).
- 카드 간격 0.22in(섀도가 번질 여유). 카드 내부 패딩 0.26in.
- 한 슬라이드 핵심 메시지 1개. 라운드 카드/노드 모듈 3~5개.

## 형태 / 질감
- 모서리 반경 16~24px(통통한 라운드). 작은 칩·배지는 풀라운드.
- 보더 없음(또는 1px `#FFFFFF` 안쪽 하이라이트). 경계는 섀도가 만든다.
- **소프트 멀티 섀도(정체성):** 2겹 — (1) `0 2px 6px` 검정 6%, (2) `0 12px 28px` 도형 파스텔색 22% 알파. 컬러드 섀도가 따뜻함의 핵심.
- 아이콘: 둥근 끝(round cap) 2.5px 스트로크 라인 아이콘, 파스텔 원 칩 안에 진한 파스텔색.
- 그라디언트·하드 섀도·각진 모서리 금지.

## 차트·데이터 시각화 (라운드캡 파스텔 차트 — 부드럽지만 정확하게)
차트는 SVG로 정밀 렌더한다(div 블록 막대 금지). 부드러운 미감이어도 데이터는 정확하다 — 섀도는 약하게, 값 라벨은 또렷하게.
- **데이터 색:** 막대·라인은 파스텔 3색. 단일 계열이면 라일락 `#C9BEEB`, 강조할 막대 **1개만** 진한 라일락 `#8B72D9`(채도↑). 다계열은 라일락/민트/피치 3색(4계열 이상 금지). 증가=진한 민트 `#3FA98C`, 감소=`#E0746C`(부드러운 경고).
- **막대 형태:** 막대 폭 : 간격 = 3 : 2, 모서리 **라운드캡**(상단 반경 8px — 차트도 통통하게). 베이스라인 0에서 정확히(잘린 y축 금지).
- **섀도 제어:** 막대·도넛에 약한 컬러 섀도(`0 3px 8px` 파스텔색 18%)만. 값 라벨·축 라벨엔 섀도 금지.
- **데이터 잉크 최소화:** 격자선은 y축 주요 눈금 0.5pt `#EDE8E2` **2~3개만**. 차트 테두리 박스·플롯 배경 채움 제거. x축 베이스라인 0.75pt `#D6CFC7`.
- **값 레이블:** 막대 끝/꼭짓점/도넛 조각에 직접 표기. `Quicksand` 14pt 600, 색 `#3A3640`, 탭형 정렬, 단위·자릿수 일관. 카테고리명 막대 아래 11pt `#8A8492`. 범례 박스 금지 — 계열명 차트 상단 파스텔 원 점 + 11pt 라벨 인라인.
- **차트 타입 매칭:** 비교=라운드캡 세로/가로 막대, 추세=곡선 보간 라인(2.5pt, 둥근 끝, 속 빈 원 마커 + 옅은 파스텔 면적 16% 알파), 비중=도넛(조각 3개 이하, 라운드 아크 끝, 중앙 핵심 수치 26pt + 라벨 11pt). 파이·3D·다중 도넛 금지.
- **출처:** 차트 하단 좌측 11pt Nunito Sans `#8A8492` 출처·단위 캡션 의무.

## 다이어그램·컴포넌트 (통통한 라운드 파스텔 다이어그램 키트)
색만으로는 템플릿이 아니다. 아래 컴포넌트를 모두 SVG로 정밀 렌더하며(div 블록 금지) **하나의 다이어그램 언어**를 공유한다 — 모든 노드/카드는 통통한 라운드(반경 16~24px) + 파스텔 또는 흰 채움 + 소프트 더블 섀도, 보더 없음, 커넥터는 3pt 둥근끝 선, 번호는 떠 있는 풀라운드 파스텔 원 배지(흰 또는 잉크 18pt Quicksand), 강조는 단 1요소만 진한 파스텔 채도.
- **프로세스 플로우:** 가로 3~6단계, 각 노드 = 통통한 라운드 사각(높이 1.1in, 파스텔 채움 라일락→민트→피치 순환 + 소프트 더블 섀도), 노드 사이 3pt 둥근끝 `#D6CFC7` 선 커넥터(작은 둥근 화살촉). 단계 번호는 노드 좌상단에 떠 있는 풀라운드 흰 원 배지(0.4in, 진한 파스텔 숫자). 활성 단계만 진한 파스텔 채움.
- **타임라인:** 가는 라운드 베이스 라인(3pt `#E3DDD6`, 둥근 끝), 마일스톤은 부푼 원형 도트(0.22in, 파스텔 채움 + 소프트 섀도), 현재 시점은 진한 파스텔 + 펄스 링(2pt 동심원). 날짜는 도트 아래 11pt `#8A8492`, 이벤트명 위 14pt.
- **비교 레이아웃:** 2~3 라운드 카드(흰 채움 + 소프트 더블 섀도), 추천 카드만 더 들어 올림(섀도 강화 `0 18px 36px` 22% + 위로 0.12in 이동). 카드 상단 14pt Quicksand 600 헤더 + 파스텔 원 아이콘 칩, 행은 0.5pt `#EDE8E2` 헤어라인 구획. 우세 항목 진한 파스텔 텍스트.
- **매트릭스 2×2:** 4개 라운드 사각 존(반경 20px, 파스텔 12% 옅은 틴트 채움), 존 사이 0.16in 거터. 1pt `#D6CFC7` 십자 축. 데이터 포인트는 부푼 원형 버블(0.3~0.5in, 파스텔 채움 + 소프트 섀도, 크기=세 번째 변수). 축 라벨 바깥 11pt 600.
- **계층/퍼널:** 라운드 적층 단 — 위→아래 폭 좁아지는 4~5단(통통한 라운드 사각, 파스텔 1색 명도 단계 연→진, 단 사이 0.12in 간격), 각 단 안 14pt 단계명 + 우측 46pt Quicksand 수치 + 전환율 11pt 델타.
- **KPI·스탯 카드:** 부푼 라운드 카드(흰 채움, 반경 20px, 소프트 더블 섀도), 좌상단 파스텔 원 칩 안 라인 아이콘 + 14pt Quicksand 헤더, 46pt Quicksand 700 진한 파스텔 KPI 수치, 옆에 13pt 델타(민트 ▲/`#E0746C` ▼), 우하단 도넛 진행 링(파스텔 라운드 아크, 트랙 `#EDE8E2`).
- **목차/섹션 디바이더/인용:** 목차는 떠 있는 파스텔 원 번호 배지 + 18pt 항목명 카드 리스트. 디바이더는 오프화이트 배경 + 중앙 거대 라운드 파스텔 패널 + 그 안 84pt Quicksand 섹션 번호 + 30pt 섹션명. 인용은 흰 라운드 카드(소프트 섀도) + 좌측 떠 있는 파스텔 원 따옴표 + 26pt Quicksand 풀쿼트.

## 전환 (PPT)
0.3s 부드러운 페이드 + 카드 0.25s ease-out 위로 살짝 떠오르며 등장(스냅하지만 부드러운 페이싱). 펄스 링은 무한 2s 루프(현재 시점 마커).

## 하지 말 것
- 각진 모서리·하드 섀도(`Npx Npx 0` 한 줄 그림자) — 통통한 라운드 + 부드러운 멀티 섀도가 정체성.
- 원색·네온·고채도 색, 파스텔 3색군 외 4번째 색.
- 그라디언트 채움·베벨·입체 효과.
- 데이터 요소 섀도를 강하게 — 약하게(`0 3px 8px` 18%). 값 라벨엔 섀도 금지.
- 슬라이드를 글로 가득 채우기 — 여백과 통통한 도형이 숨 쉬게.
- 모든 슬라이드 완전 중앙 정렬 반복 — 본문은 비대칭 허용.
- 차트 회귀: 3D 차트, 무지개 계열 색칠, 격자선 과다, 범례 박스, 잘린 y축, 파이/다중 도넛.
- 이모지 불릿·클립아트.

## 적용 예
- **표지:** 오프화이트 배경, 중앙 30pt 타이틀 + 14pt 보조, 그 아래 통통한 라운드 파스텔 카드 3개가 소프트 섀도로 살짝 겹쳐 떠 있는 그래픽.
- **본문 슬라이드:** 좌측 18pt 본문 4줄, 우측에 4단계 라운드 프로세스 플로우(파스텔 노드 + 떠 있는 흰 원 번호 배지) — 비대칭.
- **차트 슬라이드:** 좌측 큰 라운드캡 막대 차트(상단 반경 8px, 단일 계열 라일락·강조 1막대 진한 라일락, 14pt 값 라벨, 격자선 2~3개), 우측 도넛(조각 3개 라운드 아크·중앙 26pt 수치) + 11pt 출처.
- **타임라인 슬라이드:** 가는 라운드 베이스 라인 + 부푼 원형 도트 마일스톤 5개, 현재 시점 진한 파스텔 + 펄스 링.
- **매트릭스 슬라이드:** 4개 라운드 존(파스텔 옅은 틴트) + 부푼 원형 버블 5개(크기=값), 바깥 11pt 축 라벨.
- **KPI 슬라이드:** 부푼 라운드 카드 4개 그리드 — 각 파스텔 원 칩 아이콘 + 46pt 진한 파스텔 수치 + 델타 + 도넛 진행 링.

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