기초
색
색 역할 다섯 개, 라이트·다크 값, 위젯 색면, 빛의 허용·금지 영역, 데이터 팔레트, 실시간 대비 표.
역할 다섯 개
색 역할은 다섯 개로 설명된다. 바탕은 종이와 먹이고, 강조색은 하나, 라임(Rime)이다(로고 색, 오너 2026-10-23, 임시 확정: 아니다 싶으면 바뀐다). 주요 버튼은 먹색으로 남는다. 라임은 링크, 초점 링, 선택, 활성 상태, 브랜드 순간에만 쓴다. 안내(info) 상태색도 라임 계열로 옮겨 파란색은 하나뿐이다. 빨강·초록 상태색과 차트 데이터 색은 그대로다. 바뀌는 곳은 general.palette.css 한 파일이다. 빛은 역할이 아니라 재료다.
라임 #0b5d7d · oklch(45% 0.088 232) · 흰 바탕 7.30:1, 캔버스 #f5f5f7 6.71:1. 다크 모드는 라임 나이트 #78c5e4(#0c0c0d 10.15:1, #1c1c1e 8.84:1). 연한 바탕은 호어프로스트 #dff2f9, 다크는 깊은 라임 틴트 #12303d. 라임과 먹색 글자 사이는 2.36:1뿐이라 링크는 항상 밑줄을 둔다.
| 역할 | 토큰 | 쓰는 곳 | 쓰지 않는 곳 |
|---|---|---|---|
| 중립 | canvas · surface · ink · line | 바탕, 면, 글자, 구분선 | — |
| 행동 | action (먹색) · link · selection · accent (라임) | 주요 버튼은 먹색. 링크(밑줄 필수), 선택, 활성 상태, 브랜드 순간은 라임 | 상태 표시, 장식, 주요 버튼 채움에 라임 |
| 초점 | focus | 키보드 초점 링 (라임) | 버튼 채움, 상태 |
| 상태 | danger · warning · success · info (+ soft) | 오류·주의·완료·안내, 항상 아이콘 + 라벨과 함께 | 브랜드 표현, 신뢰 상태 구분의 유일한 수단 |
| 위젯 색면 | tide · dusk · sand · night | 위젯 S/M/L 배경 | 버튼, 상태, 본문 화면 배경 |
- 이렇게새 색이 필요하면 먼저 다섯 역할 중 어디에 속하는지 정한다. 속하지 않으면 새 색을 만들지 않는다.
- 이렇게 하지 않기화면에서 두 번째 강조색을 고르거나 역할(--cb-action, --cb-focus)을 다른 색으로 바꾸지 않는다. 주요 버튼을 라임으로 칠하지 않는다. 모든 v4 화면은 <html data-collection="general">에서 같은 역할을 읽는다.
- 이렇게 하지 않기라임을 넓은 면에 칠하지 않는다. 한 화면에서 라임은 링크·초점·선택·순위 같은 작은 신호로만 보인다.
- 이렇게 하지 않기primitive(--p-*)를 컴포넌트에서 직접 읽지 않는다. lint R5가 막는다.
두 팔레트 비교
오너 2026-10-23: 「전체적으로 칙칙한 느낌」. 두 팔레트를 나란히 놓고 고른다. Centralby(기본)는 아주 밝은 차가운 바탕 #f6f8f9, 흰 면, 먹에 가까운 글자 #171a1c, 라임 쪽으로 아주 살짝 기운 중립 회색, 주요 버튼은 먹색. Apple은 apple.com과 iOS의 중립 체계를 그대로: 섹션 회색 #f5f5f7, 흰 카드, 글자 #1d1d1f, 보조 #6e6e73, 구분선 #d2d2d7, 다크는 #000 / #1c1c1e / #2c2c2e, 보조 #a1a1a6. 애플 블루는 쓰지 않는다(오너): 강조는 두 팔레트 모두 라임, 주요 버튼은 먹색 알약. 아래 프레임은 각자 data-palette를 갖고 있어서 페이지가 어느 팔레트든 둘 다 보인다. 페이지 전체를 바꾸려면 머리글의 Centralby · Apple 스위치나 ?palette=apple을 쓴다.
실제 컴포넌트: 같은 카드, 두 팔레트 (라이트 · 다크)
Centralby · 라이트
canvas…surface…surface-sunken…ink…ink-muted…line…line-strong…accent…link…focus…action…action-ink…selection…danger…warning…success…Centralby · 다크
canvas…surface…surface-sunken…ink…ink-muted…line…line-strong…accent…link…focus…action…action-ink…selection…danger…warning…success…Apple · 라이트
canvas…surface…surface-sunken…ink…ink-muted…line…line-strong…accent…link…focus…action…action-ink…selection…danger…warning…success…Apple · 다크
canvas…surface…surface-sunken…ink…ink-muted…line…line-strong…accent…link…focus…action…action-ink…selection…danger…warning…success…두 팔레트 모두 npm run design:contrast를 통과한다(general, general:apple). 애플 상태색 중 글자 대비가 모자란 값(#ff3b30 · #ff9500 · #34c759)은 iOS 고대비 값과 apple.com 값으로 바꿨다. 표와 이유: round-5/PALETTES.md.
라이트·다크 값
아래 견본은 이 페이지의 CSS에서 직접 읽는다. 왼쪽은 data-theme="light", 오른쪽은 data-theme="dark" 프레임이다. 다크는 같은 색을 밤빛에서 본 것(깊은 중립 바탕)이고 반전이 아니다. 높이는 그림자 대신 톤과 1px 밝은 경계로 보인다.
실제 컴포넌트: 중립 · 바탕과 면
라이트
--cb-canvas…--cb-canvas-deep…--cb-surface…--cb-surface-raised…--cb-surface-sunken…다크
--cb-canvas…--cb-canvas-deep…--cb-surface…--cb-surface-raised…--cb-surface-sunken…실제 컴포넌트: 중립 · 글자와 선
라이트
--cb-ink…--cb-ink-muted…--cb-line…--cb-line-strong…다크
--cb-ink…--cb-ink-muted…--cb-line…--cb-line-strong…실제 컴포넌트: 강조색 · 라임(Rime)
라이트
--cb-accent…--cb-link…--cb-focus…--cb-selection…--cb-highlight…다크
--cb-accent…--cb-link…--cb-focus…--cb-selection…--cb-highlight…실제 컴포넌트: 행동 (먹색)
라이트
--cb-action…--cb-action-hover…--cb-action-ink…다크
--cb-action…--cb-action-hover…--cb-action-ink…실제 컴포넌트: 상태 (항상 아이콘 + 라벨과 함께)
라이트
--cb-danger…--cb-danger-soft…--cb-warning…--cb-warning-soft…--cb-success…--cb-success-soft…--cb-info…--cb-info-soft…다크
--cb-danger…--cb-danger-soft…--cb-warning…--cb-warning-soft…--cb-success…--cb-success-soft…--cb-info…--cb-info-soft…실제 컴포넌트: 재료 · 빛·재질·막
라이트
--cb-glow-tide…--cb-glow-dusk…--cb-scrim…다크
--cb-glow-tide…--cb-glow-dusk…--cb-scrim…위젯 색면
한 위젯 = 한 목적 = 한 색면. 색면은 iOS 위젯처럼 라이트·다크에서 같은 값이다. 4종뿐이고 그라디언트 색면은 없다.
tide · … / … · …dusk · … / … · …sand · … / … · …night · … / … · …- 이렇게색면 위 글자는 그 색면의 ink 한 색, 불투명 100%만. 위계는 크기·굵기로 만든다.
- 이렇게night 색면은 다크 바탕에서, sand 색면은 라이트 바탕에서 --cb-field-edge hairline으로 분리한다.
- 이렇게색면 안 컨트롤의 초점 링은 그 색면의 ink 색이다. 위젯 자체의 링은 색면 바깥(캔버스 위)에 그린다.
- 이렇게 하지 않기색면 안에 상태색을 올리지 않는다. 검토 필요·원문 열 수 없음은 같은 ink의 아이콘 + 라벨로.
- 이렇게 하지 않기한 화면에 색면 3개 초과, 같은 색면 나란히, sand 2개 이상을 두지 않는다. 색면 위에 빛을 겹치지 않는다.
빛
빛은 원형 radial gradient 두 개(--cb-glow-tide, --cb-glow-dusk)다. 깊이만 주고 내용 위에 올라오지 않는다. 한 화면에 빛은 원 하나가 기본이다. 스크린샷에서 빛이 위젯보다 먼저 보이면 실패다.
허용 영역
- 랜딩 첫 화면 히어로 뒤 (헤드라인은 --cb-ink만)
- 첫 “아하” 카드가 도착하는 순간의 배경 (계정당 한 번)
- 탭 “나” 상단 헤더, 카탈로그 첫 화면
금지 영역
- 입력 폼 전체(/signup, /start 동의 시트)
- 기록 목록, 상세 읽기 화면, 근거 원문 영역
- 위젯 색면 안과 위젯 뒤, 마크 뒤
- muted 글자, 상태색 글자, 링크 밑
실제 컴포넌트: 빛 하나 + 그 앞의 종이 카드
라이트
다크
데이터 팔레트
데이터 색 --cb-data-1…4는 “차트 안에서만” 쓰는 하위 역할이다. 같은 출처는 모든 화면에서 같은 색·같은 위치(캘린더 → 메일 → 문서 → 기타 고정 순서). 색은 3순위 보강이고 직접 라벨과 표식 모양이 먼저다.
실제 컴포넌트: 계열 색, 표식, 패턴과 면 대비(3:1)
라이트
--cb-data-1 ●캘린더 · 단색 · …대비 / surface … 읽을 수 없음--cb-data-2 ■메일 · 점 격자 · …대비 / surface … 읽을 수 없음--cb-data-3 ▲문서 · 세로줄 · …대비 / surface … 읽을 수 없음--cb-data-4 ◆그 외·기타 · 가로줄 · …대비 / surface … 읽을 수 없음다크
--cb-data-1 ●캘린더 · 단색 · …대비 / surface … 읽을 수 없음--cb-data-2 ■메일 · 점 격자 · …대비 / surface … 읽을 수 없음--cb-data-3 ▲문서 · 세로줄 · …대비 / surface … 읽을 수 없음--cb-data-4 ◆그 외·기타 · 가로줄 · …대비 / surface … 읽을 수 없음- 이렇게계열 둘이면 d1 + d2(먹 + 잎). 다섯째 계열은 없고 “기타 N개 출처”로 묶는다. 데이터 색은 오너 결정으로 그대로 두며 강조색(라임)이 아니다. 라임을 계열 색으로 쓰지 않는다.
- 이렇게 하지 않기d4(퍼티)는 면 채움 전용이다. 선이나 점으로만 쓰지 않고 먹 테두리를 함께 둔다.
- 이렇게 하지 않기데이터 색을 경고에 쓰지 않는다. d3(시트러스)는 경고 amber와 가까운 색이다. 계열 이름표 글자는 --cb-ink.
색으로 구분하지 않는 것
신뢰 상태(추정 / 원문 열 수 없음 / 검토 필요 / 직접 작성)는 색으로 구분하지 않는다. 선 모양·아이콘·라벨·위치로 구분하고 색은 보조다. 흑백 인쇄·forced-colors·스크린리더에서도 의미가 남아야 한다.
링크(--cb-link)는 라임이고 먹색 글자와의 대비가 2.36:1뿐이다. 그래서 본문 링크는 항상 밑줄로 구분한다. 색만으로 링크를 알리지 않는다.
대비 표
기준: 본문 4.5:1, 24px 이상 글자와 UI·초점 3:1, 장식선은 기준 없음. 반투명은 최악 합성 지점으로 잰다 — 빛은 두 빛이 겹친 최대 지점, 재질은 그 아래로 가장 반대되는 내용이 지나갈 때. 아래 값은 지금 적용된 토큰으로 계산했다.
| 쌍 | 전경 | 배경(합성) | 대비 | 기준 | 판정 |
|---|---|---|---|---|---|
ink / canvas | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / canvas | … | … | … | 4.5 | 읽을 수 없음 |
link / canvas | … | … | … | 4.5 | 읽을 수 없음 |
link / surface-sunken | … | … | … | 4.5 | 읽을 수 없음 |
accent / surface | … | … | … | 4.5 | 읽을 수 없음 |
link / ink (needs the underline) | … | … | … | 3 | 읽을 수 없음 |
ink / surface | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface-raised | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface-sunken | … | … | … | 4.5 | 읽을 수 없음 |
action-ink / action | … | … | … | 4.5 | 읽을 수 없음 |
action-ink / action-hover | … | … | … | 4.5 | 읽을 수 없음 |
line-strong / canvas (UI) | … | … | … | 3 | 읽을 수 없음 |
line-strong / surface-raised (UI) | … | … | … | 3 | 읽을 수 없음 |
focus / canvas (UI) | … | … | … | 3 | 읽을 수 없음 |
focus / surface-raised (UI) | … | … | … | 3 | 읽을 수 없음 |
danger / surface | … | … | … | 4.5 | 읽을 수 없음 |
danger / danger-soft | … | … | … | 4.5 | 읽을 수 없음 |
warning / warning-soft | … | … | … | 4.5 | 읽을 수 없음 |
success / success-soft | … | … | … | 4.5 | 읽을 수 없음 |
info / info-soft | … | … | … | 4.5 | 읽을 수 없음 |
selection-ink / selection | … | … | … | 4.5 | 읽을 수 없음 |
highlight-ink / highlight | … | … | … | 4.5 | 읽을 수 없음 |
ink / glow-tide (max) | … | … | … | 4.5 | 읽을 수 없음 |
ink / glow-tide + glow-dusk (worst) | … | … | … | 4.5 | 읽을 수 없음 |
focus / glow-tide + glow-dusk (worst) | … | … | … | 3 | 읽을 수 없음 |
ink-muted / glow-tide + glow-dusk | … | … | … | 4.5 | 읽을 수 없음 |
focus ring / action fill (reference) | … | … | … | 3 | 읽을 수 없음 |
값은 지금 페이지에 적용된 CSS에서 읽습니다.
| 쌍 | 전경 | 배경(합성) | 대비 | 기준 | 판정 |
|---|---|---|---|---|---|
ink / canvas | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / canvas | … | … | … | 4.5 | 읽을 수 없음 |
link / canvas | … | … | … | 4.5 | 읽을 수 없음 |
link / surface-sunken | … | … | … | 4.5 | 읽을 수 없음 |
accent / surface | … | … | … | 4.5 | 읽을 수 없음 |
link / ink (needs the underline) | … | … | … | 3 | 읽을 수 없음 |
ink / surface | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface-raised | … | … | … | 4.5 | 읽을 수 없음 |
ink-muted / surface-sunken | … | … | … | 4.5 | 읽을 수 없음 |
action-ink / action | … | … | … | 4.5 | 읽을 수 없음 |
action-ink / action-hover | … | … | … | 4.5 | 읽을 수 없음 |
line-strong / canvas (UI) | … | … | … | 3 | 읽을 수 없음 |
line-strong / surface-raised (UI) | … | … | … | 3 | 읽을 수 없음 |
focus / canvas (UI) | … | … | … | 3 | 읽을 수 없음 |
focus / surface-raised (UI) | … | … | … | 3 | 읽을 수 없음 |
danger / surface | … | … | … | 4.5 | 읽을 수 없음 |
danger / danger-soft | … | … | … | 4.5 | 읽을 수 없음 |
warning / warning-soft | … | … | … | 4.5 | 읽을 수 없음 |
success / success-soft | … | … | … | 4.5 | 읽을 수 없음 |
info / info-soft | … | … | … | 4.5 | 읽을 수 없음 |
selection-ink / selection | … | … | … | 4.5 | 읽을 수 없음 |
highlight-ink / highlight | … | … | … | 4.5 | 읽을 수 없음 |
ink / glow-tide (max) | … | … | … | 4.5 | 읽을 수 없음 |
ink / glow-tide + glow-dusk (worst) | … | … | … | 4.5 | 읽을 수 없음 |
focus / glow-tide + glow-dusk (worst) | … | … | … | 3 | 읽을 수 없음 |
ink-muted / glow-tide + glow-dusk | … | … | … | 4.5 | 읽을 수 없음 |
focus ring / action fill (reference) | … | … | … | 3 | 읽을 수 없음 |
값은 지금 페이지에 적용된 CSS에서 읽습니다.
- 이렇게 하지 않기“사용 금지”로 표시된 쌍은 통과하더라도 실제 화면에 쓰지 않는다: 빛 위 muted 글자, 초점 링이 action 채움에 직접 닿는 경우.
- 이렇게초점 링은 offset 2px로 바깥 바탕에 닿게 한다. 그래서 링 대비는 채움이 아니라 바탕 기준이다.
정식 기록은 foundation.md §5(저장소 밖 스크립트 계산)와 npm run design:contrast다. 이 표와 다르면 토큰이 바뀐 것이니 게이트를 다시 돌린다.
--cb-glow-* --cb-glass-* --cb-field-*