按压反馈
轻微收缩，释放即回弹。
Manrope
Variable sans400 — 800
同一套灰阶，不同层次的表达。查看色值
排版
用尺度与字重建立主次，保留舒适的阅读节奏。
展示标题Display
让文字有层次。
章节标题Heading
清晰的结构，从这里开始
正文Body
相关的信息彼此靠近，不同的层级留出空间。让字号、行距和段落宽度一起工作，而不只是放大标题。
辅助信息Caption
辅助信息轻一些，必要的信息依然清楚。0123456789
色彩与层次
点击色块复制色值。色彩通过角色，而不是数量，形成秩序。
克制，不等于扁平。
相邻表面用轻微的明暗与边界区分。需要浮起时，再使用柔和阴影。
圆角 10 / 18 px边界 1 px
布局与空间
内容保持相同，体验不同构图中的主次与节奏。
让主标题与正文形成错落的阅读节奏。
主要信息空间，
空间，
也在表达。
用比例分配注意力，
用留白连接内容。
视觉样本秩Type & space
辅助信息
相关的，靠近一些。
组内紧凑，组间舒展。即使没有边框，关系也可以清晰。
16 px / 1.7构图示意 · 不代表产品页面主次关系 → 比例 → 对齐 → 节奏
间距尺度
以 4px 为基础
4
8
12
16
24
32
48
64
组件与状态
统一的语言，也体现在每一次细微的反馈里。
按钮
悬停、按压与释放，有一致的反馈。开关
已开启
选择状态
边界轻一些，焦点清楚一些。
内容随空间自然展开。再次点击收起，动画从当前状态衔接。
动效
快速回应，平稳衔接。有节奏，也有分寸。
160 ms
自然出现从轻微位移中停稳
进入与退出
先快后缓，保持空间感。
弹簧过渡
自然停靠，允许中途反向。
Motion统一曲线与时序 · 实际运行