媒体位 16 / 10类型 · 甲
条目标题一
→两行以内的中性描述文字,用来占位说明这一条是什么。
一套 token,两个墨色模式
近黑与暖白互换,正文 14px,按钮 4px 圆角,卡片 14px,无渐变。唯一的强调色就是墨色本身 —— 层次靠墨纸互换与一条细线。
本页自包含:零外部子资源,加载时不跳转,不写 localStorage 也能看。
14px正文
4px按钮圆角
14px卡片圆角
0渐变 / 色相
Token
语义 token 表
色板格与「当前值」都直接读页面上的 CSS 变量,切换模式时整表跟着变;右侧一列是这个 token 归属的构件。
对比度实测(脚本打印):近黑 ink/bg 14.78:1 · muted/bg 6.34:1;暖白 ink/bg 16.66:1 · muted/bg 5.02:1。四档全部 ≥ 4.5:1。muted-soft 只有 3.53:1(近黑)/ 2.81:1(暖白),只给法务页脚注这类可放弃的文字。
--accent = 墨本身
四级透明墨线
影三档
footer-* 两模同值
| token | 色板 | 当前值 | 用在哪 |
|---|---|---|---|
--bg | | 整页底、header 背景、输入底 | |
--surface | | 卡面:作品 / 服务 / 定价 / 案例 / 表单卡、hero 胶囊 | |
--surface-raised | | 作品卡媒体框底 | |
--ink | | 正文与标题 | |
--muted | | 次要文字、描述、导航默认色、图注 | |
--muted-soft | | 最弱一档:法务页脚注 | |
--line | | chrome 分隔线:announce 条、吸顶 header | |
--line-hairline | | 卡片描边、卡内分隔、faq 上下线 | |
--line-field | | 输入框与次要按钮描边 | |
--line-control | | 交互描边、下划线默认色 | |
--surface-hover | | 悬停洗色(导航、按钮、开关) | |
--surface-pressed | | 当前态:tag 底、chip 底、聚焦外环 | |
--accent | | 主按钮底、焦点环、选中文本底 | |
--on-accent | | 压在 accent 上的文字 | |
--promo-bg | | 反色块:announce 条、定价主推卡 | |
--promo-fg | | 反色块上的文字 | |
--promo-muted | | 反色块里的次要文字 | |
--promo-tag-bg | | 反色块里的 tag 底 | |
--footer-bg | | 页脚底(两模同值) | |
--footer-fg | | 页脚主文字 | |
--footer-strong | | 页脚列标题 | |
--footer-link | | 页脚链接 | |
--footer-muted | | 页脚正文与底栏 | |
--footer-faint | | 页脚品牌副标 | |
--footer-line | | 页脚底栏上边线 | |
--footer-line-strong | | 页脚品牌副标左边线 | |
--overlay-bg | | 媒体图上的徽标底 | |
--overlay-fg | | 媒体图徽标文字 | |
--overlay-line | | 媒体图徽标描边 | |
--shadow-btn | | 主按钮三层影 | |
--shadow-card | | 卡片悬停浮起影、表单卡常驻影 | |
--shadow-pill | | hero 胶囊影 |
Type
字阶
十一档,全部走变量;标题不外挂衬线,中英同栈。
--fs-display 64px墨色双模
--fs-section 40px分区标题
--fs-case 20px案例卡标题
--fs-sub 18px表单标题
--fs-card 17px卡标题
--fs-lede 16px导语一档,字重 500。
--fs-body 14px正文一档,页面的默认字号。
--fs-small 13px卡片描述、按钮文字。
--fs-meta 12px元信息、脚注上一条。
--fs-caption 11px最小一档,只给标签与提示。
--fs-eyebrow 10.5pxeyebrow 小标
Parts
按钮 / tag / chip
按钮高度三档(32 / 36 / 44),圆角一律 4px;tag 是胶囊,chip 是 44px 命中区。
tag · 胶囊
10.5px
无彩强调
icon chip
bg页面底
surface卡面
surface-raised媒体框底
ink正文
muted次要文字
accent墨本身
Work
作品卡
卡面无阴影,悬停才浮起;类型徽标压在媒体图上,用固定的叠加 token(不随主题翻)。
媒体位 16 / 10类型 · 乙
条目标题二
→换行与字号在这一档固定,长描述也不会撑破卡面圆角。
Services
服务卡
三列等分;tag 顶在左上,底部一排标签用 margin-top:auto 压到底。
服务标题一
一行到两行说明,用来验证同一行高下的对齐。
服务标题二
说明长度不同也不会把卡片撑得参差 —— 卡高由网格拉伸决定。
服务标题三
第三张卡的说明。
Cases
案例卡
三段式:问题 / 做法 / 结果;每段之间一条细线,不整卡描边加重。
案例标题一
- 问题
- 旧版分区靠颜色区分,深色下对比不足。
- 做法
- 换成墨/纸互换与四级细线,强调色收成一个。
- 结果
- 正文与次要文字都过 AA,维护面从两套色表降到一套 token。
案例标题二
- 问题
- 表格与表单控件在两种模式下各写了一遍样式。
- 做法
- 控件全部改走 line-field 与 surface-pressed 两个语义位。
- 结果
- 模式分支从样式表里消失,校验态也不用颜色表达。
案例标题三
- 问题
- 定价主推卡在暖白下反色失真。
- 做法
- 抽出 promo 四件套,主推卡与按钮各翻一次。
- 结果
- 两模共用同一组规则,反色块的对比度实测 14.78:1 / 16.66:1。
Pricing
定价卡
主推卡整块翻成反色(promo-*),按钮在反色块里再翻一次 —— 两模同一套规则。
档位 · 基本按次
¥1 200/ 起
适合一次性的小页面:静态排版与一套 token。
- 单页结构
- 一套配色
- 交付说明
档位 · 推荐推荐
¥3 600/ 起
多分区站点:全套构件 + 深浅双模 + 表单。
- 全套构件
- 双模 token
- 表单与校验态
档位 · 长期按月
¥800/ 月
持续维护:新增分区、刻度微调、可访问性复查。
- 按需增补
- 对比度复查
- 交付留痕
价格是中性占位数字,只用来验证排版;不构成任何报价。
附加项
按件计附加项一
一行说明,用来验证 1px 网格线与圆角裁切。
¥200
附加项二
同样一行说明,右侧价格不接受换行。
¥300
维护包
三档基础¥200 / 次
- 文案与刻度微调
- 交付差异说明
标准¥500 / 次
- 新增一个分区
- 对比度复查
深度¥900 / 次
- 结构级调整
- 构件补做
Process
流程
五步一格,靠上下两条细线分块,不用卡片。
01
读 token
先看语义表,不自己编颜色。
02
选模式
默认近黑,需要暖白再加一份。
03
落构件
按钮 / 卡 / announce / 表单按类名落位。
04
实测对比度
正文与次要文字各跑一次断言。
05
登记
在项目 design-lock 记包名与版本。
为什么只有一个强调色
色相一旦承担信息,就得成体系;这套语言把信息交给字号、留白与墨纸互换,强调色只留墨本身。
为什么细线不统一成一个值
卡片描边、控件描边、交互描边要三种存在感,所以留四级:line / hairline / field / control。
FAQ
常见问题
原生 details:展开状态不用 JavaScript。
深浅两模要引几份 CSS?
单主题(近黑)只引 default.css;要在同页切换模式,再加一份 themes.css 并在 html 上写 data-theme。
强调色能不能换成别的颜色?
可以,但要改 tokens/semantic 的两个文件并重跑断言:对比度是按语义键实测的,换了色就必须重新验一遍。
表单报错为什么不是红色?
这套语言里没有色相,报错靠加粗描边、圆形叹号和文案三件事,圆点与文案都沿用墨色。
Contact
表单与校验态
输入框底跟着页面底走,描边用 line-field;聚焦时描边提到墨色并加一圈 surface-pressed 外环。
邮箱一格故意留成报错态,点提交可以看它怎么恢复。
提示一提示二提示三
也可以用邮件联系:[email protected](中性占位)