tonal 色阶分层
层级不依赖投影强度，而是由 surface / container / high / highest 覆盖色逐级加深表达；页面背景不使用纯白，tonal elevation 取代硬阴影。
Material 3 Expressive / Android 动态色
这是一次按 Material 3 Expressive 规范完成的移动端界面精修演示，主题选定为记账应用「小满记账」。超大容器圆角、tonal 表面色阶、tertiary 大号 FAB、胶囊按钮与 state layer 状态层，全部由 Material You 动态色令牌驱动，点击下方按钮可整页切换第二套动态色方案。
早上好，沐晴
10月已连续记账 128 天
本月支出
¥3,286.50
比上月少花 ¥412
层级不依赖投影强度，而是由 surface / container / high / highest 覆盖色逐级加深表达；页面背景不使用纯白，tonal elevation 取代硬阴影。
所有按钮、chip、 segmented 控件一律 borderRadius 999 的胶囊形；卡片与底部导航取 16 至 28 的大容器圆角，FAB 则取 24。
悬停与按压不再用 opacity 0.5 的写法，而是 8% 至 13% 的同色覆盖层，配合 0.18 秒 emphasized 缓动；键盘焦点由 focus-visible 描边保障。
filled 输入框的标签在聚焦或已有内容时上浮缩小，位移动画同样走 emphasized 缓动，替代生硬的 label 换行。
点按输入框，观察标签上浮