Tokens

53 个语义色 × 6 套主题，以及字体、间距、圆角、阴影等。单一来源是 bostonivy-tokens.json（W3C Design Tokens 2025.10），其余都由构建脚本生成。每组文字和底色的对比度见对比度报告。

下载

bostonivy-tokens.jsonToken 源文件（W3C DTCG 2025.10）
bostonivy-tokens.cssCSS 变量，6 套主题
tokens.json本站读取的 token 列表
index.d.ts组件类型定义

颜色

Token 与用途	青藤 Clean · 亮	青藤 Clean · 暗	萌虎 Sticker · 亮	萌虎 Sticker · 暗	像素 Pixel · 亮	像素 Pixel · 暗
`bg-canvas`主内容区背景。text-primary / text-secondary / text-muted 都可直接放在上面。	`#ffffff`	`#0f1311`	`#f2edff`	`#1a1722`	`#f3f5f1`	`#0a0e0b`
`bg-sidebar`侧栏、收起的导航条、顶栏。	`#f6f8f6`	`#0b0e0c`	`#ffe16a`	`#2a2338`	`#ffffff`	`#0f1511`
`bg-surface`卡片、输入框、任务行容器、弹层。	`#ffffff`	`#151a17`	`#ffffff`	`#26222f`	`#ffffff`	`#0f1511`
`bg-sunken`看板分栏、分组底色、代码块等下沉区域。	`#f2f5f3`	`#121714`	`#e9e2ff`	`#201c29`	`#e8ece6`	`#131b16`
`bg-selected`选中的任务行、当前项目、当前导航项。	`#e6f2ea`	`#1a2c21`	`#d9f6e2`	`#24402f`	`#d6f0df`	`#15301f`
`bg-hover`可点击行和按钮的悬停底色。	`#eef2ef`	`#18201b`	`#faf8ff`	`#2e2939`	`#edf1ec`	`#121a15`
`scrim`模态弹层后面的遮罩（带透明度）。	`#10181466`	`#000000a6`	`#1e1b1873`	`#000000b3`	`#0d1a1166`	`#000000b3`
`border-default`卡片和面板边框。贴纸风格里它就是 2.5px 的墨黑描边。	`#e3e8e4`	`#232b26`	`#1e1b18`	`#ece6ff`	`#cbd3cb`	`#1e2a22`
`border-subtle`列表行之间的分隔线，只做装饰，不承担识别控件的作用。	`#eef1ef`	`#1b221e`	`#d9d0f5`	`#3a3348`	`#e1e6e0`	`#141d17`
`border-strong`复选框、输入框等控件的边框；在 bg-surface / bg-canvas 上至少 3:1。	`#86928a`	`#5c6a62`	`#1e1b18`	`#ece6ff`	`#7d8b80`	`#56695b`
`text-primary`正文、任务标题；可放在所有 bg-* 上。	`#17201a`	`#e7ede9`	`#1e1b18`	`#fbf7ee`	`#0d1a11`	`#d5e6d9`
`text-secondary`次要正文、侧栏导航文字；可放在所有 bg-* 上。	`#3e4a42`	`#c2ccc6`	`#3b3640`	`#e2dbea`	`#2c3b30`	`#a9bdae`
`text-muted`元信息（编号、计数、时间）；可放在 bg-canvas / sidebar / surface / sunken / selected 上。	`#5f6b64`	`#8c9891`	`#5e5866`	`#b3aabf`	`#526356`	`#889c8d`
`accent`品牌主色的填充：主按钮、选中指示、进度条、完成勾选。贴纸风格里填充一定配 border-strong 描边。	`#1e7f46`	`#45c27a`	`#7edc9c`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`on-accent`accent 填充上的文字和图标。	`#ffffff`	`#07140c`	`#1e1b18`	`#1e1b18`	`#ffffff`	`#06210f`
`accent-text`当文字用的品牌色（链接、当前视图名），放在 bg-canvas / bg-surface 上。	`#1b7540`	`#45c27a`	`#14703f`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`accent-soft`品牌色浅底：选中的筛选条件、成功提示。	`#e3f2e8`	`#173323`	`#d9f6e2`	`#24402f`	`#d6f0df`	`#15301f`
`on-accent-soft`accent-soft 上的文字。	`#145c32`	`#8fddb0`	`#1e1b18`	`#bdf0cd`	`#0b5a2c`	`#6ee7a0`
`danger`紧急、逾期、删除的文字和图标。	`#b93f25`	`#f07a57`	`#b32a12`	`#ff8a70`	`#c22f1c`	`#ff6b57`
`danger-soft`紧急 / 逾期标记的底色。	`#fbe9e4`	`#3a1d16`	`#ff7a5c`	`#ff7a5c`	`#fbe3de`	`#3a1712`
`on-danger-soft`danger-soft 上的文字。	`#9a3119`	`#f5a288`	`#1e1b18`	`#1e1b18`	`#9a2415`	`#ff8a7a`
`warning`高优先级、今天到期的文字和图标。	`#9a5b0e`	`#e3a64a`	`#8a5200`	`#ffc27a`	`#855d00`	`#ffc857`
`warning-soft`高优先级 / 今天到期标记的底色。	`#fbf0dd`	`#33270f`	`#ffb45e`	`#ffb45e`	`#fbefcf`	`#332808`
`on-warning-soft`warning-soft 上的文字。	`#7a4709`	`#edc17e`	`#1e1b18`	`#1e1b18`	`#6b4b00`	`#ffc857`
`info`过滤器语句、链接分享、信息提示的文字。	`#2753b3`	`#8fb0f2`	`#2f5fb3`	`#8fd3ff`	`#0b6e8a`	`#67d4f5`
`timer`正在计时的时间数字和指示点。	`#1b7540`	`#45c27a`	`#9e2559`	`#ff9dbb`	`#0f7a3c`	`#6ee7a0`
`timer-soft`计时器胶囊和卡片的底色。	`#e3f2e8`	`#173323`	`#ff9dbb`	`#ff9dbb`	`#d6f0df`	`#15301f`
`on-timer-soft`timer-soft 上的文字。	`#145c32`	`#8fddb0`	`#1e1b18`	`#1e1b18`	`#0b5a2c`	`#6ee7a0`
`focus-ring`键盘焦点环，2px 实线外加 2px 偏移；在 bg-canvas / surface / sidebar 上至少 3:1。	`#2753b3`	`#8fb0f2`	`#5b3fd9`	`#ffe16a`	`#0b6e8a`	`#ffc857`
`priority-low`优先级「低」的图形标记。	`#7a8680`	`#76837c`	`#7a7383`	`#8e8599`	`#7d8b80`	`#6f8475`
`priority-medium`优先级「中」的图形标记。	`#3e6fb8`	`#7fa2ea`	`#2f5fb3`	`#8fd3ff`	`#2c3b30`	`#a9bdae`
`priority-high`优先级「高」的图形标记。	`#b86a12`	`#e3a64a`	`#b86200`	`#ffb45e`	`#8a6100`	`#ffc857`
`priority-urgent`优先级「紧急 / 立即」的图形标记。	`#c4462b`	`#f07a57`	`#d3401f`	`#ff7a5c`	`#c22f1c`	`#ff6b57`
`label-blue`蓝色标签的底色（用户给标签选的 7 种颜色之一）。	`#e6eefb`	`#18243a`	`#8fd3ff`	`#8fd3ff`	`#ddf0f6`	`#0f2a33`
`on-label-blue`蓝色标签上的文字。	`#2753b3`	`#8fb0f2`	`#1e1b18`	`#1e1b18`	`#0b6e8a`	`#67d4f5`
`label-green`绿色标签的底色（用户给标签选的 7 种颜色之一）。	`#e3f2e8`	`#153122`	`#7edc9c`	`#7edc9c`	`#d6f0df`	`#15301f`
`on-label-green`绿色标签上的文字。	`#1e6b3e`	`#7fd3a0`	`#1e1b18`	`#1e1b18`	`#0b5a2c`	`#6ee7a0`
`label-orange`橙色标签的底色（用户给标签选的 7 种颜色之一）。	`#fcebdd`	`#3a2414`	`#ffb45e`	`#ffb45e`	`#f8eccc`	`#2e240a`
`on-label-orange`橙色标签上的文字。	`#a4480c`	`#f2a86e`	`#1e1b18`	`#1e1b18`	`#7a5600`	`#ffc857`
`label-violet`紫色标签的底色（用户给标签选的 7 种颜色之一）。	`#f0e8fb`	`#2a1e3d`	`#c5b5ff`	`#c5b5ff`	`#e9e3fa`	`#231c3a`
`on-label-violet`紫色标签上的文字。	`#6a3ba8`	`#c3a2f2`	`#1e1b18`	`#1e1b18`	`#6745c7`	`#b69cff`
`label-gray`灰色标签的底色（用户给标签选的 7 种颜色之一）。	`#edefee`	`#232a26`	`#e5e0ec`	`#e5e0ec`	`#e8ece6`	`#18211b`
`on-label-gray`灰色标签上的文字。	`#4d5852`	`#b2bdb6`	`#1e1b18`	`#1e1b18`	`#3e4d42`	`#a9bdae`
`label-pink`粉色标签的底色（用户给标签选的 7 种颜色之一）。	`#fbe6ef`	`#3a1a29`	`#ff9dbb`	`#ff9dbb`	`#f9e1ec`	`#33142a`
`on-label-pink`粉色标签上的文字。	`#a42a5e`	`#f29bc2`	`#1e1b18`	`#1e1b18`	`#a32b66`	`#ff8ac2`
`label-teal`青色标签的底色（用户给标签选的 7 种颜色之一）。	`#dff3f1`	`#123331`	`#c6f36b`	`#c6f36b`	`#d8f1ee`	`#0f2e2a`
`on-label-teal`青色标签上的文字。	`#14665e`	`#7fd6cc`	`#1e1b18`	`#1e1b18`	`#1b6b60`	`#6fe0cf`
`avatar-1`成员头像底色第 1 号，按用户 id 取模分配。	`#24774a`	`#24774a`	`#7edc9c`	`#7edc9c`	`#0f7a3c`	`#6ee7a0`
`avatar-2`成员头像底色第 2 号，按用户 id 取模分配。	`#3563c9`	`#3563c9`	`#8fd3ff`	`#8fd3ff`	`#0b6e8a`	`#67d4f5`
`avatar-3`成员头像底色第 3 号，按用户 id 取模分配。	`#a84f0c`	`#a84f0c`	`#ffb45e`	`#ffb45e`	`#8a6100`	`#ffc857`
`avatar-4`成员头像底色第 4 号，按用户 id 取模分配。	`#7a45b8`	`#7a45b8`	`#c5b5ff`	`#c5b5ff`	`#6745c7`	`#b69cff`
`avatar-5`成员头像底色第 5 号，按用户 id 取模分配。	`#b3334f`	`#b3334f`	`#ff9dbb`	`#ff9dbb`	`#b0306e`	`#ff8ac2`
`on-avatar`头像字母的颜色，放在 avatar-1…5 上。	`#ffffff`	`#ffffff`	`#1e1b18`	`#1e1b18`	`#ffffff`	`#06210f`

