Wallet: sistema de diseño de app de finanzas
App · Light · Minimal · FinanceWallet
Saldos claros, verde sereno y números en los que confiar.
Wallet hace que el dinero parezca bajo control: un fondo gris verdoso pálido, esmeralda para las acciones positivas, tarjetas blancas con sombras suaves y saldos en cifras tabulares para que las columnas se alineen. Añadir una transacción siempre está a un toque, en el centro de la barra de pestañas.
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
HomeStatsPlanMe9:41
This weekTotal7,842+12% vs last weekStart session
HomeStatsPlanMe9:41
SettingsNotificationsDaily remindersUnitsMetric
HomeStatsPlanMeUse 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/es/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
Best for
- Presupuestos y control de gastos
- Apps bancarias y de tarjetas
- Finanzas personales y metas de ahorro
- División de gastos y pagos
Do's and don'ts
- Alinea a la derecha todos los importes con cifras tabulares.
- Marca los gastos con un signo menos, no solo con el color.
- No pintes todos los gastos de rojo; reserva el rojo para presupuestos superados y errores.
- No escondas el saldo detrás de un toque extra.