---
version: alpha
name: "Wallet"
description: "Klare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst. Wallet lässt Geld kontrollierbar wirken: ein blass graugrüner Hintergrund, Smaragd für positive Aktionen, weiße Karten mit weichen Schatten und Kontostände in Tabellenziffern, damit Spalten bündig stehen. Eine Buchung hinzuzufügen ist immer nur einen Tipp entfernt, in der Mitte der Tab-Leiste."
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 lässt Geld kontrollierbar wirken: ein blass graugrüner Hintergrund, Smaragd für positive Aktionen, weiße Karten mit weichen Schatten und Kontostände in Tabellenziffern, damit Spalten bündig stehen. Eine Buchung hinzuzufügen ist immer nur einen Tipp entfernt, in der Mitte der Tab-Leiste.

## Colors

- **primary (#0E7C5A):** Smaragdgrün für den Hinzufügen-Button, Einnahmen und bestätigte Aktionen. Im Dunkelmodus Mint.
- **on-primary (#FFFFFF)**
- **secondary (#2F6FD6):** Blau für Überweisungen, Konten und die zweite Ausgabenkategorie.
- **tertiary (#E09A2D):** Bernstein für bald fällige Rechnungen, Budgetwarnungen und eine dritte Kategorie.
- **neutral (#55625C):** Graugrün für Datumsangaben, Händlerdetails und Labels.
- **surface (#F5F7F6):** Blasses Graugrün; Karten sind weiß, damit Kontostände hervortreten.
- **on-surface (#0F1A16)**

## Typography

Durchgehend Manrope: Bold 700 für Titel und Kontostände (Kontostände bis 40px mit Tabellenziffern), Schnitt 500 in 16px für Fließtext und Buchungszeilen.

## Layout

Smartphone-Screens mit 20px Seitenrand und einer 64px hohen Tab-Leiste: vier beschriftete Tabs um einen zentralen Hinzufügen-Button. Der Kontostand steht oben auf dem Startscreen, darunter die letzten Buchungen.

## Shapes

18px-Ecken an Karten und Sheets; pillenförmige Buttons; Touch-Ziele von mindestens 48px. Weiche, niedrige Schatten an Karten und am Hinzufügen-Button.

## Components

Eine Kontostandskarte mit Zeitraum-Umschalter, Buchungszeilen mit Händler-Icon, Kategorie und Betrag, Budget-Fortschrittsbalken, ein Donut-Diagramm der Ausgaben und ein Zahlenblock als Sheet für neue Einträge.

## Do's and Don'ts

- Richte jeden Betrag rechtsbündig mit Tabellenziffern aus.
- Kennzeichne Ausgaben mit einem Minuszeichen, nicht nur mit Farbe.
- Färbe nicht alle Ausgaben rot; Rot bleibt überzogenen Budgets und Fehlern vorbehalten.
- Verstecke den Kontostand nicht hinter einem zusätzlichen Tipp.