字体

青藤 Clean

名称	样例	字号 / 行高 · 字重	用途
`clean-title`	后端 · Rust 重写	22px / 28px · 700	页面 / 项目标题。
`clean-heading`	今天与逾期	15px / 22px · 600	分组标题、区块标题。
`clean-task`	迁移 PostgreSQL schema 与索引	14px / 20px · 500	任务标题。
`clean-body`	把旧版 schema 迁到 PostgreSQL 16，用 sqlx 管理迁移。	14px / 22px · 400	描述、评论、正文。
`clean-caption`	#42 · 今天 18:00 · 评论 5	12px / 16px · 500	元信息、标签、计数。
`clean-timer`	00:42:18	26px / 30px · 700	计时器数字。

萌虎 Sticker

名称	样例	字号 / 行高 · 字重	用途
`sticker-title`	后端 · Rust 重写	32px / 38px · 700	页面 / 项目标题。
`sticker-heading`	今天 & 逾期	17px / 24px · 700	分组标题、区块标题。
`sticker-task`	迁移 PostgreSQL schema 与索引	16px / 22px · 600	任务标题。
`sticker-body`	把旧版 schema 迁到 PostgreSQL 16，用 sqlx 管理迁移。	15px / 22px · 500	描述、评论、正文。
`sticker-caption`	今天 18:00 · 评论 5	13px / 18px · 600	元信息、标签、计数。
`sticker-timer`	00:42:18	40px / 44px · 700	计时器数字。

