Foundations
Elevation
Tiro의 깊이 시스템. Flat-first, 그림자는 최소한으로.
Tiro의 깊이 시스템은 의도적으로 평면적(flat) 입니다. 그림자 대신 배경색 변경과 얇은 보더로 깊이를 표현합니다.
Levels
| Token | Value | Description |
|---|---|---|
0 1px 2px var(--tds-color-alpha-black-8) (web) / 필요 시 플랫폼 기하로 근사 (mobile) | 작은 컨트롤 · 낮은 floating surface | |
0 2px 4px var(--tds-color-alpha-black-8), 0 1px 2px var(--tds-color-alpha-black-4) (web) / 필요 시 플랫폼 기하로 근사 (mobile) | popover · dropdown 등 일반 overlay | |
[object Object] (web) / [object Object] (mobile) | 떠 있는 것 전부. 플로팅 툴바 · 재생 컨트롤 · 검색 칩 · 진행 알림 · 팝오버 · 드롭다운 · 스티키 헤더 | |
[object Object] (web) / 미정. 모바일은 바텀시트라 기하가 다릅니다 (mobile) | 스크림을 동반하는 면. dialog · sheet · SearchModal |
shadcn 기본 그림자 값 그대로 사용. 커스텀 shadow 값 없음.
Principle
그림자를 쓰려 할 때, 먼저 배경색 변경이나 얇은 보더로 충분하지 않은지 확인하세요. 대부분의 경우 충분합니다. 그림자는 실제로 페이지 위에 떠 있는 요소에만 사용합니다.
Decorative Depth
- 섹션 교차 배경:
stone-50↔stone-100으로 리듬 생성 (그림자 없이) - 브랜드 다크 섹션:
brown-800+ white 텍스트 — 대비로 깊이 표현 - 스톡 포토그래피: 플랫 UI가 일부러 비워둔 시각적 깊이를 사진이 제공
Do / Don't
- Do: Flat +
1pxwhisper border를 기본으로 사용 - Do: 실제로 떠 있는 요소 (dropdown, modal)에만 shadow 적용
- Don't: 카드에 그림자 추가 금지 (Flat-first)
- Don't: 2px 이상의 heavy border 사용 금지
- Don't: 커스텀 shadow 값 신설 금지