Color
색상은 정보 전달과 시각적 경험을 결정하는 중요한 요소입니다. 색상은 사용자의 주의를 유도하고, 기능이나 메시지를 명확히 하여 직관적인 사용자 경험을 제공합니다.
색상 체계는 기관 이미지와 일관된 시각적 경험을 유지하기 위해 체계적으로 구성되며, 정보의 계층과 우선순위를 시각적으로 구분하는 역할을 합니다.
토큰 체계 (Token Structure)
컬러 토큰은 Raw Value → Global Token → Semantic Token의 단계 구조로 구성됩니다. Raw Value는 실제 색상 값을 정의하며, Global Token은 이를 기반으로
팔레트 단위의 색상 체계를 관리합니다. Semantic Token은 UI에서의 역할과 의미에 따라 Global Token을 매핑하여 실제 인터페이스에서 일관되게 사용되도록 합니다.
Raw Value
HEX CODE #1F8CE8
색상의 실제 값(HEX, RGB 등)으로,
시스템에 등록된 기본적인 색상 데이터입니다.
Global Token
skyBlue50
Raw Value를 기반으로 정의된 팔레트 단위의 토큰으로, 색상을 체계적으로 관리하기 위한 기준 역할을 합니다.
Sementlc Token
bg/default/brand/skyBlue50
역할에 따라 Global Token을 매핑한 토큰으로,
실제 인터페이스에서 사용됩니다.
팔레트 토큰 (Global Token)
팔레트 기반의 기본 컬러 값을 정의하는 토큰으로, 디자인 시스템의 색상 기준이 됩니다.
Color Palette
Gray100 ~5
Cool Gray 100 ~ 10
Blue Gray 100 ~10
Purple 100 ~ 10
Violet 100 ~ 10
Blue 100 ~ 10
Sky Blue 100 ~ 10
Light Blue 100 ~ 10
Cyan 100 ~ 10
Green 100 ~ 10
Olive 100 ~ 10
Red 100 ~ 10
Orange 100 ~ 10
Yelllow 100 ~ 10
역할별 토큰 (Sementic Token)
색상의 역할과 의미에 따라 Global Token을 매핑하여 실제 UI에 사용되는 토큰입니다.
Property
Icon
Text
BG (Background)
Stroke
State
Default
Disabled
State 2
Active
Inactive
Role
Brand
Neutral
Positive
Warning
Informative
Utility
Palette color name
Gray100 ~5
Cool Gray 100 ~ 10
Blue Gray 100 ~10
Purple 100 ~ 10
Violet 100 ~ 10
...
Semantic Token
Storke
Property
State
Role
Palette color
Global Token
Stroke
Default
Brand
skyBlue50
color/skyBlue/50
Stroke
Default
Brand
lightBlue70
color/lightBlue/70
Stroke
Default
Neutral
gray70
color/gray/70
Stroke
Default
Neutral
gray90
color/gray/90
Property
State
Role
Palette color
Global Token
Stroke
Default
Neutral
gray95
color/gray/95
Stroke
Default
Neutral
gray100
color/gray/100
Stroke
Default
Neutral
coolGray70
color/coolGray/70
BG (Backgroung)
Property
State
Role
Component
level
Name
Hex Code
BG
Default
Utility
Calendar
Accent
red
#F5D9D9
BG
Default
Utility
Calendar
Accent
orange
#F9DDC0
BG
Default
Utility
Calendar
Accent
yellow
#FCE9BC
BG
Default
Utility
Calendar
Accent
olive
#E7EAC4
BG
Default
Utility
Calendar
Accent
green
#CEE3D1
BG
Default
Utility
Calendar
Accent
cyan
#D0ECF0
BG
Default
Utility
Calendar
Accent
lightBlue
#D3E2EE
BG
Default
Utility
Calendar
Accent
deepBlue
#C9D5E6
BG
Default
Utility
Calendar
Accent
purple
#CDCAE6
BG
Default
Utility
Calendar
Accent
violet
#E6D0ED
BG
Default
Utility
Calendar
Accent
wine
#E4D1D8
BG
Default
Utility
Calendar
Accent
gray
#E1E1E1
Property
State
Role
Component
level
Name
Hex Code
BG
Default
Utility
Calendar
Soft
red
#D75757
BG
Default
Utility
Calendar
Soft
orange
#EE9033
BG
Default
Utility
Calendar
Soft
yellow
#F8B825
BG
Default
Utility
Calendar
Soft
olive
#B3BC40
BG
Default
Utility
Calendar
Soft
green
#61A469
BG
Default
Utility
Calendar
Soft
cyan
#66C1D0
BG
Default
Utility
Calendar
Soft
lightBlue
#70A3CA
BG
Default
Utility
Calendar
Soft
deepBlue
#5178AF
BG
Default
Utility
Calendar
Soft
purple
#5E53AF
BG
Default
Utility
Calendar
Soft
violet
#AF68C4
BG
Default
Utility
Calendar
Soft
wine
#A86A82
BG
Default
Utility
Calendar
Soft
gray
#9D9D9D
Property
State
Role
Component
Palette color
Global Token
BG
Default
Utility
Alert Banner
red100
color/red/100
BG
Default
Utility
Alert Banner
gray100
color/gray/100
BG
Default
Utility
Alert Banner
yellow95
color/yellow/95
BG
Default
Utility
Slide
gray40
color/gray/40
BG
Default
Utility
Slide
gray70
color/gray/70
BG
Default
Utility
Slide
orange50
color/orange/50
BG
Default
Utility
Slide
yellow50
color/yellow/50
BG
Default
Utility
Slide
green50
color/green/50
Property
State
Role
Palette color
Global Token
BG
Default
Brand
skyBlue50
color/skyBlue/50
BG
Default
Brand
skyBlue30-90%
color/skyBlue/30-90%
BG
Default
Brand
skyBlue80
color/skyBlue/80
BG
Default
Brand
lightBlue80
color/lightBlue/80
BG
Default
Brand
lightBlue100
color/lightBlue/100
BG
Default
Neutral
blueGray40
color/blueGray/40
BG
Default
Neutral
coolGray95
color/coolGray/95
BG
Default
Neutral
gray100
color/gray/100
BG
Default
Neutral
white
color/base/white
BG
Default
Neutral
white-90%
color/base/overlay1
BG
Disabled
Brand
skyBlue90
color/skyBlue/90
BG
Disabled
Neutral
blueGray80
color/blueGray/80
BG
Active
Brand
skyBlue40
color/skyBlue/40
BG
Active
Brand
skyBlue50
color/skyBlue/50
BG
Active
Brand
lightBlue80
color/lightBlue/80
BG
Active
Brand
skyBlue100
color/skyBlue/100
BG
Active
Brand
skyBlue100-50%
color/skyBlue/100-50%
BG
Active
Neutral
white
color/base/white
BG
Inactive
Brand
lightBlue50
color/lightBlue/50
BG
Inactive
Neutral
coolGray100
color/coolGray/100
Icon
Property
State
Role
Palette color
Global Token
Icon
Active
Neutral
gray20
color/gray/20
Icon
Active
Neutral
gray40
color/gray/40
Icon
Active
Brand
skyBlue40
color/skyBlue/40
Icon
Active
Brand
skyBlue50
color/skyBlue/50
Icon
Active
Utility
yellow50
color/yellow/50
Icon
Default
Neutral
gray20
color/gray/20
Icon
Default
Neutral
gray40
color/gray/40
Icon
Default
Neutral
gray50
color/gray/50
Icon
Default
Neutral
gray70
color/gray/70
Icon
Default
Neutral
white
color/base/white
Icon
Default
Brand
skyBlue40
color/skyBlue/40
Icon
Default
Brand
skyBlue50
color/skyBlue/50
Icon
Default
Brand
skyBlue70
color/skyBlue/70
Icon
Default
Warning
red50
color/red/50
Icon
Default
Informative
orange40
color/orange/40
Icon
Disabled
Neutral
coolGray70
color/coolGray/70
Icon
Disabled
Neutral
coolGray80
color/coolGray/80
Property
State
Role
Palette color
Hex Code & Global Token
Icon
Default
Utility
gray
D9DEE2
Icon
Default
Utility
blueGray
6780A0
Icon
Default
Utility
blue
3979DD
Icon
Default
Utility
skyBlue
4FA5ED
Icon
Default
Utility
green
17AA59
Icon
Default
Utility
olive
87BF45
Icon
Default
Utility
purple
9D6CE2
Icon
Default
Utility
red
D3533D
Icon
Default
Utility
orange
ED7F35
Icon
Default
Utility
yellow
FDAD01
Icon
Default
Utility
yellow2
EFBC4B
Icon
Default
Inactive
gray20
color/gray20
Icon
Default
Inactive
gray50
color/gray50
Icon
Default
Inactive
coolGray80
color/coolGray80
Icon
Default
Inactive
gray70
color/gray/70
Text
Disabled
Inactive
coolGray95
color/coolGray95
Text
Property
State
Role
Palette color
Global Token
Text
Default
Neutral
gray5
color/gray/5
Text
Default
Neutral
gray20
color/gray/20
Text
Default
Neutral
gray30
color/gray/30
Text
Default
Neutral
gray40
color/gray/40
Text
Default
Neutral
gray50
color/gray/50
Text
Default
Neutral
gray70
color/gray/70
Text
Default
Neutral
white
color/base/white
Text
Active
Brand
blue40
color/blue/40
Text
Active
Brand
skyBlue50
color/skyBlue/50
Text
Disabled
Neutral
gray50
color/gray/50
Text
Disabled
Neutral
coolGray80
color/coolGray/80
Text
Disabled
Neutral
coolGray95
color/coolGray/95
Property
State
Role
Palette color
Global Token
Text
Inactive
Neutral
gray20
color/gray/20
Text
Inactive
Neutral
gray30
color/gray/30
Text
Inactive
Neutral
gray40
color/gray/40
Text
Inactive
Neutral
gray50
color/gray/50
Text
Inactive
Neutral
gray70
color/gray/70
Text
Default
Brand
blue50
color/blue/50
Text
Default
Brand
skyBlue40
color/skyBlue/40
Text
Default
Positive
skyBlue40
color/skyBlue/40
Text
Default
Positive
skyBlue50
color/skyBlue/50
Text
Default
Warning
red50
color/red/50
Text
Default
Informative
orange50
color/orange/50