Color Tokens
디자인 시스템의 모든 컬러 토큰을 한눈에 확인합니다.
Brand & Secondary
Brand Light
#818cf8
Brand
#4f46e5
Brand Dark
#3730a3
Sec. Light
#7dd3fc
Secondary
#0ea5e9
Sec. Dark
#0369a1
Neutral / Gray
50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#d4d4d4
400
#a3a3a3
500
#737373
600
#525252
700
#404040
800
#262626
900
#171717
Semantic
Light / Default / Dark 변형 포함.
Suc. Light
#d1fae5
Success
#10b981
Suc. Dark
#065f46
Warn Light
#fef3c7
Warning
#f59e0b
Warn Dark
#92400e
Err. Light
#fee2e2
Error
#ef4444
Err. Dark
#991b1b
Info Light
#dbeafe
Info
#3b82f6
Info Dark
#1e40af
Surface / Text / Border
Surface
#ffffff
Alt
#f9fafb
Muted
#f3f4f6
Txt Primary
#111827
Txt Sec.
#6b7280
Disabled
#d1d5db
Divider
#e5e7eb
Medium
#d4d4d4
Light
#e5e5e5
Color Pairing Guide
배경 + 텍스트 + 액센트 조합을 실제 카드 형태로 시각화합니다.
Surface + Brand
기본 흰 배경에 Brand 색상 액센트를 사용하는 가장 기본적인 조합입니다.
Alt + Secondary
Alt 배경에 Secondary 색상을 액센트로 사용합니다. 보조 영역에 적합합니다.
Dark + Light Text
어두운 Brand 배경에 흰 텍스트 조합. 헤더, CTA 영역에 적합합니다.
Success Feedback
성공 피드백 메시지에 적합한 밝은 녹색 배경 + 어두운 텍스트 조합입니다.
Error Feedback
오류 알림에 적합한 밝은 빨강 배경 + 어두운 텍스트 조합입니다.
Neutral Dark + Accent
코드 에디터, 터미널 스타일의 다크 UI 조합입니다. Brand Light 액센트.
Storybook Color Token
AddonDesign Token Addon 스타일로 컬러/타이포/스페이싱 토큰을 테이블/카드로 확인합니다.
@tokens Brand
| Token | Value | Preview |
|---|---|---|
| --brand-light | #818cf8 | |
| --brand | #4f46e5 | |
| --brand-dark | #3730a3 |
@tokens Secondary
| Token | Value | Preview |
|---|---|---|
| --secondary-light | #7dd3fc | |
| --secondary | #0ea5e9 | |
| --secondary-dark | #0369a1 |
@tokens Neutral
| Token | Value | Preview |
|---|---|---|
| --neutral-50 | #fafafa | |
| --neutral-100 | #f5f5f5 | |
| --neutral-200 | #e5e5e5 | |
| --neutral-300 | #d4d4d4 | |
| --neutral-400 | #a3a3a3 | |
| --neutral-500 | #737373 | |
| --neutral-600 | #525252 | |
| --neutral-700 | #404040 | |
| --neutral-800 | #262626 | |
| --neutral-900 | #171717 |
@tokens Semantic
| Token | Value | Preview |
|---|---|---|
| --success | #10b981 | |
| --success-light | #d1fae5 | |
| --warning | #f59e0b | |
| --warning-light | #fef3c7 | |
| --error | #ef4444 | |
| --error-light | #fee2e2 | |
| --info | #3b82f6 | |
| --info-light | #dbeafe | |
| --success-dark | #065f46 | |
| --warning-dark | #92400e | |
| --error-dark | #991b1b | |
| --info-dark | #1e40af |
@tokens Surface
| Token | Value | Preview |
|---|---|---|
| --surface | #ffffff | |
| --surface-alt | #f9fafb | |
| --surface-muted | #f3f4f6 |
@tokens Text
| Token | Value | Preview |
|---|---|---|
| --txt-primary | #111827 | |
| --txt-secondary | #6b7280 | |
| --txt-disabled | #d1d5db |
@tokens Border
| Token | Value | Preview |
|---|---|---|
| --divider | #e5e7eb | |
| --border-medium | #d4d4d4 | |
| --border-light | #e5e5e5 |
Preview
모든 컬러 토큰이 실제 UI에서 어떻게 조합되는지 확인합니다.
Design System
모든 컬러가 조화로운
통합 디자인
Brand와 Secondary 컬러의 조합으로 일관되고 세련된 사용자 경험을 만듭니다.
Cards
Form
Alerts
저장 완료
변경 사항이 성공적으로 저장되었습니다.
안내
시스템 점검이 오늘 자정에 예정되어 있습니다.
주의
저장 공간이 80%를 초과했습니다. 정리를 권장합니다.
오류
요청을 처리하는 중 문제가 발생했습니다. 다시 시도해주세요.
Stats
총 사용자
12,847
+12.5%
매출
₩4.2M
+8.3%
전환율
3.24%
-1.2%
응답 시간
142ms
정상
CTA
지금 바로 시작하세요
디자인 시스템으로 더 빠르고 일관된 제품을 만들어보세요.
99.9%
가동률
50+
컴포넌트
24/7
지원