影
影は 7 種。要素の重なり(モーダル・ドロップダウン・浮いているパネル)を示す機能としてだけ使い、装飾のためには使わない。
ブランド表現ではドロップシャドウを使わない(How we look)。プロダクト UI で影を使うのは、ブランドとプロダクトを別々に定義するという前提(Products)に沿った意図的な分岐。
浮いている高さが高いほど、大きな影を使う。
影の一覧
7 種。値はライト・ダーク共通。デモは白いカードに各影を適用したもの。
shadow-sm shadow shadow-md shadow-lg shadow-xl shadow-2xl shadow-inner | トークン | 主な用途 | 値 |
|---|---|---|
shadow-sm | わずかな浮き(入力欄・小さなカード) | 0 1px 3px 0 rgba(0, 0, 0, 0.05) |
shadow | 標準のカード | 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) |
shadow-md | ホバーで持ち上がる要素・ドロップダウン | 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) |
shadow-lg | ポップオーバー・浮いているパネル | 0 8px 12px -2px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03) |
shadow-xl | ダイアログ | 0 16px 20px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03) |
shadow-2xl | 最前面の大きなモーダル | 0 20px 40px -8px rgba(0, 0, 0, 0.12) |
shadow-inner | 凹み表現(押されたボタン・ウェル) | inset 0 2px 4px 0 rgba(0, 0, 0, 0.04) |