메인 컬러는 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에서 복사하세요. 눈대중으로 비슷한 색을 만들지 마세요.
| 이름 | 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 글자를 조합합니다.
#EDE6FF와 foam #EEF9FF는 밝은 배경 위 글자로 쓰지 마세요. 안 보입니다. 어두운 배경 전용입니다.
#F4B942는 상태(성공·오류·주의)에 사용하고, 글자나 아이콘으로 뜻을 함께 전달합니다. 강조용 Highlight Yellow #FFE55C는 아래 규칙을 따릅니다.
#FFE55C는 DIVEROID Press 페이지에서 사용한 노랑입니다. 원본 brutalist.css의 --bk-flag: #ffe55c를 기준으로 2026-10-22 브랜드 오너가 강조용 사용을 승인했습니다.
#36A9E1입니다. 핵심 단어의 배경, 라벨, 짧은 안내 등 반복되는 강조는 하늘색으로 통일합니다.
#201748 또는 Ink #10212E 글자를 씁니다. 다크 모드에서도 이 조합을 유지합니다.
#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의 semantic.dark에 있습니다.
인쇄물(명함, 배너, 패키지 등)에 쓸 확정된 공식 인쇄 값은 아직 없습니다. 아래는 아카이브에서 나온 참고 값이며, 실제 색은 인쇄소 변환 + 교정쇄로 확인해서 정합니다.
⚠️ 아래 Pantone/CMYK 값은 아카이브 출처이며 아직 검증되지 않았습니다 [확인 필요]. 특히 deep violet에 매핑된 PANTONE 295C는 남색 계열이라 보라와 다를 수 있습니다. 발주서에 확정 값으로 넣지 마세요.
발주 절차(HEX 전달 → 인쇄소 프로파일로 CMYK 변환 → 교정쇄 확인)는 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를 포함한 승인 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에게 확인하고, 아니면 그냥 발행하세요.
