일러스트의 색은 Illustration Color에 지정되어있는 색상만 사용합니다. 그 외의 브랜드 색상이나 인쇄용 색상은 사용하지 않습니다. UI에 들어가는 일러스트에 유채색을 사용할 때는 연한 파란색을 중심으로 쓰다가 아주 가끔 보조색으로 진한 파란색을 쓰도록 합니다.
블로그 등 마케팅을 위해 지정된 파란색 이외의 색상군을 사용해야할 때는 Open Color의 색상을 사용해도 괜찮습니다. Open Color의 2, 3 색상을 illustration blue 0, illustration blue 1 색상을 사용하는 방식과 동일하게 사용합니다. 연한 유채색인 2를 중심으로 쓰되, 가끔 보조색인 3번 색상으로 진하게 강조합니다.
통일성을 위해 한 개의 일러스트에는 한 개의 색상군을 사용합니다. 두 개 이상의 색상군은 한 개의 일러스트에 사용하지 않습니다.
일러스트의 선은 회색조가 아닌 Illustration Line 색상을 사용합니다.
선 두께는 일러스트의 크기에 상관없이 모두 2px로 통일합니다. 선 모서리의 곡률은 비교적 자유롭게 쓸 수 있습니다. Stroke align이 중앙 정렬일 때 1~3px 사이로 메타포의 성격과 크기에 맞춰서 조정합니다.
그 외 세세한 일러스트 스타일 가이드입니다. 어떤 일러스트를 그리더라도 같은 느낌을 줄 수 있도록 합니다.
사용처에 따라 가로세로 20px, 24px, 36px, 48px 의 아이콘을 사용합니다.
아이콘의 선은 코너(Corner)와 선끝(Caps)을 Round로 지정합니다. 기본적으로 선 두께는 2px, 가로세로가 48px인 경우에만 3px로 지정합니다.
20px | 24px | 36px | 48px | |
---|---|---|---|---|
Stroke width | 2px | 2px | 2px | 3px |
Corner radius | 0.5px | 1px | 1px | 1px |
Stroke align | Center | |||
Line caps | Round | |||
Line Corner | Round |
그 외 아이콘의 스타일입니다.