elevation-and-depth
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseElevation and Depth
Elevation与视觉深度
Elevation uses shadow and layering to communicate that an element sits above the base surface — giving UI a sense of physical depth. Combined with border-radius, it creates the tactile quality that makes cards graspable, modals clearly floating, and dropdowns feel like they've appeared on top of content.
Elevation通过阴影与分层设计，传递元素位于界面基底之上的视觉感受，为UI赋予真实的物理深度感。搭配border-radius使用时，能营造出可触摸的质感，让卡片显得易于抓取、模态框清晰悬浮、下拉菜单仿佛出现在内容之上。
The Elevation Scale
Elevation尺度
Define a small set of elevation levels as tokens. Each level maps to a specific UI role.
| Level | Token | Shadow | Role |
|---|---|---|---|
| 0 | | none | Flat surface, inline elements |
| 1 | | | Subtle card, table row hover |
| 2 | | | Card, input focus ring area |
| 3 | | | Dropdown, popover |
| 4 | | | Modal, dialog, side drawer |
| 5 | | | Command palette, full-screen overlay |
Keep shadows subtle. Dark, heavy shadows feel dated and visually aggressive. Light, diffuse shadows feel modern and material.
定义一组少量的阴影层级作为设计令牌（token），每个层级对应特定的UI角色。
| 层级 | 令牌 | 阴影样式 | 角色 |
|---|---|---|---|
| 0 | | 无 | 平面元素、内联元素 |
| 1 | | | 柔和卡片、表格行hover状态 |
| 2 | | | 卡片、输入框聚焦区域 |
| 3 | | | 下拉菜单、弹出框 |
| 4 | | | 模态框、对话框、侧边抽屉 |
| 5 | | | 命令面板、全屏遮罩层 |
阴影要保持柔和。深色厚重的阴影会显得过时且视觉冲击力过强，轻盈弥散的阴影则更具现代感与质感。
The "Shadow + Border" Rule
"阴影+边框"规则
A subtle shadow on a white surface can sometimes "wash out," making the edge of a card feel fuzzy or indistinct.
- Rule: For elevated white cards or sections, pair the shadow with a 1px border that is slightly darker (1.5x to 2x) than the shadow's core tone (e.g., a medium grey like or
#E2E8F0).grey-200 - Effect: The border defines the physical boundary of the card, while the shadow provides the depth. Together, they make the component "pop" with much higher clarity than using either alone.
浅色背景上的白色卡片，其柔和阴影有时会“褪色”，导致卡片边缘模糊不清。
- 规则： 对于浅色背景上的白色卡片或区块，将阴影与1px边框搭配使用，边框颜色比阴影核心色调稍深（1.5至2倍），例如中度灰色或
#E2E8F0。grey-200 - 效果： 边框定义了卡片的物理边界，阴影提供深度感，二者结合能让组件比单独使用其中一种元素时更清晰地“脱颖而出”。
Hover Needs a Defined Edge
悬浮状态需要清晰边界
A card that shifts background colour on hover must have a defined edge — a border, shadow, or clear radius boundary. Without one, the shift has no shape and reads as a stray fill, not a highlighted card. On a borderless, flat card, a background-change hover is forbidden — use a border or a shadow (elevation) on hover instead.
hover时改变背景色的卡片必须有清晰的边界——边框、阴影或明确的圆角边界。如果没有边界，背景色的变化会显得没有形状，像是零散的填充而非高亮的卡片。无边框的平面卡片禁止使用背景色变化作为hover效果——应改为在hover时添加边框或阴影（提升层级）。
Subtle Gradients for Depth
柔和渐变增强深度
Gradients can be used to bring "liveliness" to an interface and reinforce the sense of elevation.
- The Lighting Metaphor: A subtle linear gradient (top-to-bottom) that is slightly lighter at the top mimics natural overhead lighting. This makes a surface feel more physical and elevated than a flat fill.
- The 5% Rule: Keep the gradient extremely subtle. A change in lightness of only 2–5% between the top and bottom is usually enough. If the user can easily see where the gradient starts and ends, it is likely too heavy.
- Usage: Apply to primary buttons, hero cards, and header sections to improve visual hierarchy and brand personality.
渐变可用于为界面增添“活力”，并强化层级感。
- 光照隐喻： 顶部略浅的柔和线性渐变（从上到下）模拟自然的顶部光照，这会让界面比纯色填充更具物理感与层级感。
- 5%规则： 渐变要极其柔和。顶部与底部的亮度变化通常只需2%-5%即可。如果用户能轻易看出渐变的起始和结束位置，那它可能过于浓重了。
- 使用场景： 应用于主按钮、核心卡片和头部区域，以提升视觉层级并增强品牌个性。
Pairing Elevation with Border-Radius
Elevation与border-radius搭配
Border-radius and shadow work together to define the character of a surface. The combination signals the element's role and the product's visual tone.
| Surface | Shadow | Border-Radius | Tone |
|---|---|---|---|
| Inline chip / tag | none | | Flat, lightweight |
| Card | | | Graspable, contained |
| Dropdown / popover | | | Floating, contextual |
| Modal / dialog | | | Prominent, focused |
| Toast / notification | | | Ephemeral, above content |
| Button | none or | consistent across all buttons — see below |
border-radius与阴影共同定义界面的特性，二者的组合能传递元素的角色和产品的视觉风格。
| 界面元素 | 阴影 | 圆角 | 风格 |
|---|---|---|---|
| 内联芯片/标签 | 无 | | 扁平化、轻量化 |
| 卡片 | | | 可触摸、内敛 |
| 下拉菜单/弹出框 | | | 悬浮、上下文关联 |
| 模态框/对话框 | | | 突出、聚焦 |
| 提示框/通知 | | | 临时显示、位于内容之上 |
| 按钮 | 无或 | 所有按钮保持一致——详见下文 |
Border-Radius Consistency Rule
圆角一致性规则
Button border-radius must not vary within a product. All buttons — primary, secondary, destructive, ghost — use the same radius token. Varying radius between button types breaks visual consistency and implies a semantic difference that does not exist.
css
/* Correct: one radius for all buttons */
.btn { border-radius: var(--radius-button); }
/* Wrong: different radii for different button variants */
.btn-primary { border-radius: 8px; }
.btn-secondary { border-radius: 4px; } /* ← breaks consistency */The button radius token is a brand decision — set it once, apply it everywhere.
同一产品内的按钮圆角不得随意变化。所有按钮——主按钮、次要按钮、危险按钮、幽灵按钮——都应使用同一个圆角令牌。不同类型按钮使用不同圆角会破坏视觉一致性，并暗示不存在的语义差异。
css
/* 正确：所有按钮使用同一圆角 */
.btn { border-radius: var(--radius-button); }
/* 错误：不同变体按钮使用不同圆角 */
.btn-primary { border-radius: 8px; }
.btn-secondary { border-radius: 4px; } /* ← 破坏一致性 */按钮圆角令牌是品牌决策——设定一次，全局应用。
Text Shadow for Contrast and Separation
文本阴影提升对比度与分离感
text-shadowThe effect must be imperceptible as a shadow. If the user notices the shadow, it is too strong.
css
/* On images or complex backgrounds */
.hero-title {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Very subtle separation from a near-matching background */
.label-on-tinted-surface {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* White text on light background — use a dark shadow, not white */
.inverted-text {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}Rules:
- Opacity: stay below — above that it reads as a design choice rather than a refinement
0.30 - Blur: maximum — higher values make text feel dirty
2–4px - Offset: or
0 1px— directional offsets above 2px look like retro Web 2.00 0 - Never use to compensate for a contrast failure — fix the colour first. Use it only when colours are already close to passing and a nudge is needed, or when text sits on unpredictable imagery
text-shadow
text-shadow这个效果必须让人无法察觉是阴影。如果用户注意到了阴影，说明它过于明显了。
css
/* 图片或复杂背景上的文本 */
.hero-title {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* 与背景颜色接近时的细微分离 */
.label-on-tinted-surface {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* 浅色背景上的白色文本——使用深色阴影，而非白色 */
.inverted-text {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}规则：
- 透明度：保持在以下——超过这个值会被视为设计选择而非细节优化
0.30 - 模糊度：最大——更高的值会让文本显得脏污
2–4px - 偏移量：或
0 1px——方向偏移超过2px会显得像复古Web 2.0风格0 0 - 永远不要用来弥补对比度不足的问题——首先修复颜色。仅当颜色已经接近达标需要微调，或文本位于不可预测的图像上时才使用它。
text-shadow
Dark Mode Shadows
深色模式下的阴影
Shadows are less visible on dark backgrounds. On dark surfaces, compensate with:
- Slightly higher opacity on shadow values
- Adding a subtle border () to define card edges
1px solid rgba(255,255,255,0.08) - Increasing the elevation level by one step for the same perceived depth
阴影在深色背景上的可见度较低。在深色界面上，可通过以下方式弥补：
- 略微提高阴影的透明度
- 添加柔和边框（）以定义卡片边缘
1px solid rgba(255,255,255,0.08) - 将层级提升一级，以达到相同的感知深度
Review Checklist
审核清单
- Is there a defined elevation scale as design tokens (not one-off shadow values per component)?
- Does each elevated element use the correct level for its role (card ≠ modal)?
- Are shadows light and diffuse, avoiding heavy black (#000) defaults?
- For white cards on light backgrounds, is the shadow paired with a 1px border for better definition?
- Is border-radius consistent across all button variants?
- Do shadows feel subtle and diffuse rather than heavy and dark?
- On dark surfaces, are card/panel edges visible through border or adjusted shadow?
- Is elevation used to communicate layering — not just decoration?
- If gradients are used, are they subtle (2–5% lightness change) and used to reinforce the lighting/elevation metaphor?
- 是否将阴影层级定义为设计令牌（而非每个组件使用单独的阴影值）？
- 每个提升层级的元素是否使用了与其角色匹配的正确层级（卡片≠模态框）？
- 阴影是否轻盈弥散，避免使用厚重的黑色（#000）默认值？
- 浅色背景上的白色卡片是否搭配了1px边框以增强清晰度？
- 所有按钮变体的圆角是否一致？
- 阴影是否柔和弥散而非厚重深色？
- 深色界面上的卡片/面板边缘是否通过边框或调整后的阴影清晰可见？
- 层级提升是否用于传递分层关系——而非仅作为装饰？
- 如果使用了渐变，是否足够柔和（亮度变化2–5%）且用于强化光照/层级隐喻？
Common Anti-Patterns
常见反模式
| Anti-pattern | Problem | Fix |
|---|---|---|
| Different border-radius on primary vs secondary buttons | Implies semantic difference that doesn't exist | Single |
Heavy | Feels dated and visually aggressive | Use low-opacity, multi-layer diffuse shadows |
| Shadow on every element regardless of role | Elevation loses meaning when everything is elevated | Reserve shadow for genuinely floating elements |
| Flat cards with no elevation on a white background | Card edge disappears into the page | Use |
| 反模式 | 问题 | 修复方案 |
|---|---|---|
| 主按钮与次要按钮使用不同圆角 | 暗示不存在的语义差异 | 为所有按钮使用单一 |
使用厚重的 | 显得过时且视觉冲击力过强 | 使用低透明度、多层弥散阴影 |
| 所有元素都添加阴影，无论其角色如何 | 当所有元素都提升层级时，层级关系失去意义 | 仅为真正的悬浮元素保留阴影 |
| 白色背景上的平面卡片无层级提升 | 卡片边缘融入页面，难以区分 | 使用 |