CI · BI Guide

마크는 제품 화면의
축약입니다

노드 넷과 선 셋으로 된 가장 작은 신경망 — 장식이 아니라 신경망 연관 뷰를 그대로 줄인 것입니다.

심볼의 뜻

허브 노드

가운데, 가장 큰 원. 많은 것이 모여드는 핵심 문서입니다.

차분한 연결 둘

위와 왼쪽 아래. 한동안 조용히 이어져 있는 문서입니다.

활성 연결 하나

오른쪽 아래, 선도 더 굵습니다. 지금 다시 오가는 연결입니다. 셋 중 하나만 굵은 것은 관계에 경중이 있다는 뜻입니다.

이 구분이 곧 규칙입니다

「허브 하나 · 차분한 연결 둘 · 활성 연결 하나」의 세 상태는 심볼을 어떻게 쓰든 유지합니다. 네 원을 한 색으로 칠하지 않습니다(단색 인쇄용은 크기로만 위계를 나타냅니다).

인디고가 주인공, 스카이는 「지금 활성」에만

Indigo#4F46E5허브 노드 · 누르는 것

Indigo Light#818CF8차분한 연결

Electric Blue#0EA5E9활성 연결 — 한 곳에만

Slate#64748B워드마크 보조 단어

홈페이지 바탕 #FFFDFB 면 분리 #F4F2EF 제목 · 어두운 면 #1F2333 본문 #57534E

전용 서체를 두지 않습니다 · Pretendard, 없으면 시스템 산세리프

Display연결된 생각, 흐르는 업무.

Heading무엇을 할 수 있나

Body쓰는 사람이 읽는 글로 썼습니다. 화면 하나하나를 어떻게 쓰는지 적어 두었습니다.

WordmarkSynapseWorks — Synapse는 굵게, Works는 보통. 한 줄로만.

전부 벡터(SVG) — 얼마나 키워도 깨지지 않습니다

가로 로고 · 밝은 바탕영문 국문

가로 로고 · 어두운 바탕SVG

여백과 최소 크기

심볼 둘레에 심볼 높이의 1/4만큼은 비워 둡니다. 심볼 단독은 24px보다 작게 줄이지 않고(그보다 작으면 파비콘용 파일을 씁니다), 글자가 붙은 로고는 가로 120px보다 작게 줄이지 않습니다.

늘이거나 돌리지 않는다

가로세로 비율을 바꾸거나 기울이면 노드의 자리가 뜻을 잃습니다.

색 구분을 없애지 않는다

스카이 연결 하나가 「지금 활성」을 뜻합니다. 네 원을 한 색으로 칠하지 않습니다.

효과를 더하지 않는다

그림자 · 외곽선 · 그라디언트를 얹지 않고, 다른 아이콘과 합치지 않습니다.

두 줄로 쌓지 않는다

Synapse와 Works는 늘 한 줄입니다. 좁으면 심볼만 씁니다.