Colors

컬러는 브랜드를 대표하고 다양한 제품들을 하나로 묶어주는 중요한 역할을 합니다.

컬러 사용에는 제한이 필요합니다. 너무 많을 경우 브랜드 아이덴티티가 약해지기 때문입니다. 하지만 너무 적은 단계 수의 컬러로 유연하게 디자인하기는 어렵습니다. 그래서 제한 안에서 자유롭게 디자인할 수 있도록 컬러 별로, 밝기 순으로 총 11단계를 지원합니다.

유의사항

  • 커뮤니케이션 시, 헥스 코드보다는 컬러 변수명을 사용합니다.
  • 같은 페이지 내 텍스트 요소에 가능한 Slate gray와 Gray 계열을 섞어 사용하지 않습니다.
  • 정의되지 않은 새로운 컬러를 사용하게 될 경우, 바로 컬러 칩에 추가하지 않고 두 곳 이상에서 사용될 경우 컬러 칩에 추가합니다.
  • PAPER 작업 시, 가독성을 높이기 위해 주로 Black을 사용합니다.
  • 비슷한 성격의 제품은 다른 플랫폼이라도 되도록 같은 컬러를 사용하여 통일되어 보이도록 합니다.

주요 컬러

브랜드를 대표하는 컬러로, 포인트 컬러로 주로 사용합니다.

Dodger Blue

앱 아이콘, 서점 GNB 등 브랜드를 대표할 수 있는 영역에 주로 dodgerblue-50을 사용합니다.

dodgerblue_5 #ebf6ff
dodgerblue_10 #cce8ff
dodgerblue_20 #99d1ff
dodgerblue_30 #66baff
dodgerblue_40 #339cf2
dodgerblue_50 #1f8ce6
dodgerblue_60 #0077d9
dodgerblue_70 #0062b3
dodgerblue_80 #005499
dodgerblue_90 #004680
dodgerblue_100 #003866

Slate Gray

텍스트 컬러로 주로 사용합니다.

slategray_5 #f2f4f5
slategray_10 #e6e8eb
slategray_20 #d1d5d9
slategray_30 #b8bfc4
slategray_40 #9ea7ad
slategray_50 #808991
slategray_60 #636c73
slategray_70 #525a61
slategray_80 #40474d
slategray_90 #303538
slategray_100 #212529

Blue Gray

Slate Gray와 구분이 필요한 경우 보조 컬러로 사용합니다.

bluegray_5 #f2f6fc
bluegray_10 #d6deeb
bluegray_20 #94a2b8
bluegray_30 #738096
bluegray_40 #59667a
bluegray_50 #475161
bluegray_60 #384252
bluegray_70 #2e3847
bluegray_80 #212b3b
bluegray_90 #17202e
bluegray_100 #0f1724

보조 컬러

배경색으로 사용하거나 성공, 경고 등 사용자에게 시각적인 피드백을 제공할 때 사용합니다.

Light Steel Blue

흰 배경과 구분이 필요할 때, 배경 컬러로 사용합니다.

lightsteelblue_5 #f7fafc
lightsteelblue_10 #f0f5fa
lightsteelblue_20 #e3edf7
lightsteelblue_30 #d6e3f0
lightsteelblue_40 #ccd9e6
lightsteelblue_50 #c4d1de
lightsteelblue_60 #b3c2d1
lightsteelblue_70 #9eafbf
lightsteelblue_80 #8c9dad
lightsteelblue_90 #7d8e9e
lightsteelblue_100 #70808f

Scuba Blue

  • 현재는 서점 내에서 셀렉트 표기 시 scubablue-50, 70을 사용하고 있습니다.
  • 앞으로 셀렉트를 대표하는 컬러로 자리매김할 예정입니다.
scubablue_5 #e9f8fa
scubablue_10 #c1ebf2
scubablue_20 #99dee9
scubablue_30 #72d2e0
scubablue_40 #4ac5d8
scubablue_50 #22b8cf
scubablue_60 #16a8be
scubablue_70 #0d96ab
scubablue_80 #058295
scubablue_90 #006d7e
scubablue_100 #005664

Gray

PAPER에서 주로 사용합니다.

gray_5 #f2f2f2
gray_10 #e6e6e6
gray_20 #cccccc
gray_30 #b3b3b3
gray_40 #999999
gray_50 #808080
gray_60 #666666
gray_70 #4d4d4d
gray_80 #333333
gray_90 #1a1a1a
gray_100 #000000

Red

오류, 경고, 주의, 실패와 같은 부정적인 메시지에 사용합니다.

red_5 #fce8e6
red_10 #fabab3
red_20 #f5948a
red_30 #ed6d5e
red_40 #eb5847
red_50 #e64937
red_60 #d93826
red_70 #c93221
red_80 #ba2c1c
red_90 #ab2617
red_100 #942114

Orange

보조 포인트 컬러와 별점에 사용합니다.

orange_5 #ffeee6
orange_10 #ffccb3
orange_20 #ffaa80
orange_30 #ff884d
orange_40 #fa722e
orange_50 #fa5300
orange_60 #e64d00
orange_70 #cc4400
orange_80 #b33b00
orange_90 #993300
orange_100 #802b00

Green

확인, 성공과 같은 긍정적인 메세지에 사용합니다.

green_5 #f1faeb
green_10 #ddf2cc
green_20 #b2e08f
green_30 #7bcf3b
green_40 #5abf0d
green_50 #4fb303
green_60 #469e03
green_70 #409103
green_80 #398003
green_90 #2c6600
green_100 #214d00

Brown

안내 메시지에 사용합니다.

brown_5 #fff9f0
brown_10 #f5e8d4
brown_20 #e6cfad
brown_30 #d1aa70
brown_40 #c29757
brown_50 #b0874a
brown_60 #a37a3d
brown_70 #8f6930
brown_80 #805b24
brown_90 #6b4a1a
brown_100 #5c3f14