컬러 시스템
해양 데이터 시스템을 위한 컬러 시스템. 신뢰감과 전문성을 기반으로 하며, 해양·항법 데이터의 정확성을 시각적으로 표현한다.
브랜드 컬러 원본
| 역할 |
HEX |
설명 |
| Primary |
#6D94C5 |
Slate Blue — 신뢰, 전문성 |
| Secondary |
#CBDCEB |
Powder Blue — 부드러운 보조 |
| Accent |
#E8DFCA |
Warm Sand — 따뜻한 포인트 |
| Background |
#F5EFE6 |
Warm Cream — 배경색 |
브랜드 컬러 스케일
각 브랜드 컬러는 50(가장 밝음)에서 950(가장 어두움)까지 11단계 스케일로 확장된다.
Primary (Slate Blue, hue ≈ 213°)
| Token |
HEX |
용도 예시 |
| primary-50 |
#F5F7F9 |
subtle 배경 |
| primary-100 |
#E5EBF2 |
hover 배경 |
| primary-200 |
#D2DAE5 |
비활성 테두리 |
| primary-300 |
#B7C5D7 |
비활성 텍스트 |
| primary-400 |
#8AA5C7 |
보조 아이콘 |
| primary-500 |
#6D94C5 |
브랜드 원본 |
| primary-600 |
#507FB9 |
기본 버튼 배경 (Light) |
| primary-700 |
#3B669C |
hover 상태 |
| primary-800 |
#2D507B |
active 상태 |
| primary-900 |
#1B2C41 |
다크 배경 subtle |
| primary-950 |
#0E1A2B |
다크 배경 강조 |
Secondary (Powder Blue, hue ≈ 210°)
| Token |
HEX |
용도 예시 |
| secondary-50 |
#F5F7F9 |
subtle 배경 |
| secondary-100 |
#E6EDF5 |
hover 배경 |
| secondary-200 |
#D1DAE5 |
비활성 테두리 |
| secondary-300 |
#B7C8D7 |
비활성 텍스트 |
| secondary-400 |
#89AAC8 |
보조 아이콘 |
| secondary-500 |
#CBDCEB |
브랜드 원본 |
| secondary-600 |
#6B9AC8 |
보조 버튼 (Light) |
| secondary-700 |
#4E88BB |
hover 상태 |
| secondary-800 |
#396E9D |
active 상태 |
| secondary-900 |
#1B2F41 |
다크 배경 subtle |
| secondary-950 |
#0E1A2B |
다크 배경 강조 |
Accent (Warm Sand, hue ≈ 38°)
| Token |
HEX |
용도 예시 |
| accent-50 |
#F9F8F6 |
subtle 배경 |
| accent-100 |
#F2EDE4 |
hover 배경 |
| accent-200 |
#E4E0D7 |
비활성 테두리 |
| accent-300 |
#D5CDB9 |
비활성 텍스트 |
| accent-400 |
#C4B48C |
보조 아이콘 |
| accent-500 |
#E8DFCA |
브랜드 원본 |
| accent-600 |
#B59854 |
포인트 버튼 (Light) |
| accent-700 |
#9A7E3E |
hover 상태 |
| accent-800 |
#786230 |
active 상태 |
| accent-900 |
#3F351D |
다크 배경 subtle |
| accent-950 |
#2B2312 |
다크 배경 강조 |
디자인 토큰 (CSS 변수)
컴포넌트에서 직접 HEX를 사용하지 않고 반드시 토큰을 사용한다.
Primary 토큰
| CSS 변수 |
Light |
Dark |
--color-primary |
#507FB9 |
#B7C5D7 |
--color-primary-hover |
#3B669C |
#D2DAE5 |
--color-primary-active |
#2D507B |
#8AA5C7 |
--color-primary-subtle |
#F5F7F9 |
#1B2C41 |
--color-primary-text |
#2D507B |
#D2DAE5 |
Secondary 토큰
| CSS 변수 |
Light |
Dark |
--color-secondary |
#CBDCEB |
#B7C8D7 |
--color-secondary-hover |
#89AAC8 |
#D1DAE5 |
--color-secondary-active |
#4E88BB |
#89AAC8 |
--color-secondary-subtle |
#F5F7F9 |
#1B2F41 |
--color-secondary-text |
#396E9D |
#D1DAE5 |
Accent 토큰
| CSS 변수 |
Light |
Dark |
--color-accent |
#E8DFCA |
#D5CDB9 |
--color-accent-hover |
#C4B48C |
#E4E0D7 |
--color-accent-active |
#B59854 |
#C4B48C |
--color-accent-subtle |
#F9F8F6 |
#3F351D |
--color-accent-text |
#786230 |
#E4E0D7 |
시멘틱 컬러
상태를 나타내는 컬러. 의미가 명확하므로 브랜드 컬러와 혼용하지 않는다.
| 역할 |
CSS 변수 |
Light |
Dark |
| Success |
--color-success |
#059669 |
#34D399 |
| Warning |
--color-warning |
#D97706 |
#FBBF24 |
| Danger |
--color-danger |
#DC2626 |
#FCA5A5 |
| Info |
--color-info |
#0284C7 |
#38BDF8 |
뉴트럴 (Surface & Text)
| 역할 |
CSS 변수 |
Light |
Dark |
설명 |
| 기본 배경 |
--color-bg-base |
#F5EFE6 |
#131416 |
페이지 최외곽 |
| 카드 배경 |
--color-bg-surface |
#FFFFFF |
#1E2023 |
카드, 패널 |
| 모달 배경 |
--color-bg-elevated |
#FFFFFF |
#282A2E |
모달, 드롭다운 |
| 기본 테두리 |
--color-border |
#D5D2CC |
#3A3C41 |
카드, 인풋 |
| 강조 테두리 |
--color-border-strong |
#9198A1 |
#5C6570 |
포커스, 구분선 |
| 본문 텍스트 |
--color-text-primary |
#1E2329 |
#F4F5F5 |
제목, 본문 |
| 보조 텍스트 |
--color-text-secondary |
#5C6570 |
#9198A1 |
설명, 레이블 |
| 약한 텍스트 |
--color-text-tertiary |
#9198A1 |
#5C6570 |
placeholder |
차트 팔레트
데이터 시각화 전용. Cool(Blue 계열)과 Warm(Sand 계열)을 교차하여 구분성을 높인다.
| 순서 |
CSS 변수 |
Light HEX |
Dark HEX |
| 1번 |
--color-chart-1 |
#507FB9 |
#6D94C5 |
| 2번 |
--color-chart-2 |
#B59854 |
#C4B48C |
| 3번 |
--color-chart-3 |
#B5607D |
#D4839B |
| 4번 |
--color-chart-4 |
#3D998A |
#5BB5A6 |
| 5번 |
--color-chart-5 |
#8B6DB5 |
#B79FD4 |
| 6번 |
--color-chart-6 |
#C07850 |
#D4956B |
차트에서는 CHART_COLORS 상수(src/constants/chart.ts)를 사용한다.
사용 규칙
- 컴포넌트에서 HEX 직접 사용 금지. 반드시 CSS 변수 토큰 사용.
- 시멘틱 컬러(success, warning, danger, info)를 브랜드 컬러 대용으로 사용 금지.
- 다크 모드는
.dark 클래스 또는 prefers-color-scheme: dark 미디어 쿼리로 자동 전환.
HYOJIN
88e25abe14