像素 Pixel

名称	样例	字号 / 行高 · 字重	用途
`pixel-title`	迁移 PostgreSQL schema 与索引	22px / 30px · 700	页面 / 项目标题。
`pixel-heading`	PROJECTS	11px / 16px · 400	分组标题、区块标题。
`pixel-task`	迁移 PostgreSQL schema 与索引	13px / 20px · 500	任务标题。
`pixel-body`	把旧版 schema 迁到 PostgreSQL 16。	13px / 20px · 400	描述、评论、正文。
`pixel-caption`	#42 due 今天18:00 c:5	12px / 16px · 400	元信息、标签、计数。
`pixel-timer`	00:42:18	24px / 28px · 400	计时器数字。

间距

4px 基准，三种风格共用；风格之间的疏密差别由 size 里的行高和控件高度决定。

Token	值	用途
`space-0`	`0px`	无间距。
`space-1`	`4px`	图标与文字之间。
`space-2`	`8px`	控件内边距、标签之间。
`space-3`	`12px`	行内元素之间。
`space-4`	`16px`	卡片内边距、列表左右边距（紧凑）。
`space-5`	`20px`	侧栏内边距。
`space-6`	`24px`	区块之间、页面左右边距。
`space-8`	`32px`	大区块之间。
`space-10`	`40px`	空状态上下留白。
`space-12`	`48px`	页面顶部留白。
`space-16`	`64px`	品牌页留白。

