# 컬러 규칙

## 빠른 답

메인 컬러는 deep violet **#201748** 입니다.
4대 핵심 색: deep violet **#201748** · mid violet **#3D2683** · surface blue **#36A9E1** · foam **#EEF9FF**.
버튼·링크 같은 "누르는 것"은 mid violet, 어두운 배경은 deep violet, 밝은 포인트는 surface blue를 쓰세요.
**기본 강조는 Surface Blue #36A9E1**을 사용합니다. **Highlight Yellow #FFE55C**는 가장 중요한 곳을 특별히 강조할 때, **페이지 전체 또는 독립 콘텐츠 한 건 전체에서 1–2곳만** 포인트로 사용합니다. 필요하지 않으면 노랑을 생략합니다.
정확한 값은 아래 표 또는 [`design-tokens.json`](../_system/tokens/design-tokens.json)에서 복사하세요. 눈대중으로 비슷한 색을 만들지 마세요.

## 전체 팔레트

| 이름 | HEX | CSS 변수명 | 어디에 쓰나 |
| --- | --- | --- | --- |
| Deep violet | `#201748` | `--dv-color-deep-violet` | 메인 컬러. 어두운 배경, 로고 배경, 브랜드의 기본 색 |
| Dark violet | `#18143D` | `--dv-color-dark-violet` | 어두운 화면에서 카드처럼 살짝 떠 있는 면 |
| Mid violet | `#3D2683` | `--dv-color-mid-violet` | 버튼, 링크, 선택된 상태 등 "누르는 것" |
| Light violet | `#67509C` | `--dv-color-light-violet` | 보조 색, 은은한 강조 |
| Surface blue | `#36A9E1` | `--dv-color-surface-blue` | 기본 강조 색. 핵심 문구·라벨·짧은 안내의 배경, 보조 버튼, 수심 데이터 |
| Foam | `#EEF9FF` | `--dv-color-foam` | 아주 밝은 배경, 안내 문구 배경 |
| Highlight Yellow | `#FFE55C` | `--dv-color-highlight-yellow` | 가장 강한 강조용 포인트. 페이지·독립 콘텐츠 전체에서 1–2곳만 선택적으로 사용 |
| Mark purple | `#863BFF` | `--dv-color-mark-purple` | 로고·캠페인의 강한 포인트 순간에만 |
| Mark violet | `#7E14FF` | `--dv-color-mark-violet` | 로고 전용 |
| Mark sky | `#47BFFF` | `--dv-color-mark-sky` | 로고 전용 |
| Mark lavender | `#EDE6FF` | `--dv-color-mark-lavender` | 어두운 배경 위의 링크·포인트 전용 |
| Kelp (초록) | `#2DBE7E` | `--dv-color-kelp` | 성공·완료 신호 (진한 글자는 `#177552`) |
| Coral (빨강) | `#FF6B5A` | `--dv-color-coral` | 오류·위험 신호 (진한 글자는 `#B6382E`) |
| Sun (노랑) | `#F4B942` | `--dv-color-sun` | 주의 신호 (진한 글자는 `#8A5A00`) |
| 흰색~검정 | `#FFFFFF`~`#07131C` | `--dv-color-neutral-0`~`950` | 배경·글자·선. 밝은 배경 기본 글자색은 `#10212E`, 화면 바탕은 `#F6FAFC` |

## 조합 규칙

- 밝은 배경 글자는 `#10212E`(기본), 링크·기본 CTA는 mid violet `#3D2683`. 일반적인 내용 강조는 Surface Blue `#36A9E1` 배경과 Deep violet 또는 Ink 글자를 조합합니다.
- ⛔ Mark lavender `#EDE6FF`와 foam `#EEF9FF`는 밝은 배경 위 글자로 쓰지 마세요. 안 보입니다. 어두운 배경 전용입니다.
- ⛔ Mark purple·mark violet·mark sky를 화면 전체 배경으로 깔지 마세요. 로고와 짧은 포인트 순간에만.
- Kelp 초록·Coral 빨강·Sun 노랑 `#F4B942`는 상태(성공·오류·주의)에 사용하고, 글자나 아이콘으로 뜻을 함께 전달합니다. 강조용 Highlight Yellow `#FFE55C`는 아래 규칙을 따릅니다.
- 새 색을 만들지 마세요. 표나 전체 토큰 파일에 없는 색이 필요하면 jay에게 물어보세요.

