# 캐시플랜 디자인 시스템 (design.md) v1.0

기준일 2026-10-21. 정본 사이트: https://brand.cashplan.link (브랜드 아이덴티티 가이드라인).
토큰 정본: `tokens/cashplan-tokens.json`. CSS 변수: `tokens/cashplan-tokens.css`. 둘은 함께 고친다.
이 문서는 웹(광고주·유저), 앱, 관리자, 메일이 모두 따르는 기준이다.

## 0. 맥락

- 캐시플랜은 리워드 광고 플랫폼이다. 두 고객이 있다.
  - 광고주(소상공인·셀러·대행사): 미션(상품 찜, 플레이스 저장, 알림받기, 정답 맞히기 등)을 올려 트래픽과 상위노출 신호를 산다. 1건 단가, 최소 1건부터, 쓴 만큼만 포인트가 빠진다.
  - 유저: 앱에서 미션을 하고 캐시(포인트)를 모은다.
- 브랜드 생각: **미션이 캐시가 되고, 캐시가 성장이 된다.** 한 동작이 작은 돈이 되고, 그 돈이 광고주의 성장이 된다.
- 기존 자산에서 이어 가는 것: 이름 "캐시플랜", 한글 워드마크 글자꼴, 대표 초록 `#09CC7C`, 잎 모티프("미션과 함께 쑥쑥 자라는 캐시").

## 1. 로고

- 심볼 "새싹 코인": 두꺼운 코인 고리(C)의 한 조각이 열리고, 그 자리에서 잎이 돋는다. 고리 = 캐시(코인, C), 잎 = 성장(플랜).
- 구성: 원 셋. 코인 원(R 38) 안쪽 원(r 17)을 뺀 고리, 고리를 -90°~-10° 사이에서 연다. 잎은 반지름 34인 원 두 개를 48 떨어뜨려 겹친 자리(vesica)로, 축은 -50°, 코인 중심에서 42 떨어진 궤도 위에 둔다.
- 색: 고리 ink `#0C1A14`(어두운 바탕은 paper `#F1F6F3`), 잎 green `#09CC7C`. 한 색 판(먹 또는 흰색)도 있다.
- 워드마크: 한글 "캐시플랜"은 기존 글자꼴을 그대로 쓴다(인지도 유지). 영문 "CashPlan"은 Pretendard 800, 자간 -3.5%를 윤곽선으로 만든 것.
- 조합: 가로형(기본), 세로형, 심볼만, 워드마크만.
- 여백 단위 x = 고리 두께(심볼 높이 × 0.237). 네 변 1x.
- 최소 크기: 가로형 화면 높이 20px, 심볼 16px. 그보다 작으면 파비콘 판.
- 앱 아이콘: ink 바탕, 모서리 22.37%, 심볼 높이 56%, 고리 paper·잎 green. 대체판: green 바탕, 고리 ink·잎 흰색.
- 금지: 기울이기, 늘리기, 그라데이션, 그림자·외곽선, 고리와 잎 색 바꾸기, 흰 바탕에 green 고리, 잎만 떼어 쓰기, 워드마크를 다른 글꼴로 다시 치기.

파일: `assets/logo/` — `cashplan-symbol*.svg`, `cashplan-logo-ko*.svg`, `cashplan-logo-en*.svg`, `cashplan-logo-ko-stacked.svg`, `cashplan-wordmark-*.svg`, `cashplan-appicon*.svg`, `cashplan-favicon.svg`.

## 2. 색

| 토큰 | 값 | 쓰는 곳 | 대비 |
| --- | --- | --- | --- |
| green | `#09CC7C` | 잎, 주 버튼 바탕(글자는 ink), 큰 면 | ink 글자 8.47:1 / 흰 바탕 글자로 금지(2.11:1) |
| green-deep | `#057A4B` | 흰 바탕 위 초록 글자·링크·선택 표시 | 흰 바탕 5.40:1 |
| green-tint | `#E8F8F0` | 초록 강조 면 | green-deep 글자 4.91:1 |
| ink | `#0C1A14` | 본문 글자, 심볼 고리, 어두운 면 | 흰 바탕 17.9:1 |
| paper | `#F1F6F3` | 어두운 바탕 위 심볼 고리·워드마크 | |
| gold | `#FFC93C` | 유저 앱 포인트·코인 표시에만 | ink 위 사용 |
| text-sub | `#5E6A65` | 보조 글자 | 흰 바탕 5.64:1 |
| text-faint | `#687470` | placeholder·비활성만 | 4.86:1(surface 위 4.52:1), 본문 금지 |
| line | `#DDE3E0` | 구분선·카드 테두리 | |

- 회색은 초록기가 도는 차가운 회색이다. 크림·오프화이트 바탕은 쓰지 않는다.
- 한 화면에 강조색은 한 곳(주 CTA)만. 예외: 첫 화면을 지난 뒤 PC 고정 내비의 가입 버튼은 섹션 주 버튼과 같이 보여도 된다(같은 행동일 때). 모바일은 하단 고정 버튼 하나만 둔다. green 면을 넓게 쓰는 곳은 표지·메일 헤더·성공 화면뿐.
- 상태 색: success `#057A4B`/`#E8F8F0`, warning `#A15C00`/`#FFF4D6`, danger `#C4261B`/`#FDECEA`, info `#2563EB`/`#EAF1FE`.
- 다크: bg `#0A120E`, surface `#111B16`, card `#17231D`, text `#EEF4F1`, sub `#A3B1AA`, accent `#2BDB92`, accent-text `#4BE3A4`.

## 3. 글자