圆角

每种风格一套圆角：青藤柔和、萌虎很圆、像素直角。

Token	值	用途
`radius-clean-sm`	`6px`	按钮、输入框、标签。（clean）
`radius-clean-md`	`8px`	卡片、任务行容器、弹层。（clean）
`radius-clean-lg`	`12px`	对话框、看板分栏、大卡片。（clean）
`radius-sticker-sm`	`10px`	按钮、输入框、标签。（sticker）
`radius-sticker-md`	`16px`	卡片、任务行容器、弹层。（sticker）
`radius-sticker-lg`	`24px`	对话框、看板分栏、大卡片。（sticker）
`radius-pixel-sm`	`0px`	按钮、输入框、标签。（pixel）
`radius-pixel-md`	`0px`	卡片、任务行容器、弹层。（pixel）
`radius-pixel-lg`	`0px`	对话框、看板分栏、大卡片。（pixel）
`radius-pill`	`9999px`	胶囊、圆形头像（三种风格共用）。

阴影

青藤用柔和投影，萌虎用硬阴影（暗色里是薄荷绿），像素只用 1px 描边，不用投影。

Token	青藤 Clean · 亮	青藤 Clean · 暗	萌虎 Sticker · 亮	萌虎 Sticker · 暗	像素 Pixel · 亮	像素 Pixel · 暗	用途
`shadow-card`	`0 1px 2px 0 #1018140f`	`0 1px 2px 0 #00000073`	`3px 3px 0 0 #1e1b18`	`3px 3px 0 0 #7edc9c`	`none`	`none`	静止的卡片、任务行容器。
`shadow-raised`	`0 1px 2px 0 #1018140f, 0 4px 16px 0 #1018140f`	`0 8px 24px 0 #00000059`	`5px 5px 0 0 #1e1b18`	`5px 5px 0 0 #7edc9c`	`0 0 0 1px #0f7a3c`	`0 0 0 1px #6ee7a0`	悬停或拖动中的卡片、下拉菜单。
`shadow-overlay`	`0 12px 40px 0 #10181429`	`0 16px 48px 0 #00000080`	`8px 8px 0 0 #1e1b18`	`8px 8px 0 0 #7edc9c`	`4px 4px 0 0 #0d1a1133`	`4px 4px 0 0 #00000099`	对话框、侧滑面板、命令面板。

