好奇心花园🪴

搜索

SearchSearch

最近的笔记

Yohaku（余白）设计系统

2026年5月17日7分钟阅读

Yohaku（余白）设计系统

一种主色，三档中性灰，剩下都是留白。 为书写而设计的排版系统——网页、长文、信件、报告，凡是承载文字的地方都能用。

作者： Innei · 版本： v0.1 · 日期： 2026.04 官网： https://yohaku.innei.dev GitHub： https://github.com/Innei/Yohaku

设计理念

Yohaku（余白）取自日语「留白」——画面里有意空出的地方，往往比填满的部分更有分量。

核心理念：少即是多，但不是口号，而是每一处加法都被审过的结果。 在画布上添加之前，先问自己——这是必要的吗？

说一千次「不」，方有一次「是」。

10 条铁律

#规则
01中性灰分三档：1-4 用做表面，5-7 用做边框和图标，8-10 用做正文和标题
02n-5 不能作为文字色；n-6 只能用在小标签上；n-7 才开始适合作次要文字
03禁止使用 Tailwind 默认的 neutral-50～950，verify 脚本自动拦截
04主色在界面上不超过 5%，留给 CTA、focus 状态和品牌标识
05正文默认用 n-9，深色模式自动反转
06字体只有三族：sans / serif / mono，每族都必须带 CJK 回退链
07禁用硬阴影，深度通过描边（ring）或淡阴影（whisper）表现
08圆角最大用到 rounded-2xl（16px），再大只是装饰
09中文不要用合成 bold，font-medium（500）就是上限
10mockup HTML 必须 @import tokens.css，不能直接写 hex 值

色彩系统

中性灰（暖调纸张色，三档）

Tier 1（1-4）→ 表面 / 填充 Tier 2（5-7）→ 边框 / 图标 / 次要文字 Tier 3（8-10）→ 正文 / 标题

TokenHex用途档位
n-1#F9F8F5页底 / 最浅填充表面
n-2#F0EFEB卡片底表面
n-3#E3E1DB微填充 / hover表面
n-4#D0CEC6强填充表面
n-5#A8A69F边框（❌ 不能做文字色）边框
n-6#787670图标 / 小标签边框
n-7#5C5A55次要文字边框
n-8#403F3A加强的次要文字文字
n-9#24231F正文默认文字
n-10#141312标题 / 最强调文字

亮色模式带有暖调 parchment undertone（R > G > B），深色模式反转成纯中性灰（R=G=B），暖度只由 --color-paper 承载。

主色 — 梅红（ume）

属性值
Hex（亮色）#C56473
Hex（深色）#E095A4
用途CTA、focus ring、引文边线、品牌标识
用量不超过界面 5%
运行时由 AccentColorStyleInjector 用 OKLCH 动态注入

语义色（日本传统色）

色名日本名Hex用途
縹hanada#3D6896信息状态
若竹wakatake#5E9F7E成功状态
朽葉kuchiba#A87A3D警告状态
蘇芳suoh#A64953错误 / 破坏性操作

CSS 变量

--color-paper: var(--surface-paper);      /* 页面背景 */
--color-border: rgba(24, 24, 27, 0.1);    /* 默认边框 */
--color-accent: #c56473;                   /* 主色 */
--color-neutral-1 ～ --color-neutral-10    /* 中性灰 */
--color-info / success / warning / error   /* 语义色 */
--font-sans / serif / mono                 /* 字族 */

字体系统

三族 + CJK 回退链

族首选项中文回退链用途
SansInter (variable)PingFang SC → Microsoft YaHei → Noto Sans SCUI 主体、按钮、列表、表单
SerifNoto Serif CJK SCSource Han Serif → SongTi SC → GeorgiaHero 标题、长文正文、引文
MonoOperator MonoJetBrains Mono → Fira Code → Consolas代码块、版本号、hex 色值、数字对齐

Logo 专用字体：--font-logo-cjk（Noto Serif JP） + --font-logo-latin（EB Garamond），仅用于 wordmark。

字号尺规（role+px 方案）

禁止使用 Tailwind 默认的 text-xs/sm/base/lg/xl/2xl/3xl/...，禁止硬编码 text-[Npx]。

TokenSizeLine-heightWeight用途
caption-1010px1.4600小帽子文字（慎用）
label-1212px1.5400元数据、小标签
copy-1313px1.54400卡片描述、紧凑正文
copy-1414px1.57400正文默认（1rem）
copy-1515px1.6400弹窗标题、强调正文
copy-1616px1.625400大号正文
title-2020px1.4500节标题
title-2424px1.33500子 H1
title-2828px1.29500页面 H1
display-3636px1.22500Hero 标题
display-4848px1.17500大 Hero

html 基准字号设为 14px，因此 copy-14 = 1rem。中文禁止合成 bold，font-medium(500) 是上限。

间距与形态

圆角体系

值Token用途
4pxrounded标签
6pxrounded-md默认
8pxrounded-lg卡片
12pxrounded-xlmodal / 按钮
16pxrounded-2xlhero（上限）

深度表现

  • ring：ring-1 ring-border，无投影，最常用
  • whisper：0 4px 24px / 0.05，轻微浮起感
  • hard drop：❌ 禁用「又重又俗」

原子组件

组件样式规约
按钮rounded-xl · accent/8 fill（半透明填充）· 1px 半透明边框。三类：主 / 次 / 幽灵
标签bg-neutral-2 · text-xs
引文border-l accent · text-neutral-7
指标serif · tabular-nums（等宽数字）
虚划列表dash bullet（—），编辑风格
Inline 代码bg-neutral-2 · font-mono

段落模式

  1. 评论流：--field-{bg,border,gradient,shadow} · --color-accent · rounded-tl-sm（异形圆角气泡）
  2. 表单：--field-* 全套 token · rounded-xl · accent focus ring · 占位符如 ” 怎么称呼你 ”
  3. 代码块：--code-accent-{line,soft,tint,icon,foreground} · --color-paper
  4. 弹窗（Modal）：--color-paper · --color-error · btn—secondary / btn—danger
  5. 底部抽屉（Sheet）：--color-paper · --color-neutral-{4,7,9,10}

技术实现

  • 基础设施：Tailwind v4 @theme inline blocks + CSS custom properties
  • 包名：@yohaku/design-system
  • 色彩空间：OKLCH（打印时需 hex 镜像版本）
  • 深色模式：暖灰底（rgb(28,28,30)）+ 中性灰反转
  • 运行时注入：AccentColorStyleInjector 控制动态 accent
  • 验证：ESLint + check.ts 脚本，禁止绕过 tokens 使用原始 hex
  • HTML/PDF 输出：同一套 tokens 同时生成 HTML 和浏览器打印 PDF

输出样例

类型描述HTMLPDF
长文衬线字体 · drop cap · 多页demo-post.htmlPDF
简历A4 单页 · 设计工程师demo-resume.htmlPDF
一页报告A4 单页 · 项目进度demo-report.htmlPDF

与同类方案对比

维度Yohaku 余白Tailwind default传统设计系统
中性灰档位10 档（三档语义）50-950（11 档无语义）不定
主色用量≤ 5%无限制通常 10-30%
中文合成 bold禁止允许允许
硬阴影禁止允许允许
字号体系role+px 自定义text-xs~9xl不定
CJK 回退每族强制无无

参考资料

关系图谱

反向链接