Wallet：家計・金融アプリ デザインシステム
アプリ · ライト · ミニマル · 金融Wallet
わかりやすい残高、穏やかなグリーン、信頼できる数字。
Wallet は、お金を自分でコントロールできている感覚を与えます。淡いグレーがかったグリーンの背景、プラスの操作にはエメラルド、やわらかな影の白いカード、そして桁がそろう等幅数字で組んだ残高。取引の追加は、タブバーの中央から常にワンタップです。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Wallet デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/wallet.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- 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)
ダークテーマ
- 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)
フォント
- 見出し
- Manrope · 700
- 本文
- Manrope · 500
- 等幅
- JetBrains Mono
タイプスケール
- display · 40/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
- h1 · 30/1.1 · -0.01emデザインで、画面はもっと使いやすくなる
- h2 · 22/1.2デザインで、画面はもっと使いやすくなる
- h3 · 18/1.3デザインで、画面はもっと使いやすくなる
- body · 16/1.5デザインで、画面はもっと使いやすくなる
- small · 13/1.4デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 14pxmd 16pxlg 18pxxl 22px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影低く広がるやわらかな影。カードとシートにだけ使います。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels; center add button
- 画面の余白
- 20px
- ナビゲーション
- bottom tab bar with a center add button
- 数字
- tabular for balances
向いている用途
- 家計簿と支出管理のアプリ
- バンキングとカードのアプリ
- 個人の資産管理と貯蓄目標
- 割り勘と支払い
やること・やらないこと
- すべての金額を、等幅数字で右揃えにする。
- 支出は色だけでなく、マイナス記号でも示す。
- 支出をすべて赤にしない。赤は予算超過とエラー用に取っておく。
- 残高を、余計なタップの先に隠さない。