影

Draft

影は 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)
Copied!