图标、插画与动效
图标
- 只用一套 24×24 线性图标（
assets/Icons，35 个），四周留 2 单位，主体在 20×20 内。播放和停止两个是实心的。 - 描边粗细和端点随风格变：青藤 1.8 圆头，萌虎 2.2 圆头，像素 2 直角端点、尖角连接。Web 端由
--icon-stroke、--icon-cap、--icon-join控制，Flutter 端读BiShape.iconStroke。 - 图标颜色跟随文字：代码里内联 SVG，用
stroke="currentColor"。资产库里的 SVG 文件用墨色#17201A是为了预览，引用时改成currentColor。 - 常用尺寸：16（行内、按钮）、18（导航）、20（工具栏）、24（空状态、大按钮）。
- 只有图标、没有文字的按钮必须写
aria-label。导航、视图切换、筛选这类入口要有文字，不要只放图标。 - 不用 emoji 充当图标。
- 名字按含义起，不按形状：
priority而不是 flag，attachment而不是 paperclip。四种视图是view-list、view-table、view-gantt、view-kanban。 - 从右往左的界面里，7 个指向阅读方向的图标要水平翻转：
chevron-right、comment、label、relation、view-list、view-gantt、view-kanban。时钟、播放、循环、勾这类图标不翻转。Web 加bi-mirror-rtl类，Flutter 的BiIcon自动处理，详见「多语言与从右往左」。
插画与空状态
| 风格 | 插画 | 标题 | 说明 |
|---|---|---|---|
| 青藤 | 小老虎从挂满爬山虎的墙头探出脑袋 | 这面墙还空着 | 没有待办任务。按 N 新建一个，或者去别的项目转转。 |
| 萌虎 | 闭眼笑的小老虎，旁边一枚打勾贴纸和几片糖果色叶子 | 全部搞定！ | 今天的贴纸都贴满啦，去喝口水吧。 |
| 像素 | 闭眼打盹的像素小虎，头上飘着 zZ | 0 tasks. |
$ bivy ls --today → 空。按 o 新建任务。 |
- 空状态 = 插画 + 一句标题 + 一句说明 + 至多一个主操作。插画宽 240，标题用
heading，说明用body。 - 搜索无结果、权限不足、离线这几种情况用同一个结构，但插画换成小尺寸主标，不重复用庆祝类插画。
- 插画只能用吉祥物和爬山虎叶子两种元素，不画人物，也不画其他动物。
- 新插画按对应风格的吉祥物画法出图：青藤是扁平色块，萌虎是白边加墨线的贴纸，像素是 15×15 网格放大，像素插画画布宽最多 22 格。
动效
| 风格 | 时长 | 缓动 | 气质 |
|---|---|---|---|
| 青藤 | duration-fast 120ms；面板 duration-base 200ms |
easing-standard |
平稳、几乎察觉不到 |
| 萌虎 | 同上 | 完成勾选、卡片落下用 easing-pop（带回弹），其余用 easing-standard |
有一点弹性和仪式感 |
| 像素 | duration-instant 80ms |
直接切换；计时器圆点用 steps(2) 闪烁 |
像终端一样干脆 |
- 动效只用来说明「东西从哪来、到哪去」：面板滑入、卡片换列、勾选完成。不要做纯装饰的循环动画；计时器的呼吸点是唯一的例外，它表示「正在计时」。
- 完成任务：勾选框填色，然后标题加删除线，200ms 后这一行移到「已完成」分组。萌虎额外让勾选框旋转 −6° 并轻微放大。
- 拖动看板卡片时卡片抬起，用
shadow-raised；萌虎倾斜 3°，像素改成琥珀色描边。 - 用户开启「减少动态效果」时，所有时长归零，计时器圆点不再闪烁，改为常亮。