Wallet: 금융 앱 디자인 시스템
App · Light · Minimal · FinanceWallet
또렷한 잔액, 차분한 초록, 믿을 수 있는 숫자.
Wallet은 돈을 통제할 수 있다고 느끼게 합니다. 옅은 회녹색 배경, 긍정적인 행동에는 에메랄드, 부드러운 그림자의 흰 카드, 열이 맞도록 고정폭 숫자로 쓴 잔액. 거래 추가는 탭 바 가운데에서 언제나 한 번의 탭이면 닿습니다.
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/ko/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
- 가계부·지출 트래커
- 뱅킹·카드 앱
- 개인 재무와 저축 목표
- 더치페이와 결제
Do's and don'ts
- 모든 금액은 고정폭 숫자로 오른쪽 정렬하세요.
- 지출은 색상만으로 구분하지 말고 마이너스 기호를 붙이세요.
- 모든 지출을 빨갛게 칠하지 마세요. 빨강은 초과한 예산과 오류에만 쓰세요.
- 잔액을 한 번 더 탭해야 보이게 숨기지 마세요.