设计规范:这套界面的来处
9 页界面、一套色板、一条 1440 栅格。设计系统同时是 App 内 Material You 主题的延伸,配色与字阶都能在本文档里查到出处。
01 / 色彩
深绿大理石底,薄荷绿强调
底色来自 App 截图里的深绿渐变,强调色取自身标识的薄荷绿。除语义色外不使用高饱和撞色。
语义色
成功 / 警告 / 错误
#5FEA78 #E8B44A #E5644E
辅助底
交替带与内嵌块
#071E10 交替区块 · #04120A 页脚 · #16341F 选中态 · #12291A 内嵌块
用法
绿只给重点
强调色只出现在按钮、可点文字与数据数字上;正文一律用反白中性色,避免整页发绿。
02 / 字阶与栅格
三种字体,各管一段
| 层级 | 字号 / 行高 | 字重 | 字体 |
|---|---|---|---|
| Display | 48 / 56 | Black | Noto Sans SC |
| H1 | 32 / 44 | Black | Noto Sans SC |
| H2 | 24 / 34 | Bold | Noto Sans SC |
| Body | 16 / 30 | Regular | Noto Sans SC |
| Mono | 12 / 20 | Regular | Noto Sans Mono |
| 数字与拉丁字 | — | Bold / ExtraBold | Montserrat |
圆角
8 / 12 / 18 / 24 / 100(胶囊)
间距
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64
栅格
1440 画布 · 留白 120 · 内容 1200
阴影
仅两级,均为低透明度深绿扩散,不用霓虹外发光。