Pantry: Food Ordering App Design System
App · Light · Warm · Playful · FoodPantry
Warm, friendly and appetizing, for food and ordering apps.
Pantry feels warm and appetizing: a cream background, tomato red for ordering, herb green for freshness, big rounded food cards and a friendly grotesque headline face.
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 Pantry design system. Its spec is at https://codexdesign.io/design-systems/pantry.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.
Tokens
Colors
Light theme
- 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)
Dark theme
- 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)
Fonts
- Headings
- Bricolage Grotesque · 700
- Body
- DM Sans · 400
- Monospace
- DM Mono
Type scale
- display · 40/1.05 · -0.02emThe quick brown fox
- h1 · 30/1.1 · -0.015emThe quick brown fox
- h2 · 22/1.2 · -0.01emThe 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 16pxmd 18pxlg 20pxxl 24px
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; cart badge
- Screen padding
- 16px
- Navigation
- bottom tab bar; sticky cart button on menu screens
- Numerals
- proportional; prices bold
Best for
- Food delivery and ordering apps
- Restaurant and café apps
- Grocery and recipe apps
- Local commerce
Do's and don'ts
- Do let food photos take most of each card.
- Do show the price in bold next to every add button.
- Don't use red for errors and ordering on the same screen.
- Don't crowd the menu with badges.