Colors

Primary Colors

버튼, 체크박스, 토글 등 주요 인터랙션 요소에 사용되는 색상

Aa

Primary gray-900 #111827

Aa

Primary Hover gray-800 #1f2937

Text Colors

텍스트 계층 구조를 나타내는 색상

Aa

Primary .text-primary gray-900 / white

Aa

Secondary .text-secondary gray-600 / gray-400

Aa

Muted .text-muted gray-500

Status Colors

상태 뱃지 및 필터 버튼에 사용되는 색상

Aa

Success .bg-success-solid 성공, 완료

Aa

Info .bg-info-solid 정보, 준비

Aa

Ready .bg-ready-solid 배송준비

Aa

Progress .bg-progress-solid 배송중

Aa

Complete .bg-complete-solid 배송완료

Aa

Error .bg-error-solid 오류, 취소

Aa

Warning .bg-warning-solid 경고, 보류

Aa

Hold .bg-hold-solid 비활성, 대기

Status Text Colors

상태를 나타내는 텍스트 색상

Aa

Success .text-success green-600 / green-400

Aa

Error .text-error red-600 / red-400

Aa

Warning .text-warning yellow-600 / yellow-400

Aa

Info .text-info blue-600 / blue-400

Aa

Ready .text-ready cyan-600 / cyan-400

Aa

Progress .text-progress indigo-600 / indigo-400

Aa

Complete .text-complete pink-600 / pink-400

Aa

Hold .text-hold gray-500 / gray-400

Background Colors

배경 및 표면에 사용되는 색상

Aa

Surface 카드, 모달 white / gray-800

Aa

Background 페이지 배경 gray-50 / gray-900

Aa

Input 입력 필드 gray-100 / gray-800

Border Colors

테두리 및 구분선에 사용되는 색상

Aa

Default 카드, 테이블 gray-200 / gray-700

Aa

Light 디바이더 gray-100 / gray-800