---
version: alpha
name: "Pantry"
description: "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."
colors:
  primary: "#C9381E"
  on-primary: "#FFFFFF"
  secondary: "#2F7A4F"
  tertiary: "#D99121"
  neutral: "#6F5D50"
  surface: "#FFFAF3"
  on-surface: "#2A1A12"
typography:
  display-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Bricolage Grotesque"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Bricolage Grotesque"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body-md:
    fontFamily: "DM Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "DM Sans"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 16px
  md: 18px
  lg: 20px
  xl: 24px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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.

## Colors

- **primary (#C9381E):** Tomatenrot für „In den Warenkorb“, Kasse und den aktiven Tab.
- **on-primary (#FFFFFF)**
- **secondary (#2F7A4F):** Kräutergrün für vegetarische Labels, Erfolg und den Lieferstatus.
- **tertiary (#D99121):** Safran für Bewertungen und Angebote.
- **neutral (#6F5D50):** Warmes Braungrau für Beschreibungen und Metadaten.
- **surface (#FFFAF3):** Creme; Karten sind weiß, damit Essensfotos hervorstechen.
- **on-surface (#2A1A12)**

## Typography

Bricolage Grotesque Bold für Titel und Preise; DM Sans in 16px für Fließtext und Beschreibungen.

## Layout

Smartphone-Screens mit 16px Seitenrand, einer Tab-Leiste unten mit Warenkorb-Badge und einem fixierten Warenkorb-Button auf Menü-Screens.

## Shapes

20px-Ecken an Karten und Fotos; pillenförmige Buttons und Chips; weiche, niedrige Schatten nur an schwebenden Elementen.

## Components

Große Fotokarten mit Name, Preis und Hinzufügen-Button; Kategorie-Chips; eine fixierte Kassenleiste; der Bestellstatus als einfacher Schritt-Tracker.

## Do's 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.