Pantry: 음식 주문 앱 디자인 시스템
App · Light · Warm · Playful · FoodPantry
따뜻하고 친근하고 먹음직스럽게. 음식과 주문 앱을 위해.
Pantry는 따뜻하고 먹음직스럽습니다. 크림 배경, 주문에는 토마토 레드, 신선함에는 허브 그린, 큼직하고 둥근 음식 카드, 친근한 그로테스크 제목 서체.
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/ko/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
- 음식 배달·주문 앱
- 레스토랑·카페 앱
- 식료품·레시피 앱
- 동네 커머스
Do's and don'ts
- 음식 사진이 카드 대부분을 차지하게 하세요.
- 모든 담기 버튼 옆에 가격을 굵게 보여 주세요.
- 한 화면에서 빨간색을 오류와 주문에 함께 쓰지 마세요.
- 메뉴를 배지로 어지럽히지 마세요.