# Chipotle — Design System
> Fast-casual restaurant chain serving Mexican-inspired food.
- **Canonical:** https://uiuxskills.com/library/chipotle
- **Source:** https://www.chipotle.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:02.908Z

---

---
version: alpha
name: Chipotle Mexican Grill
description: Fast-casual restaurant chain specializing in customizable Mexican-inspired cuisine.
tone: >-
  Direct, appetizing, and community-focused. The tone is straightforward and action-oriented,
  emphasizing fresh ingredients and convenience.
color-scheme: light
colors:
  primary: "#AD2118"
  secondary: "#451400"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-primary: "#FFFFFF"
  on-surface: "#451400"
  outline: "#786259"
  error: "#B00020"
  success: "#2E7D32"
  focus-ring: "#AD2118"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#8A1A12"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Chipotle’s visual identity is rooted in a rustic, earthy aesthetic that reflects their "Food with Integrity" mission. The brand uses a bold, high-contrast palette of deep browns and vibrant reds to evoke warmth, appetite, and culinary authenticity, maintaining a direct and action-oriented tone that prioritizes convenience.

## Colors

The color strategy relies on a high-contrast, earth-toned palette to ground the brand, using signature red for engagement and deep brown for structural readability.

*   Primary (#AD2118): Signature Chipotle red used for primary CTAs and branding highlights.
*   Secondary (#451400): Deep brown used for headers and primary text, grounding the brand in earth tones.
*   Surface (#FFFFFF): Clean white background for maximum readability and ingredient focus.
*   Surface-container (inferred) (#F5F5F5): Light grey used for section backgrounds and cards.
*   On-primary (inferred) (#FFFFFF): White text for high contrast against primary red buttons.
*   On-surface (#451400): Dark brown text for primary content to maintain brand warmth.
*   Outline (#786259): Muted grey-brown for borders and dividers.
*   Error (inferred) (#B00020): Standard error red for validation states.
*   Success (inferred) (#2E7D32): Green for success states and positive feedback.
*   Focus-ring (inferred) (#AD2118): Primary red used for focus states to ensure accessibility.

## Typography

Typography is kept clean and functional, utilizing sans-serif typefaces to ensure legibility across both marketing headers and dense menu information.

*   Display (inferred): Large-scale sans-serif for hero headlines and impactful section titles.
*   Headline (inferred): Mid-to-small scale sans-serif for card titles and secondary headings.
*   Body (inferred): Standard sans-serif for readable paragraph copy and captions.
*   Label (inferred): Compact sans-serif for UI elements, button text, and small labels.

## Layout

The site utilizes a responsive grid system with a max-width container to center content, ensuring consistent alignment across devices. The layout follows a logical flow: nav, hero, rewards-callout, menu-grid, gift-cards, and footer. Spacing is generous, using a standard base unit to separate sections and improve scannability, with the menu grid collapsing into a single column on mobile devices.

## Elevation & Depth

Depth is conveyed through subtle, multi-layered shadows that provide a clean, flat-leaning aesthetic.
*   `elevation.sm`: Subtle lift for small UI elements.
*   `elevation.md`: Standard card lift for menu items and content blocks.
*   `elevation.lg`: Deeper shadow for modal or overlay components.

## Shapes

The brand employs a balanced approach to geometry, using sharp corners for structural containers and moderate rounding for interactive elements. This mix balances a professional, grid-based layout with the approachable, human-centric feel of the brand.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions with white text, ensuring high visibility. Secondary buttons use a transparent background with a `{colors.primary}` border to maintain a clean, secondary hierarchy.

### Card
Cards utilize `{colors.surface}` with `{rounded.md}` corners, providing a clean container for menu items. Elevated cards may use `elevation.md` to distinguish interactive content from the background.

### Input Field
Input fields feature a `{colors.surface}` background and `{rounded.sm}` corners. On focus, the border transitions to `{colors.focus-ring}` to clearly indicate active states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use `{colors.primary}` for body text. |
| Use `{colors.secondary}` for main headings. | Avoid using high-elevation shadows on flat UI elements. |
| Apply `{rounded.md}` to all card components. | Do not mix rounded corners with sharp-edged containers. |
| Use `{spacing.md}` as the base unit for padding. | Never apply `{typography.body-md}` on `{colors.primary}`. |
| Ensure buttons have a min-height of 44px. | Avoid using more than two font weights on a page. |
| Use `{colors.outline}` for section dividers. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{typography.label-md}` for button labels. | Do not use `{colors.surface-container}` for primary text. |
| Use `{colors.focus-ring}` for accessibility states. | Avoid inconsistent spacing between grid items. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Order Now" or "Start a Group Order" to drive immediate user engagement.

Headings are direct and benefit-focused, emphasizing fresh ingredients and the ease of the ordering process.

Copy density is kept low with short, punchy sentences designed for quick scanning, ensuring the user can navigate the menu and rewards information without friction.

## Imagery & Icons

The imagery style is mixed, prioritizing high-quality, appetizing food photography as the primary visual driver to evoke freshness. Icons are minimal and clean, typically used to represent menu categories or navigation items, maintaining a consistent, unobtrusive visual language that supports the photography rather than competing with it.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Chipotle Mexican Grill, a minimal-bold fast-casual brand with a direct, appetizing tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font sizes.
2. Respect the component definitions under `components:` exactly. Do not invent variants (e.g. a ghost button, a pill button) the spec does not list.
3. Follow the Layout narrative (nav → hero → rewards-callout → menu-grid → gift-cards → footer) when assembling page-level structures. Collapse the menu grid to single column on mobile; use one breakpoint at 768px when the spec is silent.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.primary}` for body text), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative token file exists for the product, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography decision.
- Render all interactive components with hover, focus, and disabled states where the spec defines them (`button-primary-hover`, `input-field-focus`, `{colors.focus-ring}`).
- Apply `{spacing.md}` as the base padding unit; use the full `{spacing.xs}`–`{spacing.2xl}` scale for all gaps.
- Use `{typography.label-md}` for button labels; `{colors.secondary}` for main headings; `{colors.primary}` exclusively for CTAs and branding highlights.
- Ensure all buttons meet the 44px minimum height stated in the spec.

**Must NOT:**
- Invent colors, radii, or font sizes absent from the spec.
- Use generic utility defaults (e.g. `gray-500`, `rounded-md` as a literal class) when a brand token covers the role.
- Mix sharp-edged containers with rounded interactive elements on the same surface.
- Apply `{colors.primary}` to body text or `{colors.error}` to non-destructive actions.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite button labels, headings, navigation items, or any existing page copy.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background roles default to `{colors.surface}` or `{colors.surface-container}`; for text on those surfaces use `{colors.on-surface}`.
- For ambiguous CTA copy, follow the Content Style directive: imperative verb-first, short, scannable.
- Inferred tokens are approximations; defer to any authoritative source the product team supplies.