Wallet: Finance App Design System

App · Light · Minimal · Finance

Wallet

Clear balances, calm green and numbers you can trust.

Wallet makes money feel under control: a pale grey-green background, emerald for positive actions, white cards with soft shadows and balances set in tabular figures so columns line up. Adding a transaction is always one tap away, in the middle of the tab bar.

Preview

Rendered live from the tokens below, in the system's own fonts.

9:41

Good morningTodayWeekly goal4 of 5 daysUp nextMorning routine15 minTeam check-in30 minEvening review10 min

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Wallet design system. Its spec is at https://codexdesign.io/design-systems/wallet.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light 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)

Dark 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)

Fonts

Headings: Manrope · 700
Body: Manrope · 500
Monospace: JetBrains Mono

Type scale

display · 40/1.05 · -0.02emThe quick brown fox
h1 · 30/1.1 · -0.01emThe quick brown fox
h2 · 22/1.2The quick brown fox
h3 · 18/1.3The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4The quick brown fox

Radius, spacing and shadow

Corner radiussm 14pxmd 16pxlg 18pxxl 22px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Touch targets: 48px
Tab bar: 64px, 4 items, icons with labels; center add button
Screen padding: 20px
Navigation: bottom tab bar with a center add button
Numerals: tabular for balances

Wallet: Finance App Design System

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps