02 · Color System
컬러: 블루가 이끄는 글로벌 체계
글로벌 금융 브랜딩의 제1원칙: 블루는 모든 주요 시장에서 부정적 의미가 없는 유일한 색입니다 — Citi, Visa, AmEx, PayPal이 모두 블루를 선택한 이유이기도 합니다. 반면 그린은 중국 본토·홍콩·대만·일본·한국의 증권 관례에서 「하락」을 뜻합니다(빨간색 상승·초록색 하락 — 서구와 정반대). 그래서 체계는 네 층으로 구성됩니다: 코어 블루가 브랜드를 지고, 모노크롬이 어떤 문화·매체에서도 안전한 폴백을 보장하고, 확장 팔레트가 에너지와 질감을 더하고, 기능색은 순수하게 의미만 담당합니다 — 등락색은 시장 관례에 따라 전환됩니다. 스와치를 클릭하면 HEX가 복사됩니다.
코어 블루 Core브랜드 식별의 90%를 이 네 가지 색이 해냅니다
모노크롬 Mono + 골드가장 진지한 층위 — 계약서, 규제 문서, 단색 인쇄, 프리미엄 상황의 안전한 폴백
확장 팔레트 Extendedv3, 2026–27 트렌드 키에 맞춰 보정(WGSN × Coloro 키 컬러의 디지털 적응) — 의미는 고정, 혼용 불가
트렌드 근거 (2026-06 조사): WGSN × Coloro가 2026년 Transformative Teal, 2027년 Luminous Blue를 지목했습니다 — 업계 트렌드가 Omninal의 블루 홈그라운드로 수렴하고 있으므로 프라이머리는 움직이지 않습니다. 확장 팔레트는 금융 시맨틱과 호환되는 네 가지 트렌드 키(틸 / 바이올렛 / 오렌지 / 핑크)를 취합니다. Pantone 2026 Cloud Dancer(화이트)는 「여백이 곧 권위」라는 페이퍼 화이트 전략을 뒷받침합니다. 그라디언트 트렌드는 장식에서 구조 시스템으로 이동했습니다: 블루→틸(히어로 강조 텍스트)과 블루→바이올렛→핑크(캠페인)가 유일한 두 구조 그라디언트입니다.
기능색 Functional국제 통용 시맨틱 컬러 정렬(Tailwind/shadcn 동일 계보) — 의미마다 3단계: 프라이머리 / 텍스트 / 틴트
Success 그린#16A34A · #15803D · #F0FDF4토큰 --positive; 그래픽은 프라이머리, 화이트 위 텍스트는 반드시 텍스트 레벨(5.0 AA).
Destructive 레드#DC2626（4.8 AA）· #FEF2F2토큰 --negative / shadcn --destructive; 오류, 위험 액션; 아시아권 관례에서는 상승색.
Warning 앰버#F59E0B · #B45309 · #FFFBEB토큰 --warning; 프라이머리는 그래픽/아이콘 전용 — 화이트 위 텍스트는 일괄 텍스트 레벨(5.0 AA).
Info 블루#155DFC · #15439E · #E9F0FF토큰 --info; 중립 정보, 진행 중 — 브랜드 블루와 동일값, 텍스트 레벨 = Blue Dark.
3단계 구조(글로벌 표준 관행): 프라이머리(500/600 대역)는 아이콘·배지 도트·그래픽에, 텍스트 레벨(700 대역)은 화이트 위 텍스트에 — ≥ 4.5:1을 보장합니다. 틴트(50 대역)는 힌트 컨테이너 배경에. 등락색은 시장 관례에 따라 토큰으로 전환하고(아래 표), 기능색은 브랜드 식별에 절대 참여하지 않습니다.
뉴트럴 Neutrals잉크에서 페이퍼까지, 여섯 단계의 질서
글로벌 시장 컬러 규율이 섹션이 이 표준이 존재하는 이유입니다
| 시장 | 상승 / 이익 | 하락 / 손실 | 의미 |
|---|---|---|---|
| 미국 · 유럽 · 동남아 대부분 | 그린 ▲ | 레드 ▼ | 서구 관례: green = go |
| 중국 본토 · 홍콩·대만 · 일본 · 한국 | 레드 ▲ | 그린 ▼ | 레드는 경사와 상승, 그린은 하락 — 정반대입니다 |
세 가지 규율: ① 등락색은 시맨틱 토큰(--positive / --negative)으로 정의하고 사용자의 시장 관례에 따라 전환합니다 — 하드코딩 금지. ② 브랜드 식별은 그린·레드에 절대 의존하지 않습니다 — 마침표와 주요 액션은 블루뿐이며, 블루는 양쪽 관례 모두에서 중립입니다. ③ 모노크롬이 최종 폴백입니다: 어떤 문화·신앙·단색 인쇄·컴플라이언스 상황에서도 Carbon + White의 아이덴티티와 레이아웃은 성립합니다.
그라디언트 Gradients레이아웃에는 이 네 가지만 허용됩니다(각도 132°); 다섯 번째인 방사형 Halo는 아이덴티티 전용 — 심벌에만, 배경 불가, 01장 참조
Deep Trust · 커버, 투자 유치 자료, 키노트
Royal Flow · 프로덕트 마케팅과 성장 내러티브
Midnight Gold · 프리미엄 고객과 최상위 티어
Vivid Signal · 캠페인과 소셜 (절제해서)
그라디언트의 세 가지 구조적 용법그라디언트는 구조 시스템이지 장식이 아닙니다 — 이 세 가지 역할만
Q2 Review
하나의 아키텍처,
네 개의 프로덕트.
네 개의 프로덕트.
① 컨테이너 · 필드
그라디언트가 컨테이너 전체(커버, 카드 페이스, KV)를 채워 콘텐츠에 「필드」를 만들어 줍니다. 레이아웃당 그라디언트 컨테이너는 하나, 각도는 132° 고정.
정산됩니다.
② 텍스트 · 강조
블루→틸 선형 그라디언트(100°)는 H1급 강조어(히어로·KV 헤드라인 속 2–6자)에만 허용됩니다. 본문·버튼 텍스트 금지, 화면당 최대 한 곳.
③ 글로우 · 광원
방사형 그라디언트를 단일 광원으로, 심벌·숫자·핵심 콘텐츠 뒤에 깔아줍니다. 불투명도 ≤ 40%, 광원 위치 = 시각적 초점, 화면당 광원 하나.
그라디언트 금지: 버튼·입력창·배지 등 컴포넌트는 일괄 단색(프로덕트 UI의 그라디언트는 Halo 아이콘과 빈 상태 일러스트에만 존재합니다); 두 그라디언트는 같은 화면에 있을 수 없습니다; 선형은 132°만(히어로 텍스트 100°); 그라디언트 위에 그라디언트 텍스트 불가; 골드 그라디언트는 블랙&골드 상황만의 것입니다.
여섯 가지 표준 레시피진지함과 에너지의 고정 비율 — 상황에 맞게 선택하고, 즉흥 조색은 하지 않습니다
① Global Corporate · 65 / 20 / 15
기본 레시피: 웹사이트 본체 · 프로덕트 문서 · 세일즈 자료 — 어떤 시장에서도 바로 사용 가능
Paper 65%
Navy 20%
Blue 15%
② Deep Trust · 70 / 20 / 10
투자 유치 덱 · 투자자 커뮤니케이션 · 규제기관·은행 파트너 자료 — 다크 권위의 필드
Navy 70%
White 20%
Sky 10%
③ Premium Mono · 75 / 15 / 10
프리미엄 고객 프로그램 · 블랙 카드 · 기념일·임원 행사 — 모노크롬 + 단 하나의 액센트
Carbon 75%
White 15%
Gold 10%
④ Energy · 45 / 25 / 18 / 12
론칭 · 소셜 미디어 · 임플로이어 브랜드 · 개발자 행사 — 에너지 넘치되 앵커는 여전히 블루
Navy 45%
Sky 25%
Iris 18%
Orange 12%
⑤ Product UI · 60 / 25 / 10 / 5
대시보드 · 앱 · 콘솔 — 화이트 그라운드의 질서, 블루는 주요 액션에만, 기능색은 의미대로
White 60%
Neutrals 25%
Blue 10%
Func. 5%
⑥ Data Viz · 시퀀스 고정
차트와 리포트 — Omninal은 언제나 블루로 시퀀스 첫 자리; 등락색은 시장 토큰으로 전환
Blue
Teal
Iris
Orange
Gold
Mist
대비 규율: 본문 텍스트와 배경의 대비 ≥ 4.5:1 (WCAG AA). Sky #6E9BFF는 다크 배경의 하이라이트·마침표 전용 — 라이트 배경 본문색으로는 절대 불가. Gold는 모노크롬과만 조합하며 ≤ 10%. 금액과 숫자는 언제나 Ink / Navy / White — 색은 「상태와 변화」의 것이지 「값 자체」의 것이 아닙니다.
측정 대비 매트릭스WCAG 2.1 · 계산된 값 — 표를 읽고 적용하세요, 감이 아니라
| 전경 ↓ / 배경 → | White / Paper | Ice #E9F0FF | Navy #0B0F1E | Blue #155DFC | Carbon #0D0D12 |
|---|---|---|---|---|---|
| Ink / Navy 텍스트 | 14.6 · AAA | 12.7 · AAA | — | — | — |
| White 텍스트 | — | — | 19.1 · AAA | 5.2 · AA | 19.5 · AAA |
| Omninal Blue #155DFC | 5.2 · AA | 4.6 · AA | 3.7 · 대형/그래픽만 | — | 3.7 · 대형/그래픽만 |
| Blue Dark #15439E | 9.0 · AAA | 7.9 · AAA | ✕ 1.7 | — | ✕ 1.8 |
| Sky #6E9BFF | ✕ 2.7 | ✕ 2.4 | 7.1 · AAA | ✕ 2.2 | 7.2 · AAA |
| Gold #E3B341 | ✕ 1.9 | ✕ 1.7 | 9.8 · AAA | — | 10.0 · AAA |
| Slate #5D6478 | 5.9 · AA | 5.2 · AA | — | — | — |
| Mist #8B91A5 | 3.1 · 대형/장식만 | ✕ 2.8 | 6.1 · AA | — | 6.2 · AA |
판정 기준: AAA ≥ 7:1 (본문 최적) · AA ≥ 4.5:1 (본문 합격) · 3:1–4.5:1은 18.5px 이상 볼드 대형 텍스트만 · ✕ 텍스트 금지 (그래픽은 가능). 「—」는 무의미한 조합.
대비 계산기전경과 배경을 골라 WCAG 2.1 비율을 실시간으로 확인하세요 — 매트릭스 밖의 조합은 계산한 뒤에 쓰세요
19.1:119.1 · AAA · 본문 최적
측정 매트릭스와 동일한 기준으로 판정합니다: AAA ≥ 7 · AA ≥ 4.5 · 3–4.5는 18.5px 이상 볼드 대형 텍스트만 · 그 미만은 텍스트 금지(그래픽은 가능).
대형 샘플: 모든 결제는 정산됩니다.본문 샘플: Omninal은 하나의 아키텍처로 자금을 보유·이동·통제합니다 — 다중 통화, 스테이블코인, 모든 결제 레일에 걸쳐.$2,485,302.18 · +4.2% · 2026-06-07
다크 모드 매핑같은 컴포넌트의 두 모드 대조 — 토큰의 값이 바뀔 뿐, 관계는 그대로
Light · 라이트 모드
Available Balance
$2,485,302.18
새 결제Dark · 다크 모드
Available Balance
$2,485,302.18
새 결제| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
| --surface | Paper #FAFBFD | Navy #0B0F1E | 페이지 그라운드는 서로 거울상 |
| --card | White #FFFFFF | #131A32 | 다크 컨테이너는 한 단계 밝게 — 순수 블랙은 쓰지 않습니다 |
| --text | Ink #181D33 | #E9EDF6 | 다크 모드 텍스트는 채도를 낮춰 눈부신 순백을 피합니다 |
| --text-muted | #5D6478 | #8A93AD | |
| --primary | Blue #155DFC | Sky #6E9BFF (다크 라벨) | 다크 모드 주요 버튼은 Sky + Navy 라벨로 전환 — 대비값은 위 매트릭스 |
| --line | #E6E9F1 | #26304A | |
| --tint | Ice #E9F0FF | rgba(110,155,255,.14) | 다크 모드는 불투명 채움이 아닌 반투명 Sky |