マテリアル
角丸、ヘアライン、温かい影、そしてコンテンツが載る面。
角丸
ピクセル単位の 7 段階。ピルは完全な丸み、タイルグリッドは 28、大きな背景カードは 40。
- xs2px
- sm4px
- md6px
- lg10px
- xl14px
- 2xl18px
- 3xl24px
同心の角丸
入れ子の角丸は中心を共有します：内側の角丸 = 外側の角丸 − 余白。両方をドラッグするか、同じ角丸と比べてください。
内側 20 = 外側 28 − 余白 8
影
どれも 2 層。くっきりした接地線と、やわらかく温かい広がり。
- shadow-1コントロール、チップ、静止したカード。
- shadow-2ポップオーバーとメニュー。
- shadow-3浮いたカード。
- shadow-4ダイアログ。
- shadow-5ウィンドウ、または写真の上の焦点の面。
面
コンテンツが載る場所。tint は唯一の半透明の面で、背後をぼかすことはありません。
- 背景ページ。
- カード不透明なコンテンツとモックのプロダクト UI。
- フォーカス写真の上の唯一の不透明な面。どちらのモードでも白。
- ミュートくぼみとホバーの塗り。
- サブストレートデモとコードの暗い舞台裏。
- ティント写真の上の補助的なチップ。
ルール
- 1セルはボーダー色の上の 1px のすき間で区切り、セルごとに枠を付けない。
- 2backdrop-filter のすりガラス、外側のグロー、色付きの影は使わない。
- 3許されるグラデーションは、写真の上の文字の下に敷くインクのスクリム（最大 55%）だけ。