影
情報の存在感を高めたい場合や可読性を上げる際に影を使用します。
ぼかしが大きすぎたり色が濃すぎる影は使用せず、上質さを感じられるような控え目な影を用途に応じて使い分けます。
Name
CSS
outline-sm
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px #0000000f;
outline-md
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #0003;
outline-lg
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 6px 0px #0003;
bottom
box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
outline-sm
同じ情報が連続して並ぶ場合に使用します。
使用箇所：カードUI
outline-md
背景から可読性をあげたいパーツがある場合使用します。
使用箇所：ボタンの機能を持つUIパーツ
outline-lg
ホバーやクリックで情報を表示させ、浮き上がる表現を用いる場合に使用します。
使用箇所：検索モジュール、モーダル、吹き出し
bottom
画面の中で特に優先してみせたい情報やアクションの対象となる要素に使用します。
使用箇所：ナビゲーション
