界面中性灰阶配色方案（色导网方案库）
界面里八成以上的面积是中性色。灰阶分配不对，后面再好的品牌色也救不回来。
色卡
#FAF9F6
#F2F0EA
#E6E3DA
#D4D0C4
#B3AEA0
#8E8A7C
#6E6A5E
#534F46
#3A372F
#26241F
#16150F
为什么是十一级
界面需要的不是「几种灰」，而是一条能稳定取用的梯子：两级底色、两级线、三级文字、再加深色区块的两端。少于这个数会不断临时调色，多于这个数相邻两级会分不出来。
这一套的色相固定在暖侧（偏黄而非偏蓝），饱和度随明度两端递减——纯灰在暖色内容旁边会显脏，而两端保留饱和度会让底色看起来发黄。
实测对比度
| 文字／底色 | 用途 | 对比度 | 判定 |
|---|---|---|---|
| 次级 600／纸白 50 | 次级说明文字 | 5.13:1 | 正文 AA |
| 正文 700／纸白 50 | 正文 | 7.75:1 | 正文 AAA |
| 标题 800／浅底 100 | 区块内标题 | 10.43:1 | 正文 AAA |
| 弱文字 500／纸白 50 | 想当正文用（看判定） | 3.28:1 | 仅大字 AA |
| 禁用 400／纸白 50 | 禁用态 | 2.10:1 | 不达标 |
| 纸白 50／深底 950 | 深色区块里的文字 | 17.37:1 | 正文 AAA |
用法与禁忌
- 正文最浅取到 600。500 压在 50 上达不到正文 AA，只能用于大字或纯装饰。
- 禁用态用 400 是有意的：它就应该读不清楚。但别用它写任何必要信息。
- 不要在 200 与 300 之间同时放边框和分隔线，相邻两级并置时看起来像渲染错误。
- 深色区块用 950 配 50，不要用 900 配 100——那一对的比值掉得很快。
CSS 自定义属性
:root {
--nm-50: #FAF9F6;
--nm-100: #F2F0EA;
--nm-200: #E6E3DA;
--nm-300: #D4D0C4;
--nm-400: #B3AEA0;
--nm-500: #8E8A7C;
--nm-600: #6E6A5E;
--nm-700: #534F46;
--nm-800: #3A372F;
--nm-900: #26241F;
--nm-950: #16150F;
}