BostonIvy 爬山虎设计白皮书

指南 01品牌与命名指南 02吉祥物与 Logo 指南 03风格切换指南 04色彩指南 05字体指南 06布局指南 07图标、插画与动效指南 08无障碍指南 09Design tokens 交付指南 10多语言与从右往左资源组件 · 15 资源素材 · 55 资源Tokens · 53 色 × 6 主题

爬山虎（BostonIvy）是一个自托管、MIT 协议的待办与项目管理产品。这套设计系统同时服务 BostonIvy Web（bostonivy-web）、BostonIvy macOS（bostonivy-macos）和 BostonIvy Android（bostonivy-android）；BostonIvy OS（bostonivy-os）只用到其中的命名规则。

界面有三种可切换的风格：青藤 Clean、萌虎 Sticker、像素 Pixel，每种都有亮色和暗色，一共 6 套主题。页面右上角的主题菜单可以逐一切换，所有组件预览会跟着变。

主题模型

主题 id 写作 <style>-<mode>：clean-light、clean-dark、sticker-light、sticker-dark、pixel-light、pixel-dark。
默认是 clean，明暗跟随系统。用户在「设置 › 外观」里改，用 ThemeSwitcher。
Web 端把主题 id 写在 <html data-theme="…"> 上，一个文档只用一套主题。Flutter 端调用 bostonIvyTheme(BiStyle.sticker, Brightness.dark)。
三种风格只换外观，不换结构。信息架构、页面分区、组件清单、快捷键和文案含义在所有风格里都一样。

使用规则

颜色只用语义 token，不写色值。正文用 text-primary，次要文字用 text-secondary，编号和时间这类元信息用 text-muted。这三个都可以放在任何 bg-* 上，6 套主题都已验证达到 4.5:1。
填充色上的文字一律用配套的 on-* token：accent 上用 on-accent，danger-soft 上用 on-danger-soft，标签 label-blue 上用 on-label-blue。不要直接写白色或黑色。
品牌绿 accent 只用于三件事：主操作、选中状态、完成和进度。当文字用时换成 accent-text。
紧急、逾期、删除用 danger；高优先级和今天到期用 warning。这一对颜色取自爬山虎秋天由绿转红。颜色不能是唯一的信号：优先级同时写出「高」「紧急」或 !!!，逾期同时写出「逾期 1 天」。
键盘焦点统一用 focus-ring，线宽取风格的 focus-*，外偏移 2px。
圆角、描边、阴影、密度、字体都用风格别名：--radius-sm/md/lg、--border-width、--shadow-card/raised/overlay、--row-height、--control-height、--font-ui、--type-task 等。这些别名由 bundle.css 按当前风格解析，组件不认具体是哪种风格。
只有下表里这几处允许按风格换写法，其余一律走 token。

部位	青藤	萌虎	像素
完成勾选	圆圈，按优先级上色	圆角方块，2.5px 墨线	文本 `[ ]` / `[x]`
优先级	小旗加文字	胶囊加 `!!`	只写 `!!!!`
标签	浅色底小方签	带描边的糖果色胶囊	`#标签`，直角
指派人	实心圆头像	粉彩头像加描边	`@林` 文本
吉祥物	扁平小老虎	白边贴纸小老虎	15×15 像素小老虎
空状态口吻	安静	活泼	终端输出

内容基础

中文名「爬山虎」，英文名「BostonIvy」（一个词，B 和 I 大写）。中英并列时中文在前：「爬山虎 BostonIvy」。仓库名、文件名、包名一律小写，例如 bostonivy-web、bostonivy-tokens.json。
称呼用户用「你」。按钮写动词：「新建任务」「分享」「停止」，不要写「确定」。
句子短，说清楚发生了什么、接下来怎么做。错误提示示例：「附件超过 20 MB，压缩后再试，或者换成链接。」
中文用全角标点，中英文和数字之间加一个空格；日期写「今天 18:00」「10月28日」「逾期 1 天」。
不用 emoji，萌虎风格也不用；活泼感靠贴纸插画和配色来。

视觉基础

色彩：53 个语义 token × 6 套主题，每对文字和底色都检查过 WCAG 2.2 AA。详见「色彩」。
字体：青藤 Inter，萌虎 Fredoka，像素 JetBrains Mono 加 Silkscreen。品牌字体只管拉丁字母，中文、日文、阿拉伯文等按界面语言回退到系统字体，行高和字距也跟着文字系统变。详见「字体」和「多语言与从右往左」。
间距：4px 阶梯（space-1 到 space-16），三种风格共用。疏密差别靠 row-* 和 control-* 决定：像素 32px 行高，青藤 46px，萌虎 58px。
圆角与描边：青藤 6/8/12 圆角、1px 描边；萌虎 10/16/24 圆角、2.5px 墨线；像素全部直角、1px 描边。
阴影：青藤用柔和投影；萌虎用硬阴影，暗色里换成薄荷绿；像素不用投影，浮起的元素只加 1px 描边。
动效：青藤 120ms 标准缓动；萌虎完成勾选和卡片落下时带一点回弹；像素只做 80ms 的直接切换。开启「减少动态效果」时一律不动。

图标与插画

只用一套 24px 线性图标（assets/Icons，共 35 个），描边粗细随风格变：青藤 1.8，萌虎 2.2，像素 2 且用直角端点。代码里通过 Icon 组件内联使用，颜色跟随 currentColor。
吉祥物是一只长满爬山虎叶子的绿色小老虎：额头上的「王」字换成一片三裂叶，头顶两片绿叶加一片红叶。主品牌标固定用青藤版本，见「吉祥物与 Logo」。
空状态由插画、一句标题、一句说明和一个操作组成，用 EmptyState。

文件

Design tokens 的单一来源是 assets/Tokens/bostonivy-tokens.json（W3C DTCG 2025.10）。build-tokens.mjs 从它生成 bostonivy-tokens.css（Web）、bostonivy_theme.dart（Flutter）、本页读取的 tokens.json 和对比度报告。改 token 只改这一个文件，再重新构建。
Logo、App 图标、插画和图标都是 SVG，在 assets/ 的各组里，可以直接下载。

BostonIvy 爬山虎 设计白皮书