## 강조 우선순위 — 하늘색이 기본, 노랑은 가장 중요한 1–2곳

**#FFE55C**는 [DIVEROID Press 페이지](https://diveroid.ai/press/)에서 사용한 노랑입니다. 원본 [`brutalist.css`](https://diveroid.ai/press/brutalist.css)의 `--bk-flag: #ffe55c`를 기준으로 **2026-10-22 브랜드 오너가 강조용 사용을 승인**했습니다.

- **기본 강조는 Surface Blue `#36A9E1`**입니다. 핵심 단어의 배경, 라벨, 짧은 안내 등 반복되는 강조는 하늘색으로 통일합니다.
- **Highlight Yellow는 가장 중요한 메시지에만 선택적으로 사용합니다.** 사용한다면 **완성된 페이지 전체 또는 독립 콘텐츠 한 건 전체에서 1–2곳만** 정합니다. 섹션마다 1–2곳씩 허용하는 규칙이 아닙니다. 노랑이 필요하지 않은 콘텐츠는 0곳이어도 됩니다.
- 노랑은 짧은 핵심 구절이나 작은 라벨처럼 국소적인 포인트로 표현합니다. 넓은 섹션·히어로 배경이나 반복되는 카드·버튼의 배경을 노랑으로 채우는 방식은 피합니다.
- 하늘색과 노란 면 위에는 **Deep violet `#201748`** 또는 **Ink `#10212E`** 글자를 씁니다. 다크 모드에서도 이 조합을 유지합니다.
- 의미는 문장·라벨·아이콘으로도 전달합니다. 기본 CTA는 기존 보라 계열을, 로고·제품 고유 색은 기존 승인 규칙을 유지합니다.
- 주의·경고는 기존 **Sun `#F4B942`** 및 `signal.warning` 토큰을 사용합니다. Highlight Yellow는 편집상 특별 강조 역할입니다.

| 조합 | 대비율 | 적용 |
| --- | --- | --- |
| Deep violet 글자 + Highlight Yellow 배경 | **13.00:1** | 특별 강조용 조합, 본문에도 충분한 대비 |
| Ink 글자 + Highlight Yellow 배경 | **12.99:1** | 기본 본문과 이어지는 강조 |
| 흰색 글자 + Highlight Yellow 배경 | **1.26:1** | 텍스트 대비 부족. 위의 어두운 글자 조합을 사용 |

흰 면과 노란 면의 대비도 1.26:1입니다. 라벨·안내 상자의 경계 자체가 의미를 전달할 때는 Deep violet 테두리를 함께 사용하세요. 노랑으로 선택한 핵심 문장은 어두운 글자와 작은 노란 배경으로 표현합니다.

구현 시 일반 강조는 `color.semantic.light.highlight` / `color.semantic.dark.highlight`를 사용합니다. CSS는 배경 `--dv-color-highlight-bg`(Surface Blue), 글자 `--dv-color-highlight-text`, 필요할 때 테두리 `--dv-color-highlight-border`를 한 조합으로 적용합니다.

특별히 선택한 1–2곳의 노랑은 `color.brand.diveroid.highlightYellow`와 `color.semantic.light.highlightStrong` / `color.semantic.dark.highlightStrong`을 명시적으로 사용합니다. CSS는 `--dv-color-highlight-strong-bg`, `--dv-color-highlight-strong-text`, `--dv-color-highlight-strong-border` 조합입니다.

## 다크 모드

