디자인 토큰

Onul-D는 두 레이어 토큰을 제공해요.
✅ Semantic 클래스를 우선 쓰고, 어쩔 수 없을 때만 raw scale을 escape hatch로 사용하세요.

Live example — semantic tokens

총 자산

3,156,240원

+2.4%

위 박스 안의 모든 색상이 semantic 토큰

Semantic Tokens

Surface

bg

--color-bg

기본 배경 (페이지)

bg-subtle

--color-bg-subtle

filled card, section bg

bg-muted

--color-bg-muted

input 기본, hover

bg-overlay

--color-bg-overlay

modal 뒷배경

Text

Aa

text

--color-text

본문, heading

Aa

text-secondary

--color-text-secondary

label

Aa

text-tertiary

--color-text-tertiary

보조 설명

Aa

text-placeholder

--color-text-placeholder

input placeholder

Aa

text-disabled

--color-text-disabled

비활성 텍스트

Aa

text-inverse

--color-text-inverse

어두운 배경 위 글자

Border

border

--color-border

기본 테두리

border-strong

--color-border-strong

focus border

border-primary

--color-border-primary

강조 박스 (blue-100 solid)

border-danger

--color-border-danger

오류 박스 (rgba 25%)

border-success

--color-border-success

성공 박스 (rgba 25%)

border-warning

--color-border-warning

경고 박스 (rgba 30%)

border-info

--color-border-info

정보 박스 (rgba 25%)

Brand / Action

primary

--color-primary

주요 버튼 배경

primary-hover

--color-primary-hover

주요 버튼 hover

primary-subtle

--color-primary-subtle

informational tag

Status

danger

--color-danger

오류, 위험 액션

danger-subtle

--color-danger-subtle

오류 weak 배경

success

--color-success

성공

success-subtle

--color-success-subtle

성공 weak 배경

warning

--color-warning

경고

warning-subtle

--color-warning-subtle

경고 weak 배경

info

--color-info

정보

info-subtle

--color-info-subtle

정보 weak 배경

Status Text (어두운 변형)

*-500 fill 색은 흰 배경 위 AA contrast (4.5:1) 미달이라 본문 텍스트로 쓰면 안 읽힘. weak/subtle 배경 위 텍스트로는 이쪽 사용.

Aa

danger-text

--color-danger-text

danger-subtle 배경 위 본문 (AA contrast)

Aa

success-text

--color-success-text

success-subtle 배경 위 본문

Aa

warning-text

--color-warning-text

warning-subtle 배경 위 본문

Aa

info-text

--color-info-text

info-subtle 배경 위 본문

danger-subtle bg

danger 500: 잘 안 읽힘

danger-text: 잘 읽힘 ✓

success-subtle bg

success 500: 잘 안 읽힘

success-text: 잘 읽힘 ✓

warning-subtle bg

warning 500: 잘 안 읽힘

warning-text: 잘 읽힘 ✓

info-subtle bg

info 500: 잘 안 읽힘

info-text: 잘 읽힘 ✓

Raw Scales (escape hatch)

semantic으로 표현이 안 되는 경우에만 사용. 기존 컴포넌트들은 아직 raw scale을 쓰고 있어요.

Grey

50

100

200

300

400

500

600

700

800

900

Blue

50

100

400

500

600

red

50

500

yellow

50

500

green

50

500

teal

50

500

purple

50

500

사용 예시

// ✅ semantic 우선
<div className="bg-bg-subtle text-text-secondary border border-border">
  <button className="bg-primary text-text-inverse hover:bg-primary-hover">
    저장
  </button>
</div>

// ⚠️ 부득이할 때만 raw
<span className="bg-grey-100 text-blue-500">draft</span>

토큰 정의: packages/onul-d/src/styles/tokens.css