Pantry：フード注文アプリ デザインシステム
アプリ · ライト · 温かみ · 遊び心 · フードPantry
温かく、親しみやすく、食欲をそそる。フードと注文のアプリのために。
Pantry は温かく、食欲をそそります。クリーム色の背景、注文にはトマトレッド、新鮮さにはハーブグリーン、大きな丸い料理のカード、そして親しみやすいグロテスク書体の見出し。
プレビュー
下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。
9:41
おはようございます今日週の目標5 日中 4 日次の予定朝のルーティン15 分チームのチェックイン30 分夜の振り返り10 分
ホーム統計プランマイページ9:41
今週合計7,842先週比 +12%セッションを開始
ホーム統計プランマイページ9:41
設定通知毎日のリマインダー単位メートル法
ホーム統計プランマイページプロジェクトで使う
これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。
このプロジェクトでは Pantry デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/pantry.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。
トークン
カラー
ライトテーマ
- background#FFFAF3oklch(0.987 0.011 76.6)
- foreground#2A1A12oklch(0.236 0.03 47.408)
- card#FFFFFFoklch(1 0 0)
- card-foreground#2A1A12oklch(0.236 0.03 47.408)
- popover#FFFFFFoklch(1 0 0)
- popover-foreground#2A1A12oklch(0.236 0.03 47.408)
- primary#C9381Eoklch(0.557 0.186 32.439)
- primary-foreground#FFFFFFoklch(1 0 0)
- secondary#FDEBD8oklch(0.949 0.032 68.938)
- secondary-foreground#6E2810oklch(0.376 0.106 38.332)
- muted#F6EEE4oklch(0.953 0.016 73.68)
- muted-foreground#6F5D50oklch(0.492 0.031 57.773)
- accent#FCE6D6oklch(0.938 0.032 58.39)
- accent-foreground#2A1A12oklch(0.236 0.03 47.408)
- destructive#B3202Aoklch(0.498 0.181 24.025)
- border#EFE3D5oklch(0.922 0.023 71.776)
- input#E6D7C6oklch(0.887 0.028 70.916)
- ring#C9381Eoklch(0.557 0.186 32.439)
- chart-1#C9381Eoklch(0.557 0.186 32.439)
- chart-2#2F7A4Foklch(0.521 0.101 155.227)
- chart-3#D99121oklch(0.712 0.144 71.642)
- chart-4#5A4FCFoklch(0.514 0.19 281.211)
- chart-5#C2577Eoklch(0.601 0.143 359.388)
ダークテーマ
- background#1A1310oklch(0.194 0.013 44.427)
- foreground#F8EDE3oklch(0.952 0.018 64.931)
- card#241A15oklch(0.228 0.019 47.887)
- card-foreground#F8EDE3oklch(0.952 0.018 64.931)
- popover#241A15oklch(0.228 0.019 47.887)
- popover-foreground#F8EDE3oklch(0.952 0.018 64.931)
- primary#FF6A4Doklch(0.706 0.188 32.864)
- primary-foreground#1A1310oklch(0.194 0.013 44.427)
- secondary#33241Coklch(0.276 0.027 49.268)
- secondary-foreground#F8EDE3oklch(0.952 0.018 64.931)
- muted#2B201Aoklch(0.255 0.02 50.045)
- muted-foreground#B9A595oklch(0.735 0.033 60.943)
- accent#352720oklch(0.287 0.025 47.844)
- accent-foreground#F8EDE3oklch(0.952 0.018 64.931)
- destructive#FF6B6Boklch(0.712 0.181 22.839)
- border#3B2D25oklch(0.311 0.025 51.22)
- input#47372Eoklch(0.352 0.028 50.844)
- ring#FF6A4Doklch(0.706 0.188 32.864)
- chart-1#FF6A4Doklch(0.706 0.188 32.864)
- chart-2#5BC08Aoklch(0.733 0.124 157.835)
- chart-3#FFB547oklch(0.824 0.149 73.346)
- chart-4#8F86FFoklch(0.683 0.174 284.179)
- chart-5#F08AB0oklch(0.753 0.131 356.937)
フォント
- 見出し
- Bricolage Grotesque · 700
- 本文
- DM Sans · 400
- 等幅
- DM Mono
タイプスケール
- display · 40/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
- h1 · 30/1.1 · -0.015emデザインで、画面はもっと使いやすくなる
- h2 · 22/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
- h3 · 18/1.3デザインで、画面はもっと使いやすくなる
- body · 16/1.5デザインで、画面はもっと使いやすくなる
- small · 13/1.4デザインで、画面はもっと使いやすくなる
角の半径、余白、影
角の半径sm 16pxmd 18pxlg 20pxxl 24px
余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px
影低く広がるやわらかな影。カードとシートにだけ使います。
レイアウト
- タッチ領域
- 48px
- タブバー
- 64px、4 項目、icons with labels; cart badge
- 画面の余白
- 16px
- ナビゲーション
- bottom tab bar; sticky cart button on menu screens
- 数字
- proportional; prices bold
向いている用途
- フードデリバリーと注文のアプリ
- レストランとカフェのアプリ
- 食料品とレシピのアプリ
- 地域のコマース
やること・やらないこと
- 料理の写真に、各カードの大部分を任せる。
- 追加ボタンの隣には、必ず太字で価格を示す。
- 同じ画面で、エラーと注文に赤を併用しない。
- メニューをバッジで埋めつくさない。