DESIGN SYSTEM
阴影层级Elevation Scale
0-4 级阴影对应元素的"海拔"：越浮起投影越大越散、越贴近投影越小越锐。
效果预览
1
2
3
4
适合用在哪
所有项目。投影随机是继间距之后第二业余重灾区。
容易踩的坑
- 大范围 box-shadow 配合 hover 动画会持续重绘，列表卡片多时滚动卡顿。
- 暗色模式仍用黑色投影，深底上完全看不出层级，浮层像贴在页面里。
- Dropdown 与 Modal 用同一级阴影，用户分不清哪个浮层在最上面。
设计提示词 · Prompt
阴影层级（Elevation Scale）：定义 0-4 级——0 级无影（平面卡片，靠描边区分）、1 级微浮（0 1px 2px + 0 4px 12px -6px 两层叠加）、2 级悬浮（hover 卡片、下拉菜单）、3 级弹层（Popover、Drawer）、4 级模态（Modal，0 28px 70px -22px 级别）。多层投影比单层自然（一层锐利贴地 + 一层柔和扩散）。规则：海拔与交互对应——能按下去的（按钮）默认低海拔、按下降级；浮层永远比底下的内容高一级。暗色模式阴影换为"提亮表面色 + 极淡投影"。阴影颜色用带透明度的黑（rgba(16,17,26,.08)），别用纯灰。
Elevation Scale: Define levels 0-4 — level 0 has no shadow (flat cards, separated by borders), level 1 is a slight lift (two stacked layers: 0 1px 2px + 0 4px 12px -6px), level 2 is hovering (hovered cards, dropdown menus), level 3 is overlays (Popover, Drawer), level 4 is modal (Modal, around 0 28px 70px -22px). Multi-layer shadows look more natural than single ones (one crisp layer hugging the ground + one soft diffused layer). Rules: elevation maps to interaction — pressable things (buttons) default to low elevation and drop a level when pressed; overlays are always one level above the content beneath them. In dark mode, swap shadows for "lighter surface color + very faint shadow." Use translucent black for shadow color (rgba(16,17,26,.08)), not plain gray.
常见搭配
同一页面里经常和「阴影层级」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-elev"> <span class="d-el" style="box-shadow:0 1px 2px rgba(16,17,26,.08)">1</span> <span class="d-el" style="box-shadow:0 4px 14px -6px rgba(16,17,26,.18)">2</span> <span class="d-el" style="box-shadow:0 12px 30px -12px rgba(16,17,26,.26)">3</span> <span class="d-el" style="box-shadow:0 26px 56px -20px rgba(16,17,26,.35)">4</span> </div>