컬러 시스템 및 브랜드 팔레트

1) 색상을 공식화하는 이유

색상은 "좋은 색조" 세트가 아니라 다음을위한 관리 가능한 시스템입니다

브랜드 인지도와 시각적 일관성

가독성 및 가용성 (WCAG),

스케일링 인터페이스 (테마, 플랫폼, 로케일),

예측 가능한 A/B 실험 (대비, CTR, 오류).

2) 시스템 기초: 모델 및 메트릭

OKLCH (권장): 지각 적으로 균일하며 그늘 'H' 를 유지하면서 가벼움 'L' and 채도 'C' 를 제어하는 것이 편리합니다.
실험실/LCH: 또한 적합; OKLCH는 인식이 더 안정적입니다.
sRGB: 유한 디스플레이 공간; 총계는 항상 sRGB 및 WCAG에서 검증됩니다.
대조 (WCAG 2. 2): 기본 텍스트 5:1, 큰 3:1; 중요한 알림-가능한 경우 AAA (7:1) 를 목표로합니다.

3) 시스템의 레이어: 브랜드에서 시맨틱까지

1. 브랜드 코어: 1-2 브랜드 쉐이드 (+ 지원 악센트).
2. 인터페이스 시맨틱: 역할 ('1 차', '2 차', '성공', '경고', '위험', '정보', '중립').
3. 톤 스케일: 가벼움 단계 (예: 25/50/100...900).
4. 체크: 'light '/' dark' (+ 대비, AMOLED).
5. 상태: '기본/호버/활성/초점/비활성화'.
6. 상황: 표면 ('bg/base', 'bg/missly', 'bg/highed') 및 텍스트 ('fg/primary', 'fg/secorary', 'fg/muted').
7. 데이터 시각화: 별도의 개별 및 연속 팔레트.

4) 브랜드 핵심: 선택과 구속

Hue를 선택하고 밝고 어두운 테마로 브랜드의 작동 가벼움을 정의하십시오. 60–0. 조명으로 버튼을 채우는 경우 70 '및' L λ0. 70–0. 어두운 텍스트/아이콘의 경우 80 ').
제한 크롬 'C': 높은 'C' 는 배너에서 아름답지만 UI에서 가독성을 깨뜨립니다. "마케팅" (풍부한) 및 "식료품" (보다 제한된) 의 두 가지 버전을 유지하십시오.
기본 ('브랜드/기본'), 대체 ('브랜드/alt') 및 중립 지원 ('중립') 변수를 수정하십시오.

5) 톤 스케일

목표는 제어 된 포화로 균일 한 가벼움 단계를 얻는 것입니다

OKLCH의 경우 'L' 단계를 이동하십시오 (예: 0. 98→0. 90→0. 80→…→0. 18), 'C' 는 비늘의 가장자리로 약간 줄어들어 빛의 "먼지" 와 어두운 곳의 "탁도" 를 피합니다.
체크 포인트 수정: '50/100/300/500 (키 )/700/900'.
각 단계에서 기본 배경 및 예상 텍스트 색상과 쌍의 대비를 확인하십시오.

브랜드/기본 스케일의 예 (OKLCH, 대략적인)

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6) 시맨틱 역할 및 매핑

별도의 브랜드와 의미론: "성공" 은 브랜드 녹색 일 필요는 없습니다.

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

'on-' 텍스트는 자동으로 계산됩니다 (§ 10 참조).

7) 밝은/어두운 테마 및 표면

표면과 텍스트의 기본 스케일을 정의하십시오

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

두 테마 모두에서 동등한 대비 목표를 유지하십시 순수한 검은 색에서 "눈먼" 흰색을 피하십시오-' L 'background를 ~ 0으로 올리십시오. 16.

8) 상태 및 상호 작용

각 역할에 대해 상태를 제어하는 '

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9) 책임과 WCAG

컨트롤의 기본 텍스트와 아이콘은 4 이상입니다. 5:1.
주요 시스템 알림 (KYC/AML, 18 +, 지불 오류) -AAA (7:1) 를 목표로합니다.
현장 상태 및 경계-적어도 3:1.
색상 (밑줄/초점 스타일) 뿐만 아니라 구별 링크.