다크 모드는 색을 마음대로 뒤집는 게 아니라 정해진 짝을 씁니다. 바탕은 `#07131C`, 카드 면은 deep violet `#201748`과 dark violet `#18143D`, 글자는 흰색 `#FFFFFF`, 링크는 mark lavender `#EDE6FF`, 버튼은 밝은 보라 `#828FFF`를 씁니다. 밝은 화면에서 "성공"이던 초록이 다크 모드에서 다른 뜻이 되면 안 됩니다 — 뜻은 그대로, 밝기만 바뀝니다. 전체 짝은 [`design-tokens.json`](../_system/tokens/design-tokens.json)의 `semantic.dark`에 있습니다.

## 인쇄용 (CMYK / Pantone)

인쇄물(명함, 배너, 패키지 등)에 쓸 **확정된 공식 인쇄 값은 아직 없습니다.** 아래는 아카이브에서 나온 참고 값이며, 실제 색은 인쇄소 변환 + 교정쇄로 확인해서 정합니다.

> ⚠️ 아래 Pantone/CMYK 값은 아카이브 출처이며 **아직 검증되지 않았습니다 [확인 필요]**. 특히 deep violet에 매핑된 PANTONE 295C는 남색 계열이라 보라와 다를 수 있습니다. 발주서에 확정 값으로 넣지 마세요.

발주 절차(HEX 전달 → 인쇄소 프로파일로 CMYK 변환 → 교정쇄 확인)는 [print.md](print.md)에 단계별로 정리되어 있습니다. 브라우저에서 저장한 PDF는 RGB(화면용)이므로 그대로 인쇄 데이터가 되지 않습니다.

| 이름 | HEX | Pantone (아카이브·미검증) | CMYK (아카이브·미검증) |
| --- | --- | --- | --- |
| Deep violet | `#201748` | PANTONE 295c `[확인 필요]` | C100 M100 Y20 K50 `[확인 필요]` |
| Mid violet | `#3D2683` | PANTONE 2118c `[확인 필요]` | C95 M100 Y0 K0 `[확인 필요]` |
| Light violet | `#67509C` | PANTONE 2118c (75%) `[확인 필요]` | C71 M75 Y0 K0 `[확인 필요]` |
| Surface blue | `#36A9E1` | PANTONE 299c `[확인 필요]` | C70 M15 Y0 K0 `[확인 필요]` |

나머지 색(foam, mark 계열, 초록·빨강·노랑 등)은 아카이브 값조차 없습니다 [확인 필요]. 인쇄에 꼭 필요하면 HEX를 주고 같은 절차(인쇄소 변환 + 교정쇄)로 확인하세요. 새 Pantone 번호나 CMYK 조합을 직접 만들지 마세요.

## 그라디언트

배경용 그라디언트는 직접 만들지 말고 [`diveroid-gradient-abyss-signal.svg`](../brand-kit/graphics/gradients/diveroid-gradient-abyss-signal.svg)를 포함한 승인 SVG 6종을 그대로 쓰세요. 고정형 3종 — `diveroid-gradient-abyss-signal.svg`(대표 히어로 배경), `diveroid-gradient-reef-intelligence.svg`(AI·데이터 화면), `diveroid-gradient-memory-current.svg`(다이빙 기록·추억·공유) — 과 움직이는 3종 — `diveroid-gradient-motion-current-flow.svg`, `diveroid-gradient-motion-sonar-sweep.svg`, `diveroid-gradient-motion-memory-drift.svg`. 그라디언트 위에 글자를 올릴 때는 어두운 부분에만 올리고, 잘 안 읽히면 deep violet을 살짝 깔아 주세요.

## 확인이 필요한 경우

공식 로고를 새로 만들거나 변형하나요? / 안전·AI 능력을 주장하나요? / 법률·라이선스가 걸리나요? → 하나라도 "예"면 jay에게 확인하고, 아니면 그냥 발행하세요.