색

옥색 종이와 먹과 단청 청록에 주의의 황과 위험의 주홍을 더한 것이 전부입니다. 뜻 토큰은 화면의 밝기에 따라 값이 바뀌므로 두 값을 나란히 적습니다.

글자

제목과 이름은 명조(Noto Serif KR), 본문과 단추는 고딕(Pretendard), 토큰과 주소는 고정폭입니다. 명조와 고딕은 서버가 실어 보내서 어느 컴퓨터에서나 같은 모양입니다.

간격과 치수

간격은 4px 의 배수입니다. 조작부의 높이는 rem 으로 적어서 글자를 키우면 함께 커집니다.

모양

모서리는 4px, 대화상자와 그림은 8px 입니다. 면은 가는 선으로 가르고 그림자는 떠 있는 판에만 씁니다.

움직임

색이 바뀌는 데 120ms, 판이 열리는 데 200ms 입니다. 그보다 긴 움직임은 없습니다. 아래의 줄에 마우스를 올리면 점이 그 시간과 가속으로 움직입니다.

단추

눌렀을 때 일어나는 일을 적습니다. 한 화면에 으뜸 단추는 하나만 둡니다.

button(label, { kind, small })linkButton(label, href, { kind, small })cluster(…)

입력란

이름표를 칸 위에 두고 도움말과 오류는 칸 아래에 적습니다. 오류는 주홍 테와 왼쪽 줄과 글로 함께 알립니다.

input({ invalid })textarea()select(options)field(label, control, { hint, error })fields(…)form(props, …)

명부와 꼬리표

목록은 카드로 쪼개지 않고 가는 선으로 가릅니다. 왼쪽에 이름, 가운데에 설명, 오른쪽에 동작을 둡니다. 꼬리표는 상태를 한 낱말로 적습니다.

ledger(…rows)row({ name, sub, desc, acts })meta(…)said(text)badge(text, kind)

알림

왼쪽 줄의 색이 종류입니다. 청록은 안내, 황은 주의, 주홍은 오류입니다. 오류는 화면 낭독기가 바로 읽습니다.

note(kind, …)failed(what, error)dim(…)

한 번만 보이는 값

토큰처럼 다시 볼 수 없는 값과 초대 링크처럼 그대로 복사해서 보낼 값을 고정폭 상자에 넣습니다.

secret(value)

대화상자와 빈 화면

대화상자는 되돌릴 수 없는 일을 묻거나 짧은 입력 하나를 받을 때만 띄웁니다. 빈 화면에는 지금 상태 한 줄과 다음에 할 일 하나를 둡니다.

dialog(title, …)dialogActions(…)confirmed(title, text, yes)empty(title, text, action)

채팅

에이전트가 나눈 대화입니다. 에이전트가 한 말은 오른쪽 옥색 말풍선, 들은 말은 왼쪽 카드색 말풍선이고 누구의 말인지는 이름으로도 적습니다.

chat(label, …)message({ mine, who, at, text })aside(text)

견본 명세

이 쪽이 견본을 적는 방식입니다. 명부처럼 줄마다 왼쪽에 이름과 만드는 법, 가운데에 견본, 오른쪽에 쓰임새를 둡니다.

specs(…rows)spec({ name, code, note, wide }, …sample)

쪽의 틀

틀은 셋입니다. 이 쪽은 곁메뉴가 있는 틀로 그려져 있습니다. 곁메뉴는 본문을 내려도 머리말 아래에 붙어 따라오고 좁은 화면에서는 본문 위에 눕습니다.

frame(path, title, head, main)subpage(path, page, head)stack(gap, …)accountName(name, hint)

첫 화면

서비스를 한 줄로 소개하고 데스크톱 앱을 내려받게 합니다. 옥색 띠, 띠의 아래 끝에 걸친 월드 화면, 내려받기 명부, 차례가 있는 순서로 짭니다. 아래는 설치 파일이 하나도 없을 때의 모습입니다.

landingMain(installers).hero.shot.steps