시각 위계
면, 높이, 선, 점을 구조에서 세부 순서로 정합니다.
원칙
- 구조는 면으로 먼저 만드세요. 선이나 그림자보다 톤과 간격이 먼저 화면을 나눕니다.
- 작업 위에 겹치는 것만 띄우세요. 높이는 "지금 잠시 위에 있다"는 뜻이므로 카드와 차트는 평평하게 둡니다.
- 면으로 나눌 수 없는 곳에만 선을 그으세요. 선은 컨트롤의 경계나 같은 톤이 만나는 곳을 표시합니다.
- 점은 내용에만 쓰세요. 굵은 라벨, 아이콘, 색 글자는 면이나 제목, 간격을 대신하지 못합니다.
- 카드 안에 카드를 두지 마세요. 면 안의 내용은 간격과 제목으로 나누세요.
위계 순서
화면은 무거운 것부터 네 가지 수단으로 만듭니다. 면은 화면 전체를, 점은 단어 하나를 바꿉니다. 앞의 수단으로 안 될 때만 다음 수단을 쓰세요.
1면
톤으로 화면을 영역으로 나눕니다.
2높이
잠시 작업 위에 놓이는 것을 띄웁니다.
3선
컨트롤의 경계나 같은 톤이 만나는 곳을 표시합니다.
- Aa
4점
글자, 아이콘, 배지로 내용을 싣습니다.
--surf-ink--surf-ink-muted--surf-brand-ink--surf-size-icon-default
단계별 쌓기
실제 컴포넌트로 만든 작업 화면입니다. 단계마다 수단을 하나씩, 이 미리보기 안에서만 토큰으로 켭니다.
배포
정상- 오늘 실행
- 128
- +12%
- 어제 대비
- 실패율
- 2.3%
- -0.8%
- 어제 대비
- 중간 소요 시간
- 4분 12초
- -6%
- 어제 대비
4단계 중 4단계, 점: 글자, 아이콘, 배지가 내용을 싣습니다.
면
- 깊이에 따라 역할을 쓰세요. 틀은
--surf-chrome, 시트는--surf-canvas, 보조 영역은--surf-surface, 현재 항목은--surf-selected입니다. - 이웃한 역할은 1.05:1 이상 차이 나서 선 없이도 영역으로 읽힙니다.
- 시트 안의 보조 면은 한 단계만 두세요.
- 그 안에서 트랙, 읽기 전용 값, 탭 목록은
--surf-recessed를 씁니다. 보조 면 위에서는 캔버스로 바뀌어 계속 보입니다. - 안에 놓는 면은 네 변의 여백을 같게 두고, 반경을 max(0, 바깥 반경 − 여백)로 맞추세요.
- 화면을 흐리게 보며 확인하세요. 영역은 톤과 간격만으로 읽혀야 합니다.
- 강제 색상 모드는 모든 면을 Canvas로 평평하게 만듭니다. 그래서 카드, 보조 면, 툴바, 메뉴 막대는 그곳에서 1px
CanvasText테두리를 그립니다.
높이
- 떠 있는 UI는
--surf-shadow-float와--surf-layer-*토큰을 함께 씁니다. 레이어 없는 그림자는 무엇이 위인지 잘못 알립니다. - 머무는 그림자는 시트와 틀 사이의 가는
--surf-shadow-sheet하나뿐입니다. - 메뉴, 팝오버, 셀렉트, 토스트는 페이지와 같은 톤 위에 뜨므로 불투명한
--surf-menu-background와 1px--surf-menu-border를 유지합니다. 그림자는 다크 테마에서 흐려지고 강제 색상 모드에서 사라집니다. - 대화상자, 시트, 드로어는 배경막이 이미 떼어 놓으므로 선을 두지 않습니다. 강제 색상 모드에서는 가장자리를 선으로 그립니다.
선
--surf-control-border는 입력, 선택, 체크박스, 외곽선 버튼, 토글, 아이콘 버튼의 경계입니다. 의미를 싣는 유일한 선이라 면과 3:1 이상 대비됩니다(WCAG 1.4.11).--surf-line은 장식입니다. 섹션 구분선과, 고정 크롬이 같은 톤의 스크롤 콘텐츠와 만나는 가장자리에 씁니다.- 톤이나 간격으로 나뉜 곳을 상자로 두르지 마세요. 표의 행은 간격으로 나누고, 호버와 선택은 면으로 채웁니다. 열이 많은 넓은 표만
lined나grid변형을 씁니다. - 한쪽 강조 테두리로 상태를 표시하지 마세요. 라벨과 아이콘을 쓰세요.
점
- 점의 서열은 장식이 아니라 타입 역할과 잉크로 정하세요.
--surf-ink,--surf-ink-body,--surf-ink-muted순입니다. - 배지와 상태 점처럼 채도가 높은 작은 점은 상태, 현재 위치, 주요 작업에만 쓰세요.