1 · 图标全集（38 个）

来源 Tabler Icons (MIT)。mask-image + currentColor，不是字体——Tabler 是描边图标，转字体要先展开轮廓，漏了会生成空字形。

weight
poop
food
symptom
medicine
cost
vaccine
deworm
photo
home
plan
record
report
community
back
next
plus
check
close
trash
edit
share
comment
like
like-on
more
bell
settings
ai
warn
doc
note
book
trend
cat
dog
user
clock

2 · 尺寸可读性

32rpx(16px) 是正文里最常用的尺寸，重点看这一档描边够不够清楚。

16px / 32rpx 20px / 40rpx 24px / 48rpx 28px / 56rpx

3 · tabBar

首页
计划
记录
报告
社区

4 · 圆角 5 档

xs 12 sm 20 md 28 lg 40 full

5 · 字号 6 档 / 字重只留两档

2xl 48 · 页面大标题
xl 40 · 卡片主数值
lg 32 · 小标题与按钮
md 28 · 正文
sm 24 · 辅助说明
cap 22 · 角标

6 · 按钮

保存记录
问问 AI
取消
开通 Pro
管理

主按钮保持暖橙：它有 36 处使用、绝大多数是弹层里的「保存」，改成深色会让全站主色消失。深色只给页面级首要 CTA。

7 · 标签 / 状态 chip / 4 色分类块

已完成待处理 异常经验精选
体重稳定 任务全清 驱虫将到期
体重
饮食
异常
照片

8 · 卡片 / 任务 / 统计 / 进度

今日任务管理
早餐喂食
已完成
记录体重
上次 4.2kg，建议每周一次
重要
本周完成度72%
9
记录
4.2
体重kg
12
距驱虫
疫苗进度3/4 已完成
驱虫状态12 天后到期

9 · 表单族（弹层里 28 种 type 全靠这几个类）

4.2
正常
软便
拉稀
呕吐拉稀精神差皮肤红
写点什么…
健康档案与体重趋势
AI 深度分析
取消
保存

10 · 其它公共块

风险中 · 建议观察 24 小时
幼猫疫苗怎么打
首免、二免、三免的时间点和注意事项
小橘最近体重稳定，继续保持现在的喂食量就好。
那驱虫呢？
还没有记录，来记第一笔吧

11 · 首页门面（方案 C）

状态环 + 状态 chip 做门面，今日任务提到首屏，4 色分类块替掉 8 宫格 emoji，最后一块深色 CTA。

72%
完成度
小橘今天状态不错
还有 3 件事没做完
体重稳定 驱虫将到期
今日任务管理
早餐喂食
记录体重
上次 4.2kg
重要
梳毛 10 分钟
快速记录
体重
饮食
异常
照片
问问 AI 养宠助手