Foundation
Shadow
light·dark 테마별 11단계 원시 shadow와 raised, floating, modal 역할별 토큰을 설명합니다.
Primitive
Shadow primitive는 표면과 배경 사이의 시각적 거리만 나타내는 11단계 재료입니다. light와 dark에서 같은 단계가 비슷한 무게로 보이도록 recipe가 달라지며, 실제 UI는 아래 semantic 역할을 우선 사용합니다.
다크 모드에서는 밝은 표면과 얇은 밝은 윤곽으로 경계를 구분하고, 어두운 그림자로 높이를 표현합니다. 흰색으로 넓게 번지는 효과는 그림자가 아니라 발광에 가까워 사용하지 않습니다.
50
--shadow-50shadow-50Light0 1px 2px rgb(22 24 43 / 0.03)Dark0 0 0 1px oklch(1 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.14)100
--shadow-100shadow-100Light0 1px 3px rgb(22 24 43 / 0.04)Dark0 0 0 1px oklch(1 0 0 / 0.07), 0 1px 3px rgb(0 0 0 / 0.16)200
--shadow-200shadow-200Light0 2px 5px rgb(22 24 43 / 0.05)Dark0 0 0 1px oklch(1 0 0 / 0.08), 0 2px 5px rgb(0 0 0 / 0.18)300
약함
--shadow-300shadow-300Light0 3px 8px rgb(22 24 43 / 0.06), 0 1px 2px rgb(22 24 43 / 0.03)Dark0 0 0 1px oklch(1 0 0 / 0.09), 0 3px 8px rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.1)400
--shadow-400shadow-400Light0 5px 12px rgb(22 24 43 / 0.08), 0 1px 3px rgb(22 24 43 / 0.04)Dark0 0 0 1px oklch(1 0 0 / 0.1), 0 5px 12px rgb(0 0 0 / 0.23), 0 1px 3px rgb(0 0 0 / 0.12)500
기본
--shadow-500shadow-500Light0 8px 16px rgb(22 24 43 / 0.1), 0 2px 6px rgb(22 24 43 / 0.05)Dark0 0 0 1px oklch(1 0 0 / 0.11), 0 8px 16px rgb(0 0 0 / 0.26), 0 2px 6px rgb(0 0 0 / 0.14)600
--shadow-600shadow-600Light0 12px 24px rgb(22 24 43 / 0.12), 0 3px 8px rgb(22 24 43 / 0.06)Dark0 0 0 1px oklch(1 0 0 / 0.12), 0 12px 24px rgb(0 0 0 / 0.3), 0 3px 8px rgb(0 0 0 / 0.16)700
강함
--shadow-700shadow-700Light0 16px 32px rgb(22 24 43 / 0.14), 0 4px 12px rgb(22 24 43 / 0.07)Dark0 0 0 1px oklch(1 0 0 / 0.13), 0 16px 32px rgb(0 0 0 / 0.34), 0 4px 12px rgb(0 0 0 / 0.18)800
--shadow-800shadow-800Light0 24px 48px rgb(22 24 43 / 0.16), 0 6px 16px rgb(22 24 43 / 0.08)Dark0 0 0 1px oklch(1 0 0 / 0.14), 0 24px 48px rgb(0 0 0 / 0.38), 0 6px 16px rgb(0 0 0 / 0.2)900
--shadow-900shadow-900Light0 32px 64px rgb(22 24 43 / 0.18), 0 8px 20px rgb(22 24 43 / 0.09)Dark0 0 0 1px oklch(1 0 0 / 0.15), 0 32px 64px rgb(0 0 0 / 0.42), 0 8px 20px rgb(0 0 0 / 0.22)950
--shadow-950shadow-950Light0 48px 96px rgb(22 24 43 / 0.22), 0 12px 32px rgb(22 24 43 / 0.11)Dark0 0 0 1px oklch(1 0 0 / 0.16), 0 48px 96px rgb(0 0 0 / 0.46), 0 12px 32px rgb(0 0 0 / 0.24)Semantic roles
깊이가 아니라 layer의 책임으로 shadow를 선택합니다. 같은 primitive를 공유하더라도 역할을 분리하면 제품이 지속 표면, 비차단 layer, 차단 layer를 독립적으로 조정할 수 있습니다.
Raised
- Token
--shadow-raised- Tailwind
shadow-raised- Primitive
--shadow-300300 · 약함- USE
- elevated Card, Switch thumb, selected segmented item
Floating
- Token
--shadow-floating- Tailwind
shadow-floating- Primitive
--shadow-500500 · 기본- USE
- Popover, Tooltip, menu처럼 anchor에 붙는 비차단 layer
Modal
- Token
--shadow-modal- Tailwind
shadow-modal- Primitive
--shadow-700700 · 강함- USE
- Dialog, Sheet처럼 scrim과 focus containment를 동반하는 layer
Shadow는 border나 interaction ring을 대신하지 않습니다.
기본 Card는 border만 사용합니다. focus, selection, inset 상태는 각각의 전용 표현을 유지하고, 실제로 배경에서 떠 있는 요소에만 shadow semantic을 적용합니다.
사용 기준
권장하는 사용
- 배경에서 떠 있는 고정 영역에는 `--shadow-raised`, 기준 요소에 붙는 레이어에는 `--shadow-floating`, 화면을 차단하는 레이어에는 `--shadow-modal`을 사용합니다.
피해야 할 사용
- 일반 영역을 꾸미기 위해 기본 shadow 단계나 glow를 직접 고르지 마세요.
검증 기준
- 기본 Card는 테두리만 사용하고, 화면에서 떠 있는 고정 영역에만 raised를 적용합니다.
- 기준 요소에 붙는 비차단 레이어는 floating, 사용자 흐름을 멈추는 화면 레이어는 modal을 적용합니다.
- 테두리, 포커스 링, 선택 링은 shadow와 별도로 표시합니다.