Wallet: Finanz-App-Designsystem

App · Hell · Minimalistisch · Finanzen

Wallet

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.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

9:41

Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.

StartStatistikPlanIch

9:41

Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten

StartStatistikPlanIch

9:41

EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch

StartStatistikPlanIch

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Wallet. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/wallet.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#F5F7F6oklch(0.974 0.002 165.076)
foreground#0F1A16oklch(0.206 0.018 169.92)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1A16oklch(0.206 0.018 169.92)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1A16oklch(0.206 0.018 169.92)
primary#0E7C5Aoklch(0.521 0.106 165.168)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E3F0EAoklch(0.944 0.016 166.716)
secondary-foreground#0B4D38oklch(0.375 0.073 165.96)
muted#EDF1EFoklch(0.955 0.005 165.005)
muted-foreground#55625Coklch(0.483 0.019 166.087)
accent#E6EFEAoklch(0.944 0.012 162.042)
accent-foreground#0F1A16oklch(0.206 0.018 169.92)
destructive#C02A2Aoklch(0.529 0.186 26.391)
border#DCE4E0oklch(0.912 0.01 164.85)
input#CDD7D2oklch(0.87 0.013 164.753)
ring#0E7C5Aoklch(0.521 0.106 165.168)
chart-1#0E7C5Aoklch(0.521 0.106 165.168)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#E09A2Doklch(0.738 0.143 72.977)
chart-4#C2457Foklch(0.579 0.169 354.99)
chart-5#7A6FD6oklch(0.6 0.152 285.71)

Dunkles Theme

background#0C1210oklch(0.175 0.01 172.763)
foreground#E7EEEAoklch(0.943 0.009 161.345)
card#131B18oklch(0.213 0.013 170.148)
card-foreground#E7EEEAoklch(0.943 0.009 161.345)
popover#131B18oklch(0.213 0.013 170.148)
popover-foreground#E7EEEAoklch(0.943 0.009 161.345)
primary#4CD3A0oklch(0.78 0.139 164.374)
primary-foreground#0C1210oklch(0.175 0.01 172.763)
secondary#1B2622oklch(0.257 0.017 170.647)
secondary-foreground#E7EEEAoklch(0.943 0.009 161.345)
muted#17201Doklch(0.234 0.014 172.676)
muted-foreground#8FA199oklch(0.692 0.023 167.148)
accent#1F2B27oklch(0.276 0.018 172.515)
accent-foreground#E7EEEAoklch(0.943 0.009 161.345)
destructive#FF7A7Aoklch(0.735 0.163 21.864)
border#25312Coklch(0.3 0.019 167.781)
input#2E3B36oklch(0.339 0.019 169.764)
ring#4CD3A0oklch(0.78 0.139 164.374)
chart-1#4CD3A0oklch(0.78 0.139 164.374)
chart-2#7DA8F0oklch(0.73 0.115 260.366)
chart-3#F2BE6Aoklch(0.831 0.118 77.962)
chart-4#EE8AB6oklch(0.752 0.131 352.876)
chart-5#ADA6F2oklch(0.759 0.108 287.753)

Schriften

Überschriften: Manrope · 700
Fließtext: Manrope · 500
Monospace: JetBrains Mono

Schriftgrößen

display · 40/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
h1 · 30/1.1 · -0.01emZwölf Boxkämpfer jagen Viktor
h2 · 22/1.2Zwölf Boxkämpfer jagen Viktor
h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
body · 16/1.5Zwölf Boxkämpfer jagen Viktor
small · 13/1.4Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 14pxmd 16pxlg 18pxxl 22px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenWeich, flach und breit, nur auf Karten und Sheets.

Layout

Touch-Ziele: 48px
Tab-Leiste: 64px, 4 Einträge, icons with labels; center add button
Bildschirmrand: 20px
Navigation: bottom tab bar with a center add button
Ziffern: tabular for balances

Ideal für

Budget- und Ausgaben-Tracker
Banking- und Karten-Apps
Privatfinanzen und Sparziele
Rechnungen aufteilen und Zahlungen

Dos 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.

Wallet: Finanz-App-Designsystem

Vorschau

In deinem Projekt verwenden

Tokens

Farben

Helles Theme

Dunkles Theme

Schriften

Schriftgrößen

Radius, Abstände und Schatten

Layout

Ideal für

Dos and Don’ts

Weitere Designsysteme für Apps