Color
Color Palette
디자인 시스템의 컬러 팔레트를 확인할 수 있습니다.
컬러 팔레트는 디자인 시스템의 기본 색상 세트입니다. 각 색상은 일관된 사용자 경험을 제공하기 위해 특정 용도로 설계되었습니다.
Neutral
Neutral 색상은 텍스트, 배경, 경계선 등 기본 UI 요소에 사용됩니다.
5
5
#f7f7f8
10
10
#f4f4f5
20
20
#eaebec
30
30
#dbdcdf
40
40
#c2c4c8
50
50
#989ba2
60
60
#70737c
70
70
#46474c
80
80
#2e2f33
90
90
#1b1c1e
Chromatic
Chromatic 색상은 주요 액션, 상태 표시, 강조 등에 사용됩니다.
Blue
blue
5
5
#ebf5ff
10
10
#d6e8ff
20
20
#afcdff
30
30
#84aeff
40
40
#5b8bff
50
50
#2c61fe
60
60
#214cd1
70
70
#1336ac
80
80
#072187
90
90
#020964
Green
green
5
5
#ebf9ef
10
10
#d0f2da
20
20
#9ee0b4
30
30
#69c88e
40
40
#1fad66
50
50
#009a58
60
60
#007435
70
70
#005a26
80
80
#004118
90
90
#002a0a
Yellow
yellow
5
5
#fefadb
10
10
#fff4b4
20
20
#ffeb7b
30
30
#ffe241
40
40
#ffd300
50
50
#ffc107
60
60
#e49a15
70
70
#b87700
80
80
#754c00
90
90
#492c00
Red
red
5
5
#ffece9
10
10
#ffdad5
20
20
#ffb3ab
30
30
#ff847c
40
40
#f84b4b
50
50
#e82011
60
60
#b8000e
70
70
#910006
80
80
#6b0001
90
90
#480000
Purple
purple
5
5
#fdf0ff
10
10
#f7defd
20
20
#ebb9f7
30
30
#dd8df0
40
40
#ca59e4
50
50
#ae29c9
60
60
#8f17a6
70
70
#700983
80
80
#520062
90
90
#360041
Primary
primary
5
5
#eaf6ff
10
10
#d3e9ff
20
20
#a9cfff
30
30
#79b1ff
40
40
#4b8efe
50
50
#0066fd
60
60
#0051d1
70
70
#003aab
80
80
#002587
90
90
#000e64
Secondary
secondary
5
5
#f9f1ff
10
10
#f0deff
20
20
#dcbcff
30
30
#c693ff
40
40
#ac69fb
50
50
#8e3de8
60
60
#7531b8
70
70
#5b2093
80
80
#42136e
90
90
#2a0849
Tokens
Palette Colors
디자인 토큰에서 사용할 수 있는 모든 팔레트 색상입니다.
| 이름 | 값 | 설명 |
|---|---|---|
neutral-5 | #f7f7f8 | 가장 밝은 회색 |
neutral-10 | #f4f4f5 | 밝은 회색 |
neutral-20 | #eaebec | 연한 회색 |
neutral-30 | #dbdcdf | 중간 밝기 회색 |
neutral-40 | #c2c4c8 | 중간 회색 |
neutral-50 | #989ba2 | 중간 어두운 회색 |
neutral-60 | #70737c | 어두운 회색 |
neutral-70 | #46474c | 매우 어두운 회색 |
neutral-80 | #2e2f33 | 거의 검은색 |
neutral-90 | #2e2f33 | 가장 어두운 회색 |
blue-5 | #f0f3ff | 가장 밝은 파란색 |
blue-50 | #1c4efc | 기본 파란색 |
blue-90 | #061032 | 가장 어두운 파란색 |
green-5 | #eef7ee | 가장 밝은 초록색 |
green-50 | #008000 | 기본 초록색 |
green-90 | #001a00 | 가장 어두운 초록색 |
yellow-5 | #fffbe5 | 가장 밝은 노란색 |
yellow-50 | #ffd400 | 기본 노란색 |
yellow-90 | #332a00 | 가장 어두운 노란색 |
red-5 | #fef1f1 | 가장 밝은 빨간색 |
red-50 | #ee0000 | 기본 빨간색 |
red-90 | #300000 | 가장 어두운 빨간색 |
purple-5 | #f5eef7 | 가장 밝은 보라색 |
purple-50 | #6b0080 | 기본 보라색 |
purple-90 | #15001a | 가장 어두운 보라색 |
primary-5 | #e6f0ff | 가장 밝은 Primary 색상 |
primary-50 | #065dff | 기본 Primary 색상 |
primary-90 | #03276b | 가장 어두운 Primary 색상 |
secondary-5 | #f1e8fe | 가장 밝은 Secondary 색상 |
secondary-50 | #7614f5 | 기본 Secondary 색상 |
secondary-90 | #320867 | 가장 어두운 Secondary 색상 |
Base Colors
| 이름 | 값 | 설명 |
|---|---|---|
base-white | #ffffff | 흰색 |
base-black | #1b1c1e | 검은색 |
base-positive | #32cd32 | 긍정 상태 색상 |
base-cautionary | #ffd400 | 주의 상태 색상 |
base-destructive | #ee0000 | 위험 상태 색상 |
Status Colors
| 이름 | 값 | 설명 |
|---|---|---|
status-positive | #32cd32 | 긍정 상태 |
status-cautionary | #ffd400 | 주의 상태 |
status-destructive | #ee0000 | 위험 상태 |
Action Colors
| 이름 | 값 | 설명 |
|---|---|---|
action-primary | #065dff | 기본 Primary 액션 |
action-primary-disabled | #065dff29 | 비활성 Primary 액션 |
action-primary-hover | #0555e8 | 호버 Primary 액션 |
action-primary-active | #0442b5 | 활성 Primary 액션 |
action-positive | #32cd32 | 기본 Positive 액션 |
action-positive-disabled | #32cd3229 | 비활성 Positive 액션 |
action-positive-hover | #1fad1f | 호버 Positive 액션 |
action-positive-active | #1e7b1e | 활성 Positive 액션 |
action-cautionary | #ffd400 | 기본 Cautionary 액션 |
action-cautionary-disabled | #ffd40029 | 비활성 Cautionary 액션 |
action-cautionary-hover | #d6ab00 | 호버 Cautionary 액션 |
action-cautionary-active | #a38500 | 활성 Cautionary 액션 |
action-destructive | #ee0000 | 기본 Destructive 액션 |
action-destructive-disabled | #ee000029 | 비활성 Destructive 액션 |
action-destructive-hover | #cd0404 | 호버 Destructive 액션 |
action-destructive-active | #8f0000 | 활성 Destructive 액션 |
Radius
테두리 모서리 반경(border-radius) 토큰입니다. Tailwind v4에서는 rounded-{name} 유틸리티로 사용합니다.
| 이름 | 값 | Tailwind 클래스 |
|---|---|---|
tiny | 4px | rounded-tiny |
sm | 6px | rounded-sm |
md | 8px | rounded-md |
lg | 10px | rounded-lg |
xl | 12px | rounded-xl |
xxl | 14px | rounded-xxl |
xxxl | 16px | rounded-xxxl |
Dimension
사이징의 기본 단위입니다. spacing 등 다른 토큰에서 참조됩니다.
| 이름 | 값 | 설명 |
|---|---|---|
xs | 4px | 최소 크기 |
sm | 6px | 작은 크기 |
md | 8px | 중간 크기 |
lg | 10px | 큰 크기 |
xl | 12px | 더 큰 크기 |
tiny | 4px | xs와 동일 |
xxl | 14px | 특대 크기 |
xxxl | 16px | 최대 크기 |
scale | 2px | 증분 단위 |
multi-value | 8px 64px | 다중 값 (예: padding) |