Colors

  • HR 서비스의 아이덴티티를 나타내는 Primary 색상은 화면과 구성 요소에서 가장 중심이 되는 색상입니다.
  • Gray Scale은 무채색 색상으로 Black부터 White까지 이루어지며 색상이 적용되는 UI 특정 부분에 따라 구분하여 사용합니다.

Primary & Gray Scale

Primary #151515
Black #000000
Gray280 #333333
Gray260 #666666
Gray240 #707070
Gray220 #808080
Gray200 #9A9A9A
Gray180 #BCBCBC
Gray160 #CCCCCC
Gray140 #D4D4D4
Gray120 #DBDBDB
Gray100 #E1E1E1
Gray80 #E9E9E9
Gray60 #F1F1F1
Gray40 #F6F6F6
Gray20 #F8F8F8
White #FFFFFF

Secondary & Blue Gray Scale

  • Secondary 컬러는 부분적으로 강조가 필요할 경우 사용되며, 디자인적 요소를 구별할 수 있는 더 많은 방법을 제공합니다.
  • Blue Gray 컬러는 배경 색으로 사용되거나 부분적으로 강약을 표현하기 위해 사용합니다.
Secondary #476C97
Blue Gray300 #99A8B5
Blue Gray200 #EEF2F5
Blue Gray100 #F2F5F6

Point

  • Point 컬러는 시스템의 상태, 그래픽적 요소에 사용됩니다.
  • 강조가 필요할 경우 전체 레이아웃을 해치지 않는 범위 내에서 사용 가능합니다.
Point 1 #D40000
Point 2 #F9B037
Point 3 #00D5A2
Point 4 #359DFF
Point 5 #9E5FFF
Point 6 #ef0000
Point 7 #F9B037

Opacity

  • 일관된 표현을 위해 Opacity가 있는 컬러 사용을 지양합니다.
  • 예외적으로 불투명도가 있는 컬러값이 필요할 경우 Black, White 컬러 안에서 5% 단위로 Opacity를 사용할 수 있습니다.
Black Opacity 5%
Black Opacity 10%
Black Opacity 15%
Black Opacity 20%
Black Opacity 25%
Black Opacity 30%
Black Opacity 35%
Black Opacity 40%
Black Opacity 45%
Black Opacity 50%
Black Opacity 60%
Black Opacity 70%
Black Opacity 80%
Black Opacity 90%
White Opacity 10%
White Opacity 15%
White Opacity 20%
White Opacity 25%
White Opacity 30%
White Opacity 35%
White Opacity 40%
White Opacity 45%
White Opacity 50%
White Opacity 55%
White Opacity 60%
White Opacity 70%
White Opacity 80%
White Opacity 90%