Color Tokens
디자인 시스템의 모든 컬러 토큰을 한눈에 확인합니다.
Brand & Secondary
Brand Light
#B8F5C8
Brand
#80ED99
Brand Dark
#38A85C
Sec. Light
#6BA3C7
Secondary
#22577A
Sec. Dark
#143348
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 | #B8F5C8 | |
| --brand | #80ED99 | |
| --brand-dark | #38A85C |
@tokens Secondary
| Token | Value | Preview |
|---|---|---|
| --secondary-light | #6BA3C7 | |
| --secondary | #22577A | |
| --secondary-dark | #143348 |
@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에서 어떻게 조합되는지 확인합니다.
Mint Design System
자연에서 영감받은
신선한 디자인
민트 그린과 딥 오션 블루의 조화로 청량하고 안정적인 사용자 경험을 만듭니다.
Cards
Form
Alerts
저장 완료
변경 사항이 성공적으로 저장되었습니다.
안내
시스템 점검이 오늘 자정에 예정되어 있습니다.
주의
저장 공간이 80%를 초과했습니다. 정리를 권장합니다.
오류
요청을 처리하는 중 문제가 발생했습니다. 다시 시도해주세요.
Stats
총 사용자
12,847
+12.5%
매출
₩4.2M
+8.3%
전환율
3.24%
-1.2%
응답 시간
142ms
정상
CTA
지금 바로 시작하세요
Mint 디자인 시스템으로 더 빠르고 일관된 제품을 만들어보세요.
99.9%
가동률
50+
컴포넌트
24/7
지원