- 글꼴: Pretendard Variable(SIL OFL). 따로 받는 브랜드 글꼴은 없다. 이름은 "CashPlan Sans = Pretendard".
- 위계(PC / 모바일): display 56/36 800, h1 40/28 800, h2 28/22 700, h3 20/18 700, body-lg 18, body 16, small 14, caption 12.
- 자간: display -0.035em, 제목 -0.025em, 본문 -0.01em. 줄 높이: 제목 1.15~1.3, 본문 1.6.
- 숫자: 금액·건수·포인트는 `font-variant-numeric: tabular-nums`, 700. 단위는 붙여 쓴다(80원, 1,000건, 10,000P).
- 한국어 줄바꿈: `word-break: keep-all`.

## 4. 간격·모서리·그림자

- 간격 4px 단위: 4, 8, 12, 16, 20, 24, 32, 40, 56, 72, 96, 128.
- 섹션 간격: PC 96~128, 모바일 56~72. 본문 최대 폭 1120px, 좌우 여백 PC 32, 모바일 20.
- 모서리: 배지 6, 작은 버튼 8, 버튼·입력 12, 카드 16, 패널·모달 24. 알약(완전히 둥근) 버튼은 쓰지 않는다.
- 그림자: sm(카드 기본), md(떠 있는 메뉴), lg(모달·폰 목업). 그림자 색은 ink 기반, 검정 0.25 이상 금지.

## 5. 부품

- 버튼: 높이 48(기본)·36(작은), 글자 16/600. 주(primary) = green 바탕 + ink 글자. 보조 = 흰 바탕 + line-strong 테두리. 어두운 = ink 바탕 + 흰 글자. 누를 때 scale 0.98, 120ms.
- 입력: 높이 48, 테두리 line-strong, 포커스 시 green-deep 테두리 + focus 그림자. 라벨은 위, 도움말은 아래 14px sub.
- 카드: 흰 바탕, line 테두리, 반경 16, sm 그림자. 선택된 카드는 green-deep 테두리 2px + green-tint 바탕.
- 배지: 높이 24, 반경 6, 12/600. green(진행·성공), gray(기본), warn, danger.
- 아이콘: Lucide(선 1.75px) 한 벌만. 이모지는 UI에 쓰지 않는다.

## 6. 모션

- 원칙: 움직임은 결과를 알려 줄 때만. 한 화면에 브랜드 순간 하나.
- 시간: micro 120ms, ui 200ms, enter 320ms, brand 900ms. 차례 간격 60ms.
- 곡선: out `cubic-bezier(.2,.8,.2,1)`, in-out `cubic-bezier(.65,0,.35,1)`, sprout `cubic-bezier(.34,1.56,.64,1)`(잎이 돋을 때만).
- 심볼 등장(합계 1.9초): 고리를 stroke로 그린다(800ms in-out, 150ms 뒤) → 잎이 밑동 기준으로 돋는다(650ms sprout, 800ms 뒤) → 한글 음절이 아래에서 올라온다(900ms out, 790ms 뒤, 70ms 차례). 코드 `motion.css .rv`.
- 포인트 적립: 숫자가 올라가고 잎이 한 번 흔들린다. 한 번만, 반복 금지.
- `prefers-reduced-motion: reduce`이면 움직임 없이 끝 상태를 보인다.
- 움직이는 속성은 transform·opacity·stroke-dashoffset만. 예외: hover·선택 상태의 글자색·배경색·테두리색 전환(120~200ms)은 허용한다. 그림자 크기 전환은 쓰지 않는다.
- 반복 모션은 끝이 있어야 한다: 진행 표시는 목표에 닿으면 멈추고, 장식 반복은 2~3회 뒤 멈춘다. 예외는 내용 목록 띠(마퀴) 하나이며 마우스를 올리면 멈추고 동작 줄이기에서는 서 있다.

## 7. 말투

- 해요체. 한 문장에 한 사실. 숫자로 말한다("1건 80원", "최소 1건부터").
- 포인트 금액은 부가세를 넣은 값이다: 쓸 포인트 = 단가 × 수량 × 1.1. 단가를 말할 때는 "부가세 별도"를 붙인다(반올림 규칙은 운영 기준 확인 필요).
- 느낌표 겹치기, 이모지, "지금 바로!!" 같은 재촉, 과장("가장 쉬운", "무조건 상위노출")을 쓰지 않는다.
- 광고주에게: 비용·조건·결과를 먼저. 유저에게: 받을 캐시를 먼저.

## 8. 메일(이메일) 적용

- 메일은 CSS 변수가 안 되므로 hex를 직접 쓴다: 바탕 `#F5F7F6`, 본문 상자 `#FFFFFF` 반경 16, 글자 `#0C1A14`, 보조 `#5E6A65`, 버튼 `#09CC7C` 바탕 + `#0C1A14` 글자(반경 12, 높이 52), 강조 상자 `#E8F8F0`, 초록 글자 `#057A4B`.
- 머리: 가로형 로고 PNG(높이 28, 2x 이미지) + 광고 메일이면 제목과 본문 첫 줄에 `(광고)`.
- 글꼴: `Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif`(메일 앱은 웹폰트를 잘 안 받는다).
- 끝: 전송자 명칭·이메일·전화·주소, 한글·영문 수신거부(vibe-lawyer R3).

## 9. 쓰지 않는 것 (AI 티 방지)

- 흰 바탕 + 보라/파랑 그라데이션, 크림 바탕, 제목 이탤릭 강조, "01/02/03" 번호 라벨, 모노스페이스 라벨, 알약 버튼, 이모지 아이콘, 의미 없는 블러 원, 달러($) 동전 일러스트.