높이
높이는 표면이 배경이나 다른 요소보다 얼마나 위에 있는지 표현하는 시각적 깊이입니다. Compass는 그림자, 테두리, 표면색과 오버레이를 함께 사용합니다.
높이의 정의
높이는 실제 거리를 재는 px 값이 아니라, 요소 사이의 관계를 보여주는 표현입니다. 기본 콘텐츠는 평평하게 두고 메뉴나 시트처럼 떠 있는 표면을 구분합니다.
그림자 스케일
같은 크기와 표면색에서 그림자만 비교합니다. 기본 표면은 그림자를 사용하지 않고, 떠 있는 표면에 필요한 만큼만 적용합니다.
평면
낮음
중간
높음
컴포넌트 적용
모든 카드나 버튼에 그림자를 추가하지 않습니다.
카드
테두리와 표면색으로 구분
선택된 탭
배경 위에서 선택된 표면을 구분
테마·언어 메뉴 / Dropdown
기존 콘텐츠 위에 선택 목록 표시
바텀 시트
콘텐츠 위에 보조 작업 영역 표시
Dialog / Alert Dialog
그림자 대신 테두리와 배경 오버레이로 구분
겹침 순서
기본 콘텐츠
페이지의 기본 흐름
Docs 사이드바
화면 양쪽에 고정된 탐색 영역
갤러리 필터
스크롤 중 유지되는 필터
헤더
필터와 사이드바 위의 공통 탐색
메뉴·다이얼로그·시트
페이지 위에 표시되는 팝업 영역
테마와 상태
테두리와 표면색도 함께 유지해 어두운 배경에서 깊이를 구분합니다.
버튼의 선택·호버 상태를 표현하기 위해 그림자 강도를 임의로 높이지 않습니다.