色彩与文字用色 · hajimi 文档

色卡与参数

色值取自 .pen 的 Variables，用途和对比度取自 Token 板。每张色卡可复制 token 名和色值。色卡一律是圆角矩形，不是圆形：粉、柠檬、橘三张卡放在一起时，不能读成一组品牌点。

基础色

ink

#141414

文字、描边、硬投影、品牌点墨线环

paper

#FFF8EC

页面底色（暖白），大面积不用纯白

ink 文字 17.4:1

white

#FFFFFF

卡片、输入框底色，吸顶导航底

主色与品牌点色

primary

#6C4BFF

图形标卡片底、主 CTA、链接、询价区底

白字 5.1:1 · 在 paper 上 4.9:1

只做链接和强调文字，放在 paper 或白底，字号 ≥ 14px

pink

#FF6FB5

品牌点 1、色块、贴纸底

ink 文字 7.2:1

不做文字色

lime

#D4FF3A

品牌点 2、色块、高亮

ink 文字 15.9:1

文字只放在 ink 底上

orange

#FF7A2F

品牌点 3、色块、编号底

ink 文字 7.1:1

不做文字色

辅助色

paper-deep

#F2E8D5

骨架屏、禁用底色

muted

#4A4A4A

次要文字

在 paper 上 8.4:1

placeholder

#6B6B6B

输入占位文字

在白底上 5.3:1

primary-soft

#E9E3FF

浅底，贴纸底色可选

note

#FFF3A6

浅底（提示框）

状态色

success

#0E7C3A

成功文字

在白底上 5.3:1

状态色只用于表单状态

error

#D42A20

错误文字与描边

在白底上 5.1:1

状态色只用于表单状态

error-soft

#FDE7E5

错误态浅底

状态色只用于表单状态

Spec 原文

Token	色值	用途
`ink`	#141414	文字、描边、硬投影、墨线环
`paper`	#FFF8EC	页面底色。大面积不用纯白
`white`	#FFFFFF	卡片底、吸顶导航底
`primary` 电光紫	#6C4BFF	图形标卡片底、主按钮、链接、询价区底
`pink` · 点 1	#FF6FB5	品牌点、色块、贴纸底
`lime` · 点 2	#D4FF3A	品牌点、色块、高亮
`orange` · 点 3	#FF7A2F	品牌点、色块、编号
辅助色	`paper-deep` #F2E8D5 · `muted` #4A4A4A · `placeholder` #6B6B6B · `primary-soft` #E9E3FF · `note` #FFF3A6	骨架屏、次要文字、浅底
状态色	`success` #0E7C3A · `error` #D42A20 · `error-soft` #FDE7E5	只用于表单状态

文字用色

文字只用 ink、paper、白、muted。
primary 可以做链接和强调文字，但只能放在 paper 或白底上，字号 ≥ 14px（对比度 4.87:1）。
lime 文字只能放在 ink 底上。
粉和橘永远不做文字色。
撞色只做面、色块和品牌点。
不准用渐变，不准调透明度去做新的颜色。唯一例外是 ink 底上的 paper 次要文字，可以用 80% 或 70% 透明度。

Token 板

中文站和英文站各一版，点按钮切换。