---
version: alpha
name: "Wallet"
description: "清楚的余额、安心的绿色和值得信赖的数字。 Wallet 让人觉得钱都在掌控之中：浅灰绿背景、翡翠绿表示积极操作、带柔和阴影的白色卡片，余额用等宽数字，上下对得整整齐齐。记一笔账永远只要点一下标签栏中间的按钮。"
colors:
  primary: "#0E7C5A"
  on-primary: "#FFFFFF"
  secondary: "#2F6FD6"
  tertiary: "#E09A2D"
  neutral: "#55625C"
  surface: "#F5F7F6"
  on-surface: "#0F1A16"
typography:
  display-lg:
    fontFamily: "Manrope"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Manrope"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Manrope"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: "Manrope"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: "Manrope"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
rounded:
  sm: 14px
  md: 16px
  lg: 18px
  xl: 22px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Wallet 让人觉得钱都在掌控之中：浅灰绿背景、翡翠绿表示积极操作、带柔和阴影的白色卡片，余额用等宽数字，上下对得整整齐齐。记一笔账永远只要点一下标签栏中间的按钮。

## Colors

- **primary (#0E7C5A):** 翡翠绿，用于记账按钮、收入和确认操作；深色模式下是薄荷绿。
- **on-primary (#FFFFFF)**
- **secondary (#2F6FD6):** 蓝色，用于转账、账户和第二个支出分类。
- **tertiary (#E09A2D):** 琥珀色，用于即将到期的账单、预算提醒和第三个分类。
- **neutral (#55625C):** 灰绿，用于日期、商户信息和标签。
- **surface (#F5F7F6):** 浅灰绿；卡片是白色，让余额更突出。
- **on-surface (#0F1A16)**

## Typography

全站用 Manrope：标题和余额用粗体 700（余额最大 40px，使用等宽数字）；正文和交易记录用字重 500，16px。

## Layout

手机屏幕左右边距 20px，底部标签栏高 64px：四个带文字的标签围着中间的记账按钮。首页顶部是余额，下面是最近的交易。

## Shapes

卡片和底部弹层用 18px 圆角；按钮是胶囊形；触控区域不小于 48px。卡片和记账按钮用柔和的低阴影。

## Components

可切换时间段的余额卡片、带商户图标、分类和金额的交易行、预算进度条、支出环形图，以及新建记账时弹出的数字键盘。

## Do's and Don'ts

- 所有金额右对齐，使用等宽数字。
- 支出要带负号，不能只靠颜色区分。
- 不要把所有支出都标红，红色只留给超支和错误。
- 不要让用户多点一下才能看到余额。