Elevation
Polaris Office의 깊이감은 그림자보다 배경색 레이어링과 보더로 먼저 표현해요. 그림자는 떠 있는 요소(드롭다운·모달·토스트)에만 사용해 인터페이스를 가볍고 스캔하기 쉽게 유지해요.
원칙
Polaris Office의 깊이감은 background-color 레이어링·보더·그림자의 조합으로 표현해요. 정적 콘텐츠는 배경색과 보더로 영역을 잡고, 카드부터는 그림자를 더해 위계를 명확히 해요. 떠 있는 요소(드롭다운·모달·토스트)일수록 그림자가 강해지며, Dark mode에서는 alpha를 강화해 동일한 위계를 유지해요.
Elevation Levels
| Level | 신호 | 사용처 |
|---|---|---|
| Flat | 그림자 없음 | 인라인 카드, 페이지 섹션, 리스트 아이템 |
| Surface | Border 1px | 인풋, 코드 블록, 비활성카드, 정보박스 |
| Raised | shadow-sm | 카드, 위젯 |
| Floating | shadow-md | 드롭다운, 툴팁 |
| Overlay | shadow-lg | 모달, 바텀 시트 |
| Top | shadow-xl | 토스트 |
Shadow tokens
| Token | Light | Dark | 사용 예시 |
|---|---|---|---|
| shadow-sm | 0 1px 8px rgba(0,0,0,0.04) | 0 1px 8px rgba(0,0,0,0.08) | 위젯 |
| shadow-md | 0 2px 12px rgba(0,0,0,0.06) | 0 2px 12px rgba(0,0,0,0.12) | 드롭다운, 툴팁 |
| shadow-lg | 0 4px 16px rgba(0,0,0,0.08) | 0 4px 16px rgba(0,0,0,0.16) | 모달, 바텀 시트 |
| shadow-xl | 0 6px 24px rgba(0,0,0,0.12) | 0 6px 24px rgba(0,0,0,0.24) | 토스트 |
Shadow Preview
shadow-sm
shadow-md
shadow-lg
shadow-xl
Z-Index Scale
| Token | 값 | 사용 예시 |
|---|---|---|
| z-base | 0 | 일반 콘텐츠 |
| z-sticky | 100 | 스티키 헤더, 고정 탭 |
| z-dropdown | 200 | 드롭다운, 툴팁, 팝오버 |
| z-dim | 300 | Dim 오버레이 |
| z-modal | 400 | 모달, 팝업, 바텀 시트 |
| z-toast | 500 | 토스트 알림 |