Color

Written By Heesun .

HOW TO USE COLORS

  • 특정 칼라의 톤 변화별로 직관적인 이름을 새긴 Primative, 각 칼라별로 사용 범위를 정의한 Semantic을 동시에 구성하여 사용 맥락에 맞게 유연한 대응이 가능하도록 구성하였습니다.

  • 브랜드 아이덴티티에 맞게 BI color 및 Primary color를 변경해 각 프로젝트별 컨셉에 빠르게 대응할 수 있습니다.

  • Dark/Light mode를 활용해 다양한 톤 변화의 디자인을 시도하며 GUI의 실험 범위를 다채롭게 확장시킬 수 있으며, iOS의 화면 밝기 모드에도 빠르게 대응할 수 있습니다.

Primative

 

Brand Identity

서비스의 브랜드 컬러를 대표하는 메인 컬러를 지칭합니다.
포인트 및 액션 컴포넌트 색상으로 사용하여 서비스의 전체 Look & Feel을 주도합니다.

Brand Identity

무채색 색상으로 Black에서부터 White까지 이루어지며 색상이 적용되는 UI의 특정 부분에 따라 구분하여 사용하는 컬러입니다.

Sementic

Elements

Text, Background, Border, Shadow 등 컴포넌트를 구성하는 기본 구성 요소들의 색상을 지정했습니다.

Interactive

다양한 타입의 버튼 뿐만 아니라, 디자인 시스템 외 임시 컴포넌트를 디자인할 때 인터렉션 효과로 빠르게 적용시킬 수 있는 색상 범위를 지정하였습니다.

Notification

UI요소들의 상황 별 의미를 전달하는 색상으로 사용자가 상태를 식별하고, 다음 행동 단계를 이해하는 데 도움이 되는 컬러입니다.

Heesun .
Previous

Button / Basic
Next

Grid System