设计规范:这套界面的来处

9 页界面、一套色板、一条 1440 栅格。设计系统同时是 App 内 Material You 主题的延伸,配色与字阶都能在本文档里查到出处。

01 / 色彩

深绿大理石底,薄荷绿强调

底色来自 App 截图里的深绿渐变,强调色取自身标识的薄荷绿。除语义色外不使用高饱和撞色。

页底#05170C
卡片#0C2113
描边#1F3423
强调绿#5FEA78
标题绿#A3E483
正文反白#EEF3E9
语义色

成功 / 警告 / 错误

#5FEA78 #E8B44A #E5644E

辅助底

交替带与内嵌块

#071E10 交替区块 · #04120A 页脚 · #16341F 选中态 · #12291A 内嵌块

用法

绿只给重点

强调色只出现在按钮、可点文字与数据数字上;正文一律用反白中性色,避免整页发绿。

02 / 字阶与栅格

三种字体,各管一段

层级字号 / 行高字重字体
Display48 / 56BlackNoto Sans SC
H132 / 44BlackNoto Sans SC
H224 / 34BoldNoto Sans SC
Body16 / 30RegularNoto Sans SC
Mono12 / 20RegularNoto Sans Mono
数字与拉丁字—Bold / ExtraBoldMontserrat

圆角

8 / 12 / 18 / 24 / 100(胶囊)

间距

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64

栅格

1440 画布 · 留白 120 · 内容 1200

阴影

仅两级,均为低透明度深绿扩散,不用霓虹外发光。

03 / 组件

按钮、标签、卡片

按钮

主次两级

标签

胶囊 + 等宽字

启用默认禁用
卡片

1px 描边,无投影

悬停只提升描边亮度与位移 3px,不加阴影,避免整页「浮起来」。

想看真实界面?

App 内的 Material You 主题会跟随系统取色,这里记录的是深色基线。