# Beancount Mobile 设计系统（MASTER）

> 本文件与 `src/theme/presets.ts` 一一对应，是实现的事实描述而非平行标准。
> 修改配色/字阶/圆角时必须先改 presets.ts，再同步本文件。

## 设计方向：明亮 Bento 现代风

浅色为主、大圆角卡片（Bento）、近黑白单色 + 财务语义色点缀。
品牌感靠排版与财务色表达，不依赖彩色 accent。暗色为 OLED 纯黑完整对等主题。

## 色板（= presets.ts）

### 浅色（默认）
| Token | 值 | 用途 |
|---|---|---|
| bgPrimary | `#F6F7F9` | 页面背景 |
| bgSecondary | `#FFFFFF` | 卡片 |
| bgTertiary | `#EFF1F4` | 输入框 / chip |
| fgPrimary | `#111318` | 主文字 |
| fgSecondary | `#6B7280` | 次要文字 |
| fgInverse | `#FFFFFF` | 反色文字 |
| accent | `#111318` | 按钮 / 选中态（近黑） |
| accentLight | `rgba(17,19,24,0.08)` | 选中高亮底色 |
| accentDark | `#000000` | 按压态 |
| financial.income | `#10B981` | 收入 |
| financial.expense | `#EF4444` | 支出 |
| financial.transfer | `#3B82F6` | 转账 |
| border | `#E5E7EB` | 边框 |
| overlay | `rgba(17,19,24,0.4)` | 遮罩 |

### 暗色（OLED）
| Token | 值 |
|---|---|
| bgPrimary | `#040508` |
| bgSecondary | `#101218` |
| bgTertiary | `#1A1D24` |
| fgPrimary / accent | `#F3F4F6` |
| fgSecondary | `#9CA3AF` |
| fgInverse | `#111318` |
| financial.income | `#34D399`（提亮） |
| financial.expense | `#F87171`（提亮） |
| financial.transfer | `#60A5FA`（提亮） |
| border | `rgba(255,255,255,0.08)` |

分类/标签/渠道颜色见 `src/theme/palette.ts`（分类 12 色循环 + 具名映射、TAG_COLORS、渠道品牌色）。
其余 token（divider / skeleton / progressBg / success / warning / error / info）见 `presets.ts`。
全工程颜色字面量只允许存在于 `presets.ts` 与 `palette.ts`。

## 字体

系统字体（iOS SF / Android Roboto），不加载自定义字体。
金额数字一律 `fontVariant: ['tabular-nums']` 等宽对齐。

字阶：display 34/800 · h1 28/700 · h2 22/700 · h3 17/600 · body 16/400 · bodySmall 14/400 · caption 12/400。

## 圆角 / 间距 / 阴影

- 圆角：sm 8 · md 12 · lg 16 · **xl 24（弹窗默认；卡片组件 P2 统一升级）** · full
- 间距：xs 4 · sm 8 · md 16 · lg 24 · xl 32
- 阴影：浅色 4–12px 弥散轻阴影；暗色阴影减重，辅以半透边框

## 图标

统一 Ionicons（`@expo/vector-icons`）。禁止用 emoji 充当图标；
分类图标 = Ionicon + 圆形彩色底（CategoryIcon 组件，P2 落地）。

## 反模式

- 禁止在组件中写颜色字面量（`#xxxxxx` / `rgba(...)`），必须走 token
- 禁止低对比文字（< 4.5:1）
- 禁止瞬间状态变化，交互反馈 150–300ms
- 禁止绕过 commonStyles 重复造 input/chip/modal 样式