材质
圆角、细线、暖色阴影，以及内容所在的各类表面。
圆角
七个以像素为单位的档位。胶囊形完全圆角；磁贴网格用 28，大型背景卡片用 40。
- xs2px
- sm4px
- md6px
- lg10px
- xl14px
- 2xl18px
- 3xl24px
同心圆角
嵌套的圆角共享圆心：内圆角 = 外圆角 − 内边距。拖动两个数值，或与等圆角对比。
内 20 = 外 28 − 边距 8
阴影
每档两层：一道清晰的接触线，加一层柔和的暖色扩散。
- shadow-1控件、标签、静止的卡片。
- shadow-2弹出层和菜单。
- shadow-3浮起的卡片。
- shadow-4对话框。
- shadow-5窗口，或照片上的焦点表面。
表面
内容所在之处。tint 是唯一半透明的表面，而且从不模糊背后的内容。
- 背景页面。
- 卡片实色内容和模拟产品界面。
- 焦点照片上唯一的实色表面，两种模式下都是白色。
- 弱化凹槽和悬停填充。
- 底层演示和代码的深色后台。
- 色调照片上的次要标签。
规则
- 1单元格之间用边框色上的 1px 间隙分隔，而不是给每个单元格加边框。
- 2不用 backdrop-filter 毛玻璃、外发光或彩色阴影。
- 3唯一允许的渐变是照片上文字下方的墨色渐变，最多 55%。