Pantry: sistema de diseño de app de pedidos de comida

App · Light · Warm · Playful · Food

Pantry

Cálido, amable y apetitoso, para apps de comida y pedidos.

Pantry se siente cálido y apetitoso: un fondo crema, rojo tomate para pedir, verde hierba para la frescura, grandes tarjetas de comida redondeadas y una tipografía grotesca amable para los titulares.

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

HomeStatsPlanMe

9:41

This weekTotal7,842+12% vs last weekStart session

HomeStatsPlanMe

9:41

SettingsNotificationsDaily remindersUnitsMetric

HomeStatsPlanMe

Use 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/es/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

Pantry: sistema de diseño de app de pedidos de comida

Preview

Use it in your project

Tokens

Colors

Light theme

Dark theme

Fonts

Type scale

Radius, spacing and shadow

Layout

Best for

Do's and don'ts

More design systems for apps