高度与深度
深度先靠表面色阶与描边,再靠阴影。三枚阴影,加第四枚就是设计系统开始漏水的时刻。
subtle
0 8px 28px / 10%弹窗、下拉浮层
micro
0 1px 3px / 8%画布浮层、白纸、分段活动段
0 1px 2px / 20%滑块手柄、开关滑块
knob 存在的理由很具体:白色圆形落在浅色轨道上,光靠 micro 会化开。手柄是靠形状承载数值位置的东西,它化开等于读不出值。别拿 micro 顶替,也别为了救手柄而把 micro 整体调重——那会让所有浮层变脏。阴影都绝不在 hover 时做动画。
焦点自成一层,不参与高度体系
焦点环 2px 宽 + 2px offset。offset 是承重的,不是装饰:它把环与控件自身的填充分开。 算给你看——环带 offset 时相邻色是面板白底,6.08:1;直接贴在近黑填充上只有 2.92:1,达不到 3:1。 输入框族是焦点环的唯一例外:输入框、取值胶囊、下拉触发器用描边从 stroke-input 切到 brand-default 表示聚焦。它们本来就有描边,加环等于两层边界。
输入框族是焦点环的例外——输入框、取值胶囊、下拉触发器用描边从 stroke-input 切到 brand-default 表示聚焦。因为它们本来就有描边,加环等于两层边界。