---
version: alpha
name: "Pantry"
description: "温暖、亲切、有食欲，为外卖和点餐 App 设计。 Pantry 温暖又有食欲：米色背景、下单用番茄红、新鲜感用香草绿，配大圆角的美食卡片和亲切的无衬线标题字。"
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 温暖又有食欲：米色背景、下单用番茄红、新鲜感用香草绿，配大圆角的美食卡片和亲切的无衬线标题字。

## Colors

- **primary (#C9381E):** 番茄红，用于加入购物车、结账和当前标签页。
- **on-primary (#FFFFFF)**
- **secondary (#2F7A4F):** 香草绿，用于素食标签、成功状态和配送进度。
- **tertiary (#D99121):** 藏红花黄，用于评分和优惠。
- **neutral (#6F5D50):** 暖棕灰，用于菜品描述和元信息。
- **surface (#FFFAF3):** 米色；卡片是白色，让美食照片更突出。
- **on-surface (#2A1A12)**

## Typography

标题和价格用 Bricolage Grotesque 粗体；正文和描述用 DM Sans，16px。

## Layout

手机屏幕左右边距 16px，底部标签栏带购物车角标，菜单页底部有固定的购物车按钮。

## Shapes

卡片和图片 20px 圆角；按钮和筛选标签是胶囊形；只在悬浮元素上用柔和的浅阴影。

## Components

大图菜品卡片（名称、价格和加购按钮）、分类标签、固定的结账栏，以及简洁的订单进度条。

## Do's and Don'ts

- 让美食照片占卡片的大部分。
- 每个加购按钮旁边都用粗体写价格。
- 同一屏不要同时用红色表示错误和下单。
- 菜单上不要堆满角标。