排版Typography
“文字怎样长、怎样排，决定人能不能看懂和先看哪里。
界面组件 · 视觉与动效
排版、对比、令牌和动效共同决定页面是否清晰可信。
视觉与动效
衬线与无衬线Serif / Sans-serif
“一种有笔画收尾，另一种更干净利落；选哪种要服务阅读。
文本截断Text Truncation
“一行放不下时，先收住，但别让用户以为内容本来就只有这么多。
分隔线Divider
“告诉读者：上一组讲完了，下一组开始。
圆角Border Radius
“方框的角是硬还是柔，会直接影响页面气质。
阴影Shadow
“给需要浮起来的内容一点层次，不是所有东西都要有影子。
透明度Opacity
“让某个内容更淡，但仍然看得见。
渐变Gradient
“颜色从这一边慢慢过渡到另一边。
圆角气质Corner Feel
“页面的边角是利落、柔和还是工具感强，要始终统一。
背景模糊Backdrop Blur
“浮在内容上面的菜单能看见后面，但不会被后面文字干扰。
深色模式Dark Mode
“不是把白底反相，而是整套颜色都重新为暗环境调过。
设计令牌Design Token
“把常用设计规则存成统一字典，改一次就能全站同步。
对比度Contrast
“重点要够明显，文字也要看得清。
视觉层级Visual Hierarchy
“页面不能让所有东西抢同样的注意力。
过渡Transition
“状态变化别突然跳，给人一点可理解的过程。
动画Animation
“通过运动告诉用户发生了什么，但不能为了炫而分散注意力。
缓动Easing
“动画不是匀速走，起停节奏决定它像不像真实动作。
弹簧动效Spring Animation
“像东西被轻推后有一点回弹再停住。
淡入淡出Fade
“内容不是突然冒出来，而是轻轻显现或离开。
悬停Hover
“鼠标放上去时，告诉用户这里能点或还能看到什么。
字体Font
“同一套字的形状和粗细，决定文字看起来像谁、读起来累不累。
遮罩层Overlay
“临时把背景压暗，让人先处理眼前这件事。
背景Background
“先铺好内容站立的底面，再保证文字和操作看得清。
主题Theme
“同一套内容换一整组协调外观，而不是逐个组件重新改色。