Pantry: Lieferdienst-App-Designsystem
App · Hell · Warm · Verspielt · EssenPantry
Warm, freundlich und appetitlich, für Essens- und Bestell-Apps.
Pantry wirkt warm und appetitlich: ein cremefarbener Hintergrund, Tomatenrot fürs Bestellen, Kräutergrün für Frische, große abgerundete Essenskarten und eine freundliche Grotesk für Überschriften.
Vorschau
Live aus den Tokens unten gerendert, in den Schriften des Systems.
9:41
Guten MorgenHeuteWochenziel4 von 5 TagenAls NächstesMorgenroutine15 Min.Team-Check-in30 Min.Abendrückblick10 Min.
StartStatistikPlanIch9:41
Diese WocheGesamt7,842+12 % ggü. VorwocheSession starten
StartStatistikPlanIch9:41
EinstellungenMitteilungenTägliche ErinnerungenEinheitenMetrisch
StartStatistikPlanIchIn deinem Projekt verwenden
Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.
Dieses Projekt verwendet das Designsystem Pantry. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/pantry.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.
Tokens
Farben
Helles 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)
Dunkles 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)
Schriften
- Überschriften
- Bricolage Grotesque · 700
- Fließtext
- DM Sans · 400
- Monospace
- DM Mono
Schriftgrößen
- display · 40/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
- h1 · 30/1.1 · -0.015emZwölf Boxkämpfer jagen Viktor
- h2 · 22/1.2 · -0.01emZwölf Boxkämpfer jagen Viktor
- h3 · 18/1.3Zwölf Boxkämpfer jagen Viktor
- body · 16/1.5Zwölf Boxkämpfer jagen Viktor
- small · 13/1.4Zwölf Boxkämpfer jagen Viktor
Radius, Abstände und Schatten
Eckenradiussm 16pxmd 18pxlg 20pxxl 24px
Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px
SchattenWeich, flach und breit, nur auf Karten und Sheets.
Layout
- Touch-Ziele
- 48px
- Tab-Leiste
- 64px, 4 Einträge, icons with labels; cart badge
- Bildschirmrand
- 16px
- Navigation
- bottom tab bar; sticky cart button on menu screens
- Ziffern
- proportional; prices bold
Ideal für
- Lieferdienst- und Bestell-Apps
- Restaurant- und Café-Apps
- Lebensmittel- und Rezept-Apps
- Lokaler Handel
Dos and Don’ts
- Lass Essensfotos den größten Teil jeder Karte einnehmen.
- Zeige den Preis fett neben jedem Hinzufügen-Button.
- Verwende Rot nicht gleichzeitig für Fehler und fürs Bestellen auf demselben Screen.
- Überfrachte die Speisekarte nicht mit Badges.
Weitere Designsysteme für Apps
- StrideAppGroße kondensierte Zahlen und ein energiegeladenes Orange für Bewegungs-Apps.Überschriften in Barlow Condensed
- CalmAppSanftes Salbeigrün, eine milde Serife und Raum zum Atmen.Überschriften in Newsreader
- WalletAppKlare Kontostände, ruhiges Grün und Zahlen, denen du vertrauen kannst.Überschriften in Manrope