COLOR TOKENS

컬러 토큰 33종

시멘틱 토큰 기반 — Light / Dark 양쪽 hex가 자동 매핑됩니다. 하드코드 hex 금지. CSS prefix는 --ds-core-color-*. ⛔ 표시는 Light 마이그 대기. 각 카드의 좌우 swatch는 Light/Dark 시각화입니다.

Background

14 tokens
L
D
background
L#ffffff
D#0a0a0a
기본 페이지 배경
L
D
background-weak
L#f5f5f5
D#141414
약한 배경 (카드, 섹션)
L
D
background-inverse
L#141414
D#f5f5f5
반전 배경 (Snackbar)
L
D
background-brand
L#00a1ff
D#00a1ff
브랜드 배경 (CTA)
L
D
background-brand-weak
L#f0f8fc
D#01243f
브랜드 약배경 (chip selected)
L
D
background-emphasis
L#00a1ff
D#00a1ff
강조
L
D
background-emphasis-weak
L#f0f8fc
D#01243f
강조 약배경
L
D
background-critical
L#ff7777
D#ef2c3e
에러/경고 배경 (Light 마이그 대기)
L
D
background-critical-weak
L#ffeded
D#5b030e
에러 약배경 (Light 마이그 대기)
L
D
background-attention
L#d19506
D#b27800
주의 배경
L
D
background-attention-weak
L#fcf4dd
D#472300
주의 약배경
L
D
background-dim
L#00000066
D#000000cc
딤 오버레이 (모달 백드롭)
L
D
background-overlay
L#0000000d
D#ffffff0d
반투명 오버레이
L
D
background-disabled
L#ededed
D#222222
비활성

Border

8 tokens
L
D
border
L#e0e0e0
D#383838
기본 보더
L
D
border-strong
L#141414
D#f5f5f5
Input focus 등 강조 보더
L
D
border-inverse
L#ffffff
D#0a0a0a
반전
L
D
border-thumbnail
L#0000000d
D#0000000d
썸네일 미세 보더
L
D
border-brand
L#00a1ff
D#00a1ff
브랜드 (chip selected)
L
D
border-emphasis
L#00a1ff
D#00a1ff
강조 보더
L
D
border-critical
L#ff7777
D#fd3d4a
Input error 보더 (Light 마이그 대기)
L
D
border-attention
L#d19506
D#b27800
주의 보더

Foreground (텍스트·아이콘)

8 tokens
L
D
foreground
L#141414
D#f5f5f5
기본 텍스트
L
D
foreground-weak
L#8c8c8c
D#acacac
보조 텍스트 (메타·캡션)
L
D
foreground-inverse
L#ffffff
D#0a0a0a
반전 텍스트 (CTA 라벨)
L
D
foreground-brand
L#00a1ff
D#00a1ff
브랜드 텍스트
L
D
foreground-emphasis
L#00a1ff
D#00a1ff
강조 텍스트
L
D
foreground-critical
L#f05656
D#ef2c3e
에러 텍스트 (helper)
L
D
foreground-attention
L#b27800
D#d19506
주의 텍스트
L
D
foreground-disabled
L#c1c1c1
D#737373
비활성 텍스트

Accent (포인트 컬러)

3 tokens
L
D
accent-red
L#fd3d4a
D#fd3d4a
할인율, 강조 액센트
L
D
accent-yellow
L#ffc300
D#ffc300
별점, 리뷰
L
D
accent-purple
L#6f3dde
D#6f3dde
프로모션, 특별 강조
OHOUSE-DESIGN.md §2 · 전체 spec은 본 파일 §2 (Color Palette & Roles) 참조. 팔레트 19단계·트랙 확장(commerce.*, o2o.*) 별도 정의.