{ "name": "BostonIvy", "version": 1, "meta": { "source": "bostonivy-tokens.json (W3C DTCG 2025.10) via build-tokens.mjs" }, "color": { "themes": [ { "id": "clean-light", "name": "青藤 Clean · 亮" }, { "id": "clean-dark", "name": "青藤 Clean · 暗" }, { "id": "sticker-light", "name": "萌虎 Sticker · 亮" }, { "id": "sticker-dark", "name": "萌虎 Sticker · 暗" }, { "id": "pixel-light", "name": "像素 Pixel · 亮" }, { "id": "pixel-dark", "name": "像素 Pixel · 暗" } ], "tokens": [ { "name": "bg-canvas", "value": { "clean-light": "#ffffff", "clean-dark": "#0f1311", "sticker-light": "#f2edff", "sticker-dark": "#1a1722", "pixel-light": "#f3f5f1", "pixel-dark": "#0a0e0b" }, "usage": "主内容区背景。text-primary / text-secondary / text-muted 都可直接放在上面。" }, { "name": "bg-sidebar", "value": { "clean-light": "#f6f8f6", "clean-dark": "#0b0e0c", "sticker-light": "#ffe16a", "sticker-dark": "#2a2338", "pixel-light": "#ffffff", "pixel-dark": "#0f1511" }, "usage": "侧栏、收起的导航条、顶栏。" }, { "name": "bg-surface", "value": { "clean-light": "#ffffff", "clean-dark": "#151a17", "sticker-light": "#ffffff", "sticker-dark": "#26222f", "pixel-light": "#ffffff", "pixel-dark": "#0f1511" }, "usage": "卡片、输入框、任务行容器、弹层。" }, { "name": "bg-sunken", "value": { "clean-light": "#f2f5f3", "clean-dark": "#121714", "sticker-light": "#e9e2ff", "sticker-dark": "#201c29", "pixel-light": "#e8ece6", "pixel-dark": "#131b16" }, "usage": "看板分栏、分组底色、代码块等下沉区域。" }, { "name": "bg-selected", "value": { "clean-light": "#e6f2ea", "clean-dark": "#1a2c21", "sticker-light": "#d9f6e2", "sticker-dark": "#24402f", "pixel-light": "#d6f0df", "pixel-dark": "#15301f" }, "usage": "选中的任务行、当前项目、当前导航项。" }, { "name": "bg-hover", "value": { "clean-light": "#eef2ef", "clean-dark": "#18201b", "sticker-light": "#faf8ff", "sticker-dark": "#2e2939", "pixel-light": "#edf1ec", "pixel-dark": "#121a15" }, "usage": "可点击行和按钮的悬停底色。" }, { "name": "scrim", "value": { "clean-light": "#10181466", "clean-dark": "#000000a6", "sticker-light": "#1e1b1873", "sticker-dark": "#000000b3", "pixel-light": "#0d1a1166", "pixel-dark": "#000000b3" }, "usage": "模态弹层后面的遮罩（带透明度）。" }, { "name": "border-default", "value": { "clean-light": "#e3e8e4", "clean-dark": "#232b26", "sticker-light": "#1e1b18", "sticker-dark": "#ece6ff", "pixel-light": "#cbd3cb", "pixel-dark": "#1e2a22" }, "usage": "卡片和面板边框。贴纸风格里它就是 2.5px 的墨黑描边。" }, { "name": "border-subtle", "value": { "clean-light": "#eef1ef", "clean-dark": "#1b221e", "sticker-light": "#d9d0f5", "sticker-dark": "#3a3348", "pixel-light": "#e1e6e0", "pixel-dark": "#141d17" }, "usage": "列表行之间的分隔线，只做装饰，不承担识别控件的作用。" }, { "name": "border-strong", "value": { "clean-light": "#86928a", "clean-dark": "#5c6a62", "sticker-light": "#1e1b18", "sticker-dark": "#ece6ff", "pixel-light": "#7d8b80", "pixel-dark": "#56695b" }, "usage": "复选框、输入框等控件的边框；在 bg-surface / bg-canvas 上至少 3:1。" }, { "name": "text-primary", "value": { "clean-light": "#17201a", "clean-dark": "#e7ede9", "sticker-light": "#1e1b18", "sticker-dark": "#fbf7ee", "pixel-light": "#0d1a11", "pixel-dark": "#d5e6d9" }, "usage": "正文、任务标题；可放在所有 bg-* 上。" }, { "name": "text-secondary", "value": { "clean-light": "#3e4a42", "clean-dark": "#c2ccc6", "sticker-light": "#3b3640", "sticker-dark": "#e2dbea", "pixel-light": "#2c3b30", "pixel-dark": "#a9bdae" }, "usage": "次要正文、侧栏导航文字；可放在所有 bg-* 上。" }, { "name": "text-muted", "value": { "clean-light": "#5f6b64", "clean-dark": "#8c9891", "sticker-light": "#5e5866", "sticker-dark": "#b3aabf", "pixel-light": "#526356", "pixel-dark": "#889c8d" }, "usage": "元信息（编号、计数、时间）；可放在 bg-canvas / sidebar / surface / sunken / selected 上。" }, { "name": "accent", "value": { "clean-light": "#1e7f46", "clean-dark": "#45c27a", "sticker-light": "#7edc9c", "sticker-dark": "#7edc9c", "pixel-light": "#0f7a3c", "pixel-dark": "#6ee7a0" }, "usage": "品牌主色的填充：主按钮、选中指示、进度条、完成勾选。贴纸风格里填充一定配 border-strong 描边。" }, { "name": "on-accent", "value": { "clean-light": "#ffffff", "clean-dark": "#07140c", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#ffffff", "pixel-dark": "#06210f" }, "usage": "accent 填充上的文字和图标。" }, { "name": "accent-text", "value": { "clean-light": "#1b7540", "clean-dark": "#45c27a", "sticker-light": "#14703f", "sticker-dark": "#7edc9c", "pixel-light": "#0f7a3c", "pixel-dark": "#6ee7a0" }, "usage": "当文字用的品牌色（链接、当前视图名），放在 bg-canvas / bg-surface 上。" }, { "name": "accent-soft", "value": { "clean-light": "#e3f2e8", "clean-dark": "#173323", "sticker-light": "#d9f6e2", "sticker-dark": "#24402f", "pixel-light": "#d6f0df", "pixel-dark": "#15301f" }, "usage": "品牌色浅底：选中的筛选条件、成功提示。" }, { "name": "on-accent-soft", "value": { "clean-light": "#145c32", "clean-dark": "#8fddb0", "sticker-light": "#1e1b18", "sticker-dark": "#bdf0cd", "pixel-light": "#0b5a2c", "pixel-dark": "#6ee7a0" }, "usage": "accent-soft 上的文字。" }, { "name": "danger", "value": { "clean-light": "#b93f25", "clean-dark": "#f07a57", "sticker-light": "#b32a12", "sticker-dark": "#ff8a70", "pixel-light": "#c22f1c", "pixel-dark": "#ff6b57" }, "usage": "紧急、逾期、删除的文字和图标。" }, { "name": "danger-soft", "value": { "clean-light": "#fbe9e4", "clean-dark": "#3a1d16", "sticker-light": "#ff7a5c", "sticker-dark": "#ff7a5c", "pixel-light": "#fbe3de", "pixel-dark": "#3a1712" }, "usage": "紧急 / 逾期标记的底色。" }, { "name": "on-danger-soft", "value": { "clean-light": "#9a3119", "clean-dark": "#f5a288", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#9a2415", "pixel-dark": "#ff8a7a" }, "usage": "danger-soft 上的文字。" }, { "name": "warning", "value": { "clean-light": "#9a5b0e", "clean-dark": "#e3a64a", "sticker-light": "#8a5200", "sticker-dark": "#ffc27a", "pixel-light": "#855d00", "pixel-dark": "#ffc857" }, "usage": "高优先级、今天到期的文字和图标。" }, { "name": "warning-soft", "value": { "clean-light": "#fbf0dd", "clean-dark": "#33270f", "sticker-light": "#ffb45e", "sticker-dark": "#ffb45e", "pixel-light": "#fbefcf", "pixel-dark": "#332808" }, "usage": "高优先级 / 今天到期标记的底色。" }, { "name": "on-warning-soft", "value": { "clean-light": "#7a4709", "clean-dark": "#edc17e", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#6b4b00", "pixel-dark": "#ffc857" }, "usage": "warning-soft 上的文字。" }, { "name": "info", "value": { "clean-light": "#2753b3", "clean-dark": "#8fb0f2", "sticker-light": "#2f5fb3", "sticker-dark": "#8fd3ff", "pixel-light": "#0b6e8a", "pixel-dark": "#67d4f5" }, "usage": "过滤器语句、链接分享、信息提示的文字。" }, { "name": "timer", "value": { "clean-light": "#1b7540", "clean-dark": "#45c27a", "sticker-light": "#9e2559", "sticker-dark": "#ff9dbb", "pixel-light": "#0f7a3c", "pixel-dark": "#6ee7a0" }, "usage": "正在计时的时间数字和指示点。" }, { "name": "timer-soft", "value": { "clean-light": "#e3f2e8", "clean-dark": "#173323", "sticker-light": "#ff9dbb", "sticker-dark": "#ff9dbb", "pixel-light": "#d6f0df", "pixel-dark": "#15301f" }, "usage": "计时器胶囊和卡片的底色。" }, { "name": "on-timer-soft", "value": { "clean-light": "#145c32", "clean-dark": "#8fddb0", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#0b5a2c", "pixel-dark": "#6ee7a0" }, "usage": "timer-soft 上的文字。" }, { "name": "focus-ring", "value": { "clean-light": "#2753b3", "clean-dark": "#8fb0f2", "sticker-light": "#5b3fd9", "sticker-dark": "#ffe16a", "pixel-light": "#0b6e8a", "pixel-dark": "#ffc857" }, "usage": "键盘焦点环，2px 实线外加 2px 偏移；在 bg-canvas / surface / sidebar 上至少 3:1。" }, { "name": "priority-low", "value": { "clean-light": "#7a8680", "clean-dark": "#76837c", "sticker-light": "#7a7383", "sticker-dark": "#8e8599", "pixel-light": "#7d8b80", "pixel-dark": "#6f8475" }, "usage": "优先级「低」的图形标记。" }, { "name": "priority-medium", "value": { "clean-light": "#3e6fb8", "clean-dark": "#7fa2ea", "sticker-light": "#2f5fb3", "sticker-dark": "#8fd3ff", "pixel-light": "#2c3b30", "pixel-dark": "#a9bdae" }, "usage": "优先级「中」的图形标记。" }, { "name": "priority-high", "value": { "clean-light": "#b86a12", "clean-dark": "#e3a64a", "sticker-light": "#b86200", "sticker-dark": "#ffb45e", "pixel-light": "#8a6100", "pixel-dark": "#ffc857" }, "usage": "优先级「高」的图形标记。" }, { "name": "priority-urgent", "value": { "clean-light": "#c4462b", "clean-dark": "#f07a57", "sticker-light": "#d3401f", "sticker-dark": "#ff7a5c", "pixel-light": "#c22f1c", "pixel-dark": "#ff6b57" }, "usage": "优先级「紧急 / 立即」的图形标记。" }, { "name": "label-blue", "value": { "clean-light": "#e6eefb", "clean-dark": "#18243a", "sticker-light": "#8fd3ff", "sticker-dark": "#8fd3ff", "pixel-light": "#ddf0f6", "pixel-dark": "#0f2a33" }, "usage": "蓝色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-blue", "value": { "clean-light": "#2753b3", "clean-dark": "#8fb0f2", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#0b6e8a", "pixel-dark": "#67d4f5" }, "usage": "蓝色标签上的文字。" }, { "name": "label-green", "value": { "clean-light": "#e3f2e8", "clean-dark": "#153122", "sticker-light": "#7edc9c", "sticker-dark": "#7edc9c", "pixel-light": "#d6f0df", "pixel-dark": "#15301f" }, "usage": "绿色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-green", "value": { "clean-light": "#1e6b3e", "clean-dark": "#7fd3a0", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#0b5a2c", "pixel-dark": "#6ee7a0" }, "usage": "绿色标签上的文字。" }, { "name": "label-orange", "value": { "clean-light": "#fcebdd", "clean-dark": "#3a2414", "sticker-light": "#ffb45e", "sticker-dark": "#ffb45e", "pixel-light": "#f8eccc", "pixel-dark": "#2e240a" }, "usage": "橙色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-orange", "value": { "clean-light": "#a4480c", "clean-dark": "#f2a86e", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#7a5600", "pixel-dark": "#ffc857" }, "usage": "橙色标签上的文字。" }, { "name": "label-violet", "value": { "clean-light": "#f0e8fb", "clean-dark": "#2a1e3d", "sticker-light": "#c5b5ff", "sticker-dark": "#c5b5ff", "pixel-light": "#e9e3fa", "pixel-dark": "#231c3a" }, "usage": "紫色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-violet", "value": { "clean-light": "#6a3ba8", "clean-dark": "#c3a2f2", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#6745c7", "pixel-dark": "#b69cff" }, "usage": "紫色标签上的文字。" }, { "name": "label-gray", "value": { "clean-light": "#edefee", "clean-dark": "#232a26", "sticker-light": "#e5e0ec", "sticker-dark": "#e5e0ec", "pixel-light": "#e8ece6", "pixel-dark": "#18211b" }, "usage": "灰色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-gray", "value": { "clean-light": "#4d5852", "clean-dark": "#b2bdb6", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#3e4d42", "pixel-dark": "#a9bdae" }, "usage": "灰色标签上的文字。" }, { "name": "label-pink", "value": { "clean-light": "#fbe6ef", "clean-dark": "#3a1a29", "sticker-light": "#ff9dbb", "sticker-dark": "#ff9dbb", "pixel-light": "#f9e1ec", "pixel-dark": "#33142a" }, "usage": "粉色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-pink", "value": { "clean-light": "#a42a5e", "clean-dark": "#f29bc2", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#a32b66", "pixel-dark": "#ff8ac2" }, "usage": "粉色标签上的文字。" }, { "name": "label-teal", "value": { "clean-light": "#dff3f1", "clean-dark": "#123331", "sticker-light": "#c6f36b", "sticker-dark": "#c6f36b", "pixel-light": "#d8f1ee", "pixel-dark": "#0f2e2a" }, "usage": "青色标签的底色（用户给标签选的 7 种颜色之一）。" }, { "name": "on-label-teal", "value": { "clean-light": "#14665e", "clean-dark": "#7fd6cc", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#1b6b60", "pixel-dark": "#6fe0cf" }, "usage": "青色标签上的文字。" }, { "name": "avatar-1", "value": { "clean-light": "#24774a", "clean-dark": "#24774a", "sticker-light": "#7edc9c", "sticker-dark": "#7edc9c", "pixel-light": "#0f7a3c", "pixel-dark": "#6ee7a0" }, "usage": "成员头像底色第 1 号，按用户 id 取模分配。" }, { "name": "avatar-2", "value": { "clean-light": "#3563c9", "clean-dark": "#3563c9", "sticker-light": "#8fd3ff", "sticker-dark": "#8fd3ff", "pixel-light": "#0b6e8a", "pixel-dark": "#67d4f5" }, "usage": "成员头像底色第 2 号，按用户 id 取模分配。" }, { "name": "avatar-3", "value": { "clean-light": "#a84f0c", "clean-dark": "#a84f0c", "sticker-light": "#ffb45e", "sticker-dark": "#ffb45e", "pixel-light": "#8a6100", "pixel-dark": "#ffc857" }, "usage": "成员头像底色第 3 号，按用户 id 取模分配。" }, { "name": "avatar-4", "value": { "clean-light": "#7a45b8", "clean-dark": "#7a45b8", "sticker-light": "#c5b5ff", "sticker-dark": "#c5b5ff", "pixel-light": "#6745c7", "pixel-dark": "#b69cff" }, "usage": "成员头像底色第 4 号，按用户 id 取模分配。" }, { "name": "avatar-5", "value": { "clean-light": "#b3334f", "clean-dark": "#b3334f", "sticker-light": "#ff9dbb", "sticker-dark": "#ff9dbb", "pixel-light": "#b0306e", "pixel-dark": "#ff8ac2" }, "usage": "成员头像底色第 5 号，按用户 id 取模分配。" }, { "name": "on-avatar", "value": { "clean-light": "#ffffff", "clean-dark": "#ffffff", "sticker-light": "#1e1b18", "sticker-dark": "#1e1b18", "pixel-light": "#ffffff", "pixel-dark": "#06210f" }, "usage": "头像字母的颜色，放在 avatar-1…5 上。" } ] }, "type": { "fonts": [], "families": { "clean": "Inter, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'PingFang HK', 'Noto Sans CJK HK', 'Noto Sans HK', 'Source Han Sans HC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans CJK JP', 'Noto Sans JP', 'Source Han Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Noto Sans Bengali', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', 'Segoe UI', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', 'Geeza Pro', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif", "sticker": "Fredoka, 'Yuanti SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'PingFang HK', 'Noto Sans CJK HK', 'Noto Sans HK', 'Source Han Sans HC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans CJK JP', 'Noto Sans JP', 'Source Han Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Noto Sans Bengali', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', 'Segoe UI', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', 'Geeza Pro', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif", "pixel": "'JetBrains Mono', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'PingFang HK', 'Noto Sans CJK HK', 'Noto Sans HK', 'Source Han Sans HC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans CJK JP', 'Noto Sans JP', 'Source Han Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Noto Sans Bengali', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', 'Segoe UI', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', 'Geeza Pro', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, monospace", "pixel-display": "Silkscreen, 'JetBrains Mono', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'PingFang HK', 'Noto Sans CJK HK', 'Noto Sans HK', 'Source Han Sans HC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans CJK JP', 'Noto Sans JP', 'Source Han Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Noto Sans Bengali', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', 'Segoe UI', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', 'Geeza Pro', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, monospace", "mono": "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', 'PingFang HK', 'Noto Sans CJK HK', 'Noto Sans HK', 'Source Han Sans HC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans CJK JP', 'Noto Sans JP', 'Source Han Sans JP', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Noto Sans Bengali', Thonburi, 'Leelawadee UI', 'Noto Sans Thai', 'Segoe UI', 'Noto Sans Arabic UI', 'Noto Naskh Arabic UI', 'Noto Sans Arabic', 'Geeza Pro', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, monospace" }, "groups": [ { "name": "青藤 Clean", "family": "clean", "note": "青藤 Clean：安静克制的效率工具。白底，品牌绿只用在选中、进度和完成；秋叶红只用在紧急和逾期。", "styles": [ { "name": "clean-title", "fontSize": "22px", "lineHeight": "28px", "fontWeight": 700, "letterSpacing": "-0.01em", "sample": "后端 · Rust 重写", "usage": "页面 / 项目标题。" }, { "name": "clean-heading", "fontSize": "15px", "lineHeight": "22px", "fontWeight": 600, "sample": "今天与逾期", "usage": "分组标题、区块标题。" }, { "name": "clean-task", "fontSize": "14px", "lineHeight": "20px", "fontWeight": 500, "sample": "迁移 PostgreSQL schema 与索引", "usage": "任务标题。" }, { "name": "clean-body", "fontSize": "14px", "lineHeight": "22px", "fontWeight": 400, "sample": "把旧版 schema 迁到 PostgreSQL 16，用 sqlx 管理迁移。", "usage": "描述、评论、正文。" }, { "name": "clean-caption", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 500, "sample": "#42 · 今天 18:00 · 评论 5", "usage": "元信息、标签、计数。" }, { "name": "clean-timer", "fontSize": "26px", "lineHeight": "30px", "fontWeight": 700, "letterSpacing": "-0.01em", "sample": "00:42:18", "usage": "计时器数字。" } ] }, { "name": "萌虎 Sticker", "family": "sticker", "note": "萌虎 Sticker：粗描边、硬阴影、糖果色。完成任务像贴上一枚贴纸。", "styles": [ { "name": "sticker-title", "fontSize": "32px", "lineHeight": "38px", "fontWeight": 700, "sample": "后端 · Rust 重写", "usage": "页面 / 项目标题。" }, { "name": "sticker-heading", "fontSize": "17px", "lineHeight": "24px", "fontWeight": 700, "sample": "今天 & 逾期", "usage": "分组标题、区块标题。" }, { "name": "sticker-task", "fontSize": "16px", "lineHeight": "22px", "fontWeight": 600, "sample": "迁移 PostgreSQL schema 与索引", "usage": "任务标题。" }, { "name": "sticker-body", "fontSize": "15px", "lineHeight": "22px", "fontWeight": 500, "sample": "把旧版 schema 迁到 PostgreSQL 16，用 sqlx 管理迁移。", "usage": "描述、评论、正文。" }, { "name": "sticker-caption", "fontSize": "13px", "lineHeight": "18px", "fontWeight": 600, "sample": "今天 18:00 · 评论 5", "usage": "元信息、标签、计数。" }, { "name": "sticker-timer", "fontSize": "40px", "lineHeight": "44px", "fontWeight": 700, "sample": "00:42:18", "usage": "计时器数字。" } ] }, { "name": "像素 Pixel", "family": "pixel", "note": "像素 Pixel：等宽字体、像素小虎、快捷键提示常驻，信息密度最高，暗色是主场。", "styles": [ { "name": "pixel-title", "fontSize": "22px", "lineHeight": "30px", "fontWeight": 700, "sample": "迁移 PostgreSQL schema 与索引", "usage": "页面 / 项目标题。" }, { "name": "pixel-heading", "family": "pixel-display", "fontSize": "11px", "lineHeight": "16px", "fontWeight": 400, "letterSpacing": "0.06em", "sample": "PROJECTS", "usage": "分组标题、区块标题。" }, { "name": "pixel-task", "fontSize": "13px", "lineHeight": "20px", "fontWeight": 500, "sample": "迁移 PostgreSQL schema 与索引", "usage": "任务标题。" }, { "name": "pixel-body", "fontSize": "13px", "lineHeight": "20px", "fontWeight": 400, "sample": "把旧版 schema 迁到 PostgreSQL 16。", "usage": "描述、评论、正文。" }, { "name": "pixel-caption", "fontSize": "12px", "lineHeight": "16px", "fontWeight": 400, "sample": "#42 due 今天18:00 c:5", "usage": "元信息、标签、计数。" }, { "name": "pixel-timer", "family": "pixel-display", "fontSize": "24px", "lineHeight": "28px", "fontWeight": 400, "sample": "00:42:18", "usage": "计时器数字。" } ] } ] }, "spacing": { "note": "4px 基准，三种风格共用；风格之间的疏密差别由 size 里的行高和控件高度决定。", "tokens": [ { "name": "space-0", "value": "0px", "usage": "无间距。" }, { "name": "space-1", "value": "4px", "usage": "图标与文字之间。" }, { "name": "space-2", "value": "8px", "usage": "控件内边距、标签之间。" }, { "name": "space-3", "value": "12px", "usage": "行内元素之间。" }, { "name": "space-4", "value": "16px", "usage": "卡片内边距、列表左右边距（紧凑）。" }, { "name": "space-5", "value": "20px", "usage": "侧栏内边距。" }, { "name": "space-6", "value": "24px", "usage": "区块之间、页面左右边距。" }, { "name": "space-8", "value": "32px", "usage": "大区块之间。" }, { "name": "space-10", "value": "40px", "usage": "空状态上下留白。" }, { "name": "space-12", "value": "48px", "usage": "页面顶部留白。" }, { "name": "space-16", "value": "64px", "usage": "品牌页留白。" } ] }, "radius": { "note": "每种风格一套圆角：青藤柔和、萌虎很圆、像素直角。", "tokens": [ { "name": "radius-clean-sm", "value": "6px", "usage": "按钮、输入框、标签。（clean）" }, { "name": "radius-clean-md", "value": "8px", "usage": "卡片、任务行容器、弹层。（clean）" }, { "name": "radius-clean-lg", "value": "12px", "usage": "对话框、看板分栏、大卡片。（clean）" }, { "name": "radius-sticker-sm", "value": "10px", "usage": "按钮、输入框、标签。（sticker）" }, { "name": "radius-sticker-md", "value": "16px", "usage": "卡片、任务行容器、弹层。（sticker）" }, { "name": "radius-sticker-lg", "value": "24px", "usage": "对话框、看板分栏、大卡片。（sticker）" }, { "name": "radius-pixel-sm", "value": "0px", "usage": "按钮、输入框、标签。（pixel）" }, { "name": "radius-pixel-md", "value": "0px", "usage": "卡片、任务行容器、弹层。（pixel）" }, { "name": "radius-pixel-lg", "value": "0px", "usage": "对话框、看板分栏、大卡片。（pixel）" }, { "name": "radius-pill", "value": "9999px", "usage": "胶囊、圆形头像（三种风格共用）。" } ] }, "shadow": { "note": "青藤用柔和投影，萌虎用硬阴影（暗色里是薄荷绿），像素只用 1px 描边，不用投影。", "tokens": [ { "name": "shadow-card", "value": { "clean-light": "0 1px 2px 0 #1018140f", "clean-dark": "0 1px 2px 0 #00000073", "sticker-light": "3px 3px 0 0 #1e1b18", "sticker-dark": "3px 3px 0 0 #7edc9c", "pixel-light": "none", "pixel-dark": "none" }, "usage": "静止的卡片、任务行容器。" }, { "name": "shadow-raised", "value": { "clean-light": "0 1px 2px 0 #1018140f, 0 4px 16px 0 #1018140f", "clean-dark": "0 8px 24px 0 #00000059", "sticker-light": "5px 5px 0 0 #1e1b18", "sticker-dark": "5px 5px 0 0 #7edc9c", "pixel-light": "0 0 0 1px #0f7a3c", "pixel-dark": "0 0 0 1px #6ee7a0" }, "usage": "悬停或拖动中的卡片、下拉菜单。" }, { "name": "shadow-overlay", "value": { "clean-light": "0 12px 40px 0 #10181429", "clean-dark": "0 16px 48px 0 #00000080", "sticker-light": "8px 8px 0 0 #1e1b18", "sticker-dark": "8px 8px 0 0 #7edc9c", "pixel-light": "4px 4px 0 0 #0d1a1133", "pixel-dark": "4px 4px 0 0 #00000099" }, "usage": "对话框、侧滑面板、命令面板。" } ] }, "borderWidth": { "note": "描边粗细决定风格气质：萌虎 2.5px。", "tokens": [ { "name": "border-clean", "value": "1px", "usage": "卡片、输入框、按钮描边（clean）。" }, { "name": "focus-clean", "value": "2px", "usage": "焦点环粗细（clean）。" }, { "name": "border-sticker", "value": "2.5px", "usage": "卡片、输入框、按钮描边（sticker）。" }, { "name": "focus-sticker", "value": "3px", "usage": "焦点环粗细（sticker）。" }, { "name": "border-pixel", "value": "1px", "usage": "卡片、输入框、按钮描边（pixel）。" }, { "name": "focus-pixel", "value": "2px", "usage": "焦点环粗细（pixel）。" } ] }, "size": { "note": "密度：像素最紧凑，萌虎最宽松。触屏端控件最小 44px。", "tokens": [ { "name": "row-clean", "value": "46px", "usage": "任务行最小高度。（clean）" }, { "name": "control-clean", "value": "32px", "usage": "按钮、输入框高度（触屏端最小 44）。（clean）" }, { "name": "sidebar-clean", "value": "248px", "usage": "桌面侧栏宽度。（clean）" }, { "name": "row-sticker", "value": "58px", "usage": "任务行最小高度。（sticker）" }, { "name": "control-sticker", "value": "40px", "usage": "按钮、输入框高度（触屏端最小 44）。（sticker）" }, { "name": "sidebar-sticker", "value": "264px", "usage": "桌面侧栏宽度。（sticker）" }, { "name": "row-pixel", "value": "32px", "usage": "任务行最小高度。（pixel）" }, { "name": "control-pixel", "value": "26px", "usage": "按钮、输入框高度（触屏端最小 44）。（pixel）" }, { "name": "sidebar-pixel", "value": "260px", "usage": "桌面侧栏宽度。（pixel）" } ] }, "iconStroke": { "note": "同一套 24px 线性图标，粗细和端点随风格变化：像素用直角端点。", "tokens": [ { "name": "icon-stroke-clean", "value": "1.8", "usage": "图标描边粗细（clean，端点 round）。" }, { "name": "icon-stroke-sticker", "value": "2.2", "usage": "图标描边粗细（sticker，端点 round）。" }, { "name": "icon-stroke-pixel", "value": "2", "usage": "图标描边粗细（pixel，端点 square）。" } ] }, "duration": { "note": "尊重 prefers-reduced-motion：开启时所有时长归零。", "tokens": [ { "name": "duration-instant", "value": "80ms", "usage": "像素风格的状态切换、复选框。" }, { "name": "duration-fast", "value": "120ms", "usage": "悬停、按下、标签出现。" }, { "name": "duration-base", "value": "200ms", "usage": "面板展开、卡片移动。" }, { "name": "duration-slow", "value": "320ms", "usage": "模态和侧滑面板进入。" } ] }, "easing": { "tokens": [ { "name": "easing-standard", "value": "cubic-bezier(0.2, 0, 0, 1)", "usage": "青藤：默认缓动。" }, { "name": "easing-enter", "value": "cubic-bezier(0, 0, 0, 1)", "usage": "元素进入。" }, { "name": "easing-exit", "value": "cubic-bezier(0.3, 0, 1, 1)", "usage": "元素离开。" }, { "name": "easing-pop", "value": "cubic-bezier(0.34, 1.56, 0.64, 1)", "usage": "贴纸：带一点回弹，用于完成勾选和贴纸落下。" }, { "name": "easing-linear", "value": "cubic-bezier(0, 0, 1, 1)", "usage": "像素：不做缓动，只用 instant 时长。" } ] }, "zIndex": { "tokens": [ { "name": "z-sticky", "value": "10", "usage": "吸顶表头、状态栏。" }, { "name": "z-drawer", "value": "20", "usage": "侧滑面板。" }, { "name": "z-popover", "value": "30", "usage": "下拉菜单、日期选择器。" }, { "name": "z-modal", "value": "40", "usage": "对话框。" }, { "name": "z-toast", "value": "50", "usage": "通知提示。" } ] } }