Colors · BSS Design System v3

Scales

5 ramps · 일부 미정의

컬러 ramp. BSS는 현재 의미 토큰만 토큰화되어 있고 *연속 ramp는 미토큰화* 상태 — 아래 시각 ramp는 기존 anchor 컬러로부터 시각적으로 보간한 것이며, 토큰으로 등록되지 않은 단계는 빗금 표시. 본격적 사용 전 토큰화가 필요합니다.

Gray

50

100

200

300

400

500

600

700

800

900

950

—

Blue

50

100

200

300

400

500

600

700

800

—

Sky

50

100

200

300

400

500

—

Green

50

100

—

500

—

Amber

50

100

—

500

—

Red

50

100

—

500

—

빗금()으로 표시된 칸은 아직 토큰화되지 않은 단계. 실제 사용 시 아래 의미 카테고리의 토큰을 우선 사용하세요.

Brand

6 tokens

BSS 정체성을 구성하는 핵심 색. 다른 모든 카테고리(Backgrounds·Borders·Status)는 이 위에서 보조 역할을 합니다.

Primary

Primary blue

대표색. 밝은 BG 위 CTA·강조에 사용. hover에서는 --c-primary-active로 전환.

--c-primary#006CB7default

--c-primary-active#338BC9hover · active

Dark blue

보조 브랜드. 섹션 BG로도 사용. hover에서는 --c-dark-blue-active.

--c-dark-blue#26257Cdefault

--c-dark-blue-active#3D3CA0hover · active

Sky accent

Sky

어두운 BG 위 CTA·강조에 사용. --c-sky-light는 부드러운 surface와 그라데이션 끝점.

--c-sky#58C5FFCTA on dark

--c-sky-light#CDEAFFsoft surface · gradient end

Backgrounds

2 tokens

페이지·섹션의 기본 표면. Background 1이 기본, Background 2는 섹션 차이를 만들 때 사용.

Background 1

Default page background

기본 페이지·기본 카드 표면. 모든 페이지의 출발점.

--c-canvas#FFFFFF.bg-canvas

Background 2

Secondary background

섹션 BG 로테이션에서 canvas와 교대로 사용. input fill에도 사용 가능. 같은 BG 두 번 연속 금지.

--c-light-grey#ECF0F3.bg-light-grey

Component backgrounds

3 states

버튼·뱃지·선택 카드 등 인터랙티브 요소의 BG. Geist의 *Colors 1–3* (default / hover / active)에 대응. BSS는 페어 토큰으로 표현합니다.

Primary CTA · light context

Primary button background

밝은 BG 위 CTA. .btn-primary가 사용. hover에서 sky로 전환 (대비 점프).

--c-primary#006CB7default

--c-sky#58C5FFhover

Sky CTA · dark context

Sky button background

어두운 BG 위 CTA. .btn-sky가 사용. hover에서 sky-light로 전환.

--c-sky#58C5FFdefault

--c-sky-light#CDEAFFhover

Selected option

Selection background

.option-card.selected의 BG.

--c-canvas#FFFFFFdefault

--c-sky-light#CDEAFFselected

Borders

7 line tokens

선의 두께·색은 토큰으로 관리합니다. Geist의 *Colors 4–6*에 대응. BSS는 *hairline*(섹션 구분)과 *outline*(input·선택 카드) 두 가중치로 나뉩니다.

Hairline

Section / divider

섹션 내부 구분선. 1px @ 12% 알파. 절대 섹션 사이 구분에는 사용하지 말 것 — 섹션은 BG로 구분합니다.

--c-line-softrgba(10,30,51,0.12)divider · accordion

Outline · default → hover → focus

Input · selectable card

입력 필드, 선택 카드의 외곽선. hover에서는 ink-deep, focus에서는 primary로. 두께 변화는 inset shadow로 처리 — 레이아웃 시프트 없음.

--c-line-defaultrgba(10,30,51,0.20)default

--c-line-hovervar(--c-ink-deep)hover

--c-line-focusvar(--c-primary)focus

Outline (inverted) · dark BG context

Input on dark BG

.card-inverted 안의 필드에 자동 적용. focus는 sky로.

--c-line-default-invertedrgba(255,255,255,0.40)default

--c-line-hover-invertedrgba(255,255,255,0.95)hover

--c-line-focus-invertedvar(--c-sky)focus

High contrast backgrounds

3 tokens

강조를 위한 어두운 섹션 BG. Geist의 *Colors 7–8*에 대응. 이 위에는 반드시 .btn-sky를 사용 (primary 금지).

Section BG · dark

--c-ink-deep#0A1E33가장 어두운 BG · .bg-ink-deep

--c-dark-blue#26257C진한 BG · .bg-dark-blue

--c-primary#006CB7브랜드 BG · .bg-primary

Text and icons

3 tokens

텍스트의 위계는 색으로 만듭니다. Geist의 *Colors 9–10*에 대응 — primary(강) / secondary(약) 두 단계 + body 기본.

Primary text · headings

High emphasis

헤딩, 핵심 본문, 강조 라벨. 거의 검정에 가까운 짙은 네이비.

--c-ink-deep#0A1E33heading · .t-body-strong

Default body

Body text

기본 본문. 약간의 회색기로 헤딩과 위계를 만듭니다.

--c-body#454745.t-body default

Secondary text · captions

Low emphasis

caption, footnote, 메타 정보. 본문보다 한 단계 약함.

--c-grey#7B7875caption · meta

Status

3 tokens

의미 색 — 성공·경고·위험. 뱃지·알림·검증 메시지에 한정해서 사용합니다.

--c-positive#00A775성공 · 완료

--c-warning#FAA41A대기 · 주의

--c-negative#F16A26위험 · 오류

Rules

DO

밝은 BG에는 .btn-primary, 어두운 BG에는 .btn-sky
텍스트 위계는 weight + color 조합. 같은 색으로 위계를 만들지 말 것
의미 색(positive/warning/negative)은 그 의미에만 사용. 장식 금지

DON'T

새 hex 발명 금지 — 13개 토큰 안에서 해결
같은 BG와 같은 버튼 컬러 조합 금지 (예: primary BG + primary button)
ink-deep BG 위 .btn-primary 금지 — 대비 부족
dark × dark 그라데이션 금지 (primary↔dark-blue↔ink-deep)