Foundations
Elevation
Tiro의 깊이 시스템. Flat-first, 그림자는 최소한으로.
Tiro의 깊이 시스템은 의도적으로 평면적(flat) 입니다. 그림자 대신 배경색 변경과 얇은 보더로 깊이를 표현합니다.
Levels
| Token | Value | Description |
|---|---|---|
| Flat (Level 0) | none | Page backgrounds, text blocks, most surfaces |
| Whisper (Level 1) | 0 0 0 1px var(--stone-100) | Card outlines, input borders, list dividers |
| Subtle (Level 2) | 0 1px 2px rgba(0,0,0,0.05) | Dropdown menus, popovers, tooltips |
| Elevated (Level 3) | 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05) | Modals, dialogs, command palette |
| Sticky (Level 4) | 0 1px 2px rgba(0,0,0,0.05) | Sticky headers, floating recording controls |
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 값 신설 금지