描边

描边粗细决定风格气质：萌虎 2.5px。

Token	值	用途
`border-clean`	`1px`	卡片、输入框、按钮描边（clean）。
`focus-clean`	`2px`	焦点环粗细（clean）。
`border-sticker`	`2.5px`	卡片、输入框、按钮描边（sticker）。
`focus-sticker`	`3px`	焦点环粗细（sticker）。
`border-pixel`	`1px`	卡片、输入框、按钮描边（pixel）。
`focus-pixel`	`2px`	焦点环粗细（pixel）。

尺寸

密度：像素最紧凑，萌虎最宽松。触屏端控件最小 44px。

Token	值	用途
`row-clean`	`46px`	任务行最小高度。（clean）
`control-clean`	`32px`	按钮、输入框高度（触屏端最小 44）。（clean）
`sidebar-clean`	`248px`	桌面侧栏宽度。（clean）
`row-sticker`	`58px`	任务行最小高度。（sticker）
`control-sticker`	`40px`	按钮、输入框高度（触屏端最小 44）。（sticker）
`sidebar-sticker`	`264px`	桌面侧栏宽度。（sticker）
`row-pixel`	`32px`	任务行最小高度。（pixel）
`control-pixel`	`26px`	按钮、输入框高度（触屏端最小 44）。（pixel）
`sidebar-pixel`	`260px`	桌面侧栏宽度。（pixel）

图标描边

同一套 24px 线性图标，粗细和端点随风格变化：像素用直角端点。

Token	值	用途
`icon-stroke-clean`	`1.8`	图标描边粗细（clean，端点 round）。
`icon-stroke-sticker`	`2.2`	图标描边粗细（sticker，端点 round）。
`icon-stroke-pixel`	`2`	图标描边粗细（pixel，端点 square）。

时长

尊重 prefers-reduced-motion：开启时所有时长归零。

Token	值	用途
`duration-instant`	`80ms`	像素风格的状态切换、复选框。
`duration-fast`	`120ms`	悬停、按下、标签出现。
`duration-base`	`200ms`	面板展开、卡片移动。
`duration-slow`	`320ms`	模态和侧滑面板进入。

缓动

Token	值	用途
`easing-standard`	`cubic-bezier(0.2, 0, 0, 1)`	青藤：默认缓动。
`easing-enter`	`cubic-bezier(0, 0, 0, 1)`	元素进入。
`easing-exit`	`cubic-bezier(0.3, 0, 1, 1)`	元素离开。
`easing-pop`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	贴纸：带一点回弹，用于完成勾选和贴纸落下。
`easing-linear`	`cubic-bezier(0, 0, 1, 1)`	像素：不做缓动，只用 instant 时长。

层级

Token	值	用途
`z-sticky`	`10`	吸顶表头、状态栏。
`z-drawer`	`20`	侧滑面板。
`z-popover`	`30`	下拉菜单、日期选择器。
`z-modal`	`40`	对话框。
`z-toast`	`50`	通知提示。