10) 자동 맞춤 대비 텍스트 ('on-')

논리: 구성 요소의 채우기를 선택할 때 '온 컬러' 를 계산하십시오

1. OKLCH에 따르면 포식자를 결정하십시오. 'L _ on' so that '(L _ tex vs L _ bg) 텍스트 5:1`.
2. 크롬이 높으면 더 낮은 'C _ 텍스트' 에서 0으로 이동하십시오. 01–0. 03.
3. 어두운 테마를 보려면 'L _ on' 을 다른 0으로 올리십시오. 02–0. 눈부심을 상쇄하기 위해 04.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) 데이터 시각화

범주 형 팔레트: 색맹에 강한 8-12 색 (대체 표시가없는 적녹색 쌍 피하기).
연속: 'bg/highed' 에서 서명의 대비 제어가있는 악센트까지.
색상없이 식별 할 수 있도록 패턴/마커를 추가하십시오.

12) 국제 상황 (문화 협회)

지역 의미를 고려하십시오 (예: 빨간색-위험/주의; 금-승리/상).
iGaming의 경우: 한 화면에서 브랜드 악센트와 성공/위험 충돌을 피하십시오. 도해 법과 서명은 "밝기" 보다 중요합니다.

13) 설계 시스템으로의 통합

13. 명명 토큰 1 개

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13. 토큰 2 개 (JSON/스타일 사전)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13. 3 개의 CSS 변수 (테마 계층)

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 피그마/문서

구성 요소는 토큰 만 사용하며 직접 HEX/SRGB는 라인터로 금지됩니다.
라이브러리에서 "대조 행렬" 페이지: 실제 계수가있는 테이블 'fg × bg'.

14) 품질 관리 프로세스

디자인: 아트 보드 (두 모드 모두) 의 대비 점검, 색맹을위한 별도의 사전 설정.
코드에서: 단위 도우미는 대비를 계산하고 위반에 빠집니다. 중요한 화면을위한 비주얼 스냅 샷.
CI/CD에서: 모든 토큰 및 상태 쌍을 확인하고 구성 요소, 테마 및 실제 값으로보고하십시오.

15) iGaming의 세부 사항

프로모션 및 토너먼트: 텍스트가 '싱킹' 되지 않도록 백그라운드에서 오버레이 및 'C' 제약 조건을 사용하십시오.
책임있는 알림 (한계, 18 +, 위험) -진심으로 AAA.
메트릭/테이블: 색상뿐만 아니라 모양과 대비별로 숫자와 변경 징후를 구별합니다.

16) 구현 점검표

• 브랜드 쉐이드 및 해당 톤 스케일 (OKLCH) 이 정의됩니다.
• 두 테마에 대한 역할, 상태 및 표면이 설정됩니다.
• 대상 대비 자동 생성 'on-'.

CI에서 [] 'fg × bg' 매트릭스 및 WCAG 테스트.

• dataviz를위한 개별 팔레트 (색맹 지원 포함).
• 라이터 스타일은 "원시" 색상을 금지합니다.
• 가이드 라인의 예외와 이유 페이지.

17) 반 패턴

하나의 UX 신호에서 성공/오류와 브랜드 강조를 혼합하십시오.
계층 구조에 대해서만 채도에 따라 다릅니다.
빛/어두움을 동기화하지 마십시오 (테마 중 하나에서 "왼쪽" 대비).
토큰이없는 하드 HEX → 제어되지 않은 인터페이스 드리프트.

간략한 요약

위에서 아래로 팔레트를 만드십시오: 브랜드 코어 → 시맨틱 역할 → 톤 스케일 → 테마 → 상태. OKLCH, 핀 토큰, 자동화 '온' 및 WCAG 검사에서 작업하십시오. 별도로 dataviz의 팔레트를 입력하십시오. 이를 통해 브랜드 일관성, 가독성 및 제품 확장 성이 제공됩니다.