# Money Twin 设计语言规范 v1

> 定稿于首页 v6 迭代（2026-08-20 用户验收）。剩余页面（Future / Space / Activity / 弹层）必须按此规范设计。
> 总方向：**60% Apple（秩序、留白、层级）× 40% Duolingo（pastel、手感、spring、奖励感）**。

## 1. 色彩

- 底：`#FAFAF7`（暖白）；墨：`#1C1C1A`；弱化：`#6F6F68`；细线：`#E3E3DC`。
- 主色深绿 `#0B6E4F`：**只给真正重要的数字和主按钮**（hero 大数、chunky 按钮、active tab、进度条、今日条）。
- 辅助绿 `#2F8A64`（leaf）：大数的小数位、次强调。
- Pastel 家族：Mint `#E4EFE9` / Peach `#F6E3D4` / Lilac `#EAE4F4` / Lemon `#F7EFD2` / Sky `#E1EBF2`。
  **每页最多 1–2 个 pastel 色块**（Today 用 Mint 主角 + Peach 奖励是上限）。
- 金额：支出墨色、收入深绿，不堆砌红绿。永远没有警示红 UI（惩罚走 Space 精灵蔫掉，见策划案 §67）。
- 无渐变、无阴影堆叠。例外：吉祥物身体体积光、glowring 虚线金环 `#E8B44A`。

## 2. 卡片：唇边家族（3D 感的唯一来源，克制）

| 层级 | 用法 | 规格 |
|---|---|---|
| 主角卡 | 每页唯一的 Visual Hero（pastel 底） | 5px 同色系深唇（mint→`#CFE2D8`），圆角 26 |
| 奖励卡 | 昨日结算 / 盲盒（peach/lilac 底） | 3px 唇 + 大面积同色柔光晕（`0 10px 26px rgba(...)`） |
| 白卡 | Goal / 账户 / 列表卡 | 1px 边 `#E9E9E2` + 2.5px 中性唇 `#E0E0D7`，圆角 22 |
| 小卡 | 横滑条事件卡 | 1px 边 + 2px 唇，圆角 18 |

- 立体度严格递减：**主角 > 奖励 > 白卡 > 小卡**。谁都不许抢戏。
- 普通内容不装卡，用留白分区；只有「重点区域 / 奖励区域」才用 pastel 大卡。
- **禁止假叠层/假投影**：每一层装饰都要有语义，说不出来是什么就删（首页 hero 顶部的卡片叠层因语义不清被砍）。

## 3. 按钮（chunky）

- 规格：`height 44–48`、圆角 16、深绿底白字 800 重、**5px 深色底唇**（`box-shadow: 0 5px 0 #085738`）。
- 按压：整体下沉 5px、唇消失（`:active{transform:translateY(5px);box-shadow:0 0 0}`）。
- 紫色次级动作（开盒等）：`#6A4E9C` 底 + `#54407C` 唇，规则相同。
- **一致性铁律：同一屏里的按钮，要么都带图标要么都不带**。图标 = 15px 细线 glyph，在文字左侧，gap 8。
- **唇边裁切红线**：chunky 按钮的父容器如果是 `overflow:hidden`，必须留 ≥6px 的 padding-bottom，否则唇被剪平（v5 真实事故）。

## 4. 动效编排

缓动：`--ease-out: cubic-bezier(.23,1,.32,1)`；`--spring: cubic-bezier(.34,1.56,.64,1)`。

### 进场（每天第一次打开）
1. 卡片 stagger 落下：`cardpop .5s spring`（位移 12px + 缩放 .95→1.015→1），间隔 ~80ms。
2. 大数字 count-up 600ms（ease-out cubic），带小数位。
3. 一周呼吸条从底部逐根长出（scaleY，间隔 40ms）。
4. **奖励区的每张卡入场都撒一次粒子**（12 颗以内、上偏、600ms 内消失）——奖励卡有的待遇，盲盒卡也得有（一致性）。

### Claim 模式（所有「领取」共用，不许发明第二种）
> 核心规则：**资源必须肉眼可见地飞到目的地**。没有 toast、没有弹字提示。

1. 按钮下沉（手感）→ 2. 9 颗币粒子从按钮划弧线飞向目标（进度条/账户/tab），stagger 32ms →
3. 来源卡溶解（opacity + 高度收起）→ 4. 目标物弹簧生长/弹一下 + 数字翻牌 + 数值钩子更新。
- **时序铁律：飞行落地后，来源卡才溶解**。飞行与布局变化同时发生会卡帧（v5 真实事故）。
- 溶解动画：opacity .28s + height/margin/padding .45s `cubic-bezier(.4,0,.2,1)`，结束后才 `display:none`。

### 开盒仪式（仪式感 = 本 App 的最高规格）
1. overlay 淡入（`rgba(28,28,26,.45)`），舞台卡 spring 弹入。
2. 盒子摇晃三段加速（`.48s` 循环 ×3，每段配 `navigator.vibrate(25)`）。
3. 爆发：盒盖弹飞旋转消失 + 白色冲击环（scale .3→2.8）+ 16 颗放射粒子 + `vibrate([40,30,90])`。
4. 精灵登场：spring 从下方弹入（overshoot 1.07→0.97→1），背后金色虚线环淡入并慢转（16s/圈）。
5. 依次浮现：稀有度药丸（spring pop）→ 名字 → 一句性格 → 编号（SERIES 01 · NO. 07）→ 主按钮。
6. 彩带雨 26 片（金/绿/紫/桃/白，1.7–2.6s，摇摆下落）。
7. 点收取 → 精灵划弧线缩小飞进 Space tab → tab 图标弹 1.4 倍回弹 + 小粒子。
8. 点背景可取消，不消耗盲盒。

### 其它
- tabbar：纯图标无文字，active = 变绿 + 下方 4px 圆点；高度 68。
- 常驻微动效只能有一个频率词：慢。rhythm 药丸呼吸点 4s、盒子闲置摇摆 2.4s、glowring 16s。**不许抢注意力。**

## 5. 排版

- 字族：Nunito > Inter > 系统。金额必须 `tabular-nums`，精确到分（`RM 66` 大 + `.34` 小，辅助绿）。
- eyebrow：11px / 800 / 字距 .13em / 大写 / 弱化色。每区最多一个。
- 一页一句话：story 行 14.5–15px 600 重，说完就停。
- **装饰废话禁止**（"Good morning" 这类不携带信息的问候已删除——story 句就是问候）。

## 6. 页面人格

| 页 | 人格 | pastel |
|---|---|---|
| Today | 明亮、有希望；hero 每天只讲一个故事 | Mint + Peach/Lilac 奖励 |
| Activity | 最克制、最 Apple；黑白为主 | 仅分类图标圆片 |
| Future | 安静、精确；图表是 Visual Hero | Sky + Mint |
| Space | 最好玩、最 Duolingo；精灵住这 | pastel 最丰富 |

## 7. 禁忌

- emoji 不进 UI（Weird Little Guys 除外）；图标全部自绘细线 SVG glyph + pastel 圆片。
- 无渐变（特许例外见 §1）、无阴影堆叠、无 pie chart、无红色惩罚 UI。
- 不做货币/代币（§67 拍板）。
- 装饰必须有语义；说不出来就删。