Birchline 设计系统

从 src/styles/tokens.ts 和 src/components/ 里直接生成 — 写 prompt 的时候可以当随手翻的参考。

颜色

主色
#D97757 --clay
#141413 --slate
#FAF9F5 --ivory
#E3DACC --oat
中性色
#FFFFFF --white
#F0EEE6 --gray-100
#D1CFC5 --gray-300
#87867F --gray-500
#3D3D3A --gray-700
语义色
#788C5D --success
#C78E3F --warning
#B04A4A --danger
#5C7CA3 --info

字体

规划一周的工作
展示标题 48 / 1.1 / 500
规划一周的工作
一级标题 32 / 1.2 / 500
规划一周的工作
二级标题 24 / 1.3 / 500
复盘里程碑、指派负责人，在阻塞蔓延之前把它们摆到台面上。
正文 16 / 1.55 / 430
复盘里程碑、指派负责人，在阻塞蔓延之前把它们摆到台面上。
小字 14 / 1.5 / 430
2 小时前更新
辅助说明 12 / 1.4 / 500

间距

4--sp-1
8--sp-2
12--sp-3
16--sp-4
24--sp-5
32--sp-6
48--sp-7
64--sp-8

圆角与阴影

4px--r-xs
8px--r-sm
12px--r-md
20px--r-lg
--shadow-sm0 1px 2px / 6%
--shadow-md0 4px 10px / 8%
--shadow-lg0 12px 28px / 12%

核心组件

<Button />
<Input />
<Checkbox />
<Badge />
草稿 评审中 已完成 已逾期