툴도 더
통일된 제품답게

색면에는 밝은 글자를 얹지 않습니다. 12스톱은 전부 명도가 높아 어느 색이든 글자는 먹입니다. 그래서 컴포넌트가 설계해야 할 상태는 열둘이 아니라 둘입니다.

브랜드 오렌지는 면이 아닙니다. #FF6B1A는 로고와 CTA의 색입니다. 이걸로 패널을 칠하면 그 화면이 도구 하나처럼 보입니다.

색환은 카테고리가 아니라 색상환을 돕니다. 빨강 → 분홍 → 보라 → 파랑 → 청록 → 초록 → 올리브 → 노랑 → 모래 → 밀크 순이라 인덱스에서 이웃한 두 밴드는 반드시 분리됩니다. 칼센틱 오렌지는 색환 밖에 있고 어떤 도구에도 배정되지 않습니다 — 로고와 페이지당 하나의 CTA로 남습니다.

한글은 대문자도, 모노도 쓰지 않습니다. 영문은 Archivo 대문자와 자간 벌린 모노 라벨에 기대는데 둘 다 번역되면 살아남지 못합니다. 한글 레이어는 Pretendard로 바꾸고 uppercase를 끄고 디스플레이 크기를 한 단계 낮춥니다. EN과 KR은 레이아웃을 공유하지 타이포를 공유하지 않습니다.

도구마다 자기 몸통을 가집니다. 형태를 공유하지 않습니다. 같은 모양은 색이 달라도 언뜻 같은 도구로 읽히기 때문입니다. 새 도구에는 새 몸통을 같은 규칙으로 그립니다 — 단색 면 하나, 뚫린 얼굴, 그 외에는 없습니다.

캐릭터는 그리고, 시스템 아이콘은 가져옵니다. 마크는 브랜드 자산이라 직접 만듭니다. 기능을 가리킬 뿐인 것 — 검색·닫기·내려받기·전체화면·도식 아이콘 — 은 MingCute(Apache 2.0)에서, 소셜 마크는 Simple Icons(CC0)에서 가져옵니다. fill 계열만 쓰며 line 계열은 단색 면 규칙에 어긋납니다.

여기 시연은 실물입니다. 규칙을 빌드 때 tool.css 에서 뽑아 시연 패널 안으로만 좁혔습니다. 손으로 베낀 사본이 없으니 사이트와 어긋날 수가 없습니다.

막대에는 팔레트 색을 쓰지 않습니다. 12스톱은 '도구 하나에 색 하나'라는 규칙에 묶여 있습니다. 스톱으로 칠한 막대는 다른 도구를 가리키게 됩니다. 여기 네 형태는 전부 currentColor의 농도로만 계열을 나눠, 막대가 언제나 자기가 놓인 면에 속합니다.

강조는 언제나 하나입니다. 강조가 뜻하는 것은 최댓값이거나 지금 값, 둘 중 하나뿐입니다. 둘을 강조하면 강조가 아닙니다 — 두 막대가 다 중요하다면 그 차트는 질문 두 개에 답하고 있는 것이고, 차트를 둘로 나눠야 합니다.

두 면이 동시에 반투명해지는 일은 없습니다. 페이드가 겹치면 그 아래 지면이 드러나고, 그것이 두 색 사이의 번쩍임으로 보입니다. 면은 완전히 칠해지거나, 자기 색을 다음 면에 건넵니다.

어떤 연출도 250밀리초를 넘지 않습니다. 들어가고 나오며 끝에서 살짝 넘겼다 돌아옵니다. 시작이 분명하고 마무리에 탄력이 붙습니다. 작은 요소는 140 근처, 큰 면은 240 근처에 놓이고 상한은 움직이지 않습니다.