---
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로: 제목과 잔액은 Bold 700(잔액은 고정폭 숫자로 최대 40px), 본문과 거래 행은 굵기 500 16px.

## Layout

좌우 패딩 20px의 휴대폰 화면, 가운데 추가 버튼을 둘러싼 이름표 있는 탭 네 개의 높이 64px 하단 탭 바. 잔액은 홈 화면 상단에, 최근 거래는 그 아래에 놓입니다.

## Shapes

카드와 시트는 18px 모서리, 알약 모양 버튼, 터치 영역은 최소 48px. 카드와 추가 버튼에는 부드럽고 낮은 그림자.

## Components

기간 전환이 있는 잔액 카드, 가맹점 아이콘, 카테고리, 금액이 있는 거래 행, 예산 진행 막대, 지출 도넛 차트, 새 내역 입력을 위한 숫자 키패드 시트.

## Do's and Don'ts

- 모든 금액은 고정폭 숫자로 오른쪽 정렬하세요.
- 지출은 색상만으로 구분하지 말고 마이너스 기호를 붙이세요.
- 모든 지출을 빨갛게 칠하지 마세요. 빨강은 초과한 예산과 오류에만 쓰세요.
- 잔액을 한 번 더 탭해야 보이게 숨기지 마세요.