---
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):** ブルー。振替、口座、2 番目の支出カテゴリ用。
- **tertiary (#E09A2D):** アンバー。支払い期限が近い請求、予算の警告、3 番目のカテゴリ用。
- **neutral (#55625C):** グレーがかったグリーン。日付、店舗の詳細、ラベル用。
- **surface (#F5F7F6):** 淡いグレーがかったグリーン。カードは白で、残高が際立ちます。
- **on-surface (#0F1A16)**

## Typography

全体を Manrope で統一。タイトルと残高はボールドの 700（残高は等幅数字で最大 40px）、本文と取引の行はウェイト 500 の 16px。

## Layout

左右 20px のパディングと、高さ 64px の下部タブバーのスマートフォン画面。中央の追加ボタンを囲む、ラベル付きの 4 つのタブ。ホーム画面の上部に残高、その下に最近の取引。

## Shapes

カードとシートは 18px の角丸。ピル型のボタン。タッチ領域は最低 48px。カードと追加ボタンには、やわらかく低い影。

## Components

期間を切り替えられる残高カード、店舗アイコン・カテゴリ・金額を並べた取引の行、予算の進捗バー、支出のドーナツチャート、新規入力用のテンキーのシート。

## Do's and Don'ts

- すべての金額を、等幅数字で右揃えにする。
- 支出は色だけでなく、マイナス記号でも示す。
- 支出をすべて赤にしない。赤は予算超過とエラー用に取っておく。
- 残高を、余計なタップの先に隠さない。