What is Chipotle's primary brand color?

Chipotle's structural workhorse is burnt-umber ink `#451400` — it appears 677 times in the captured page and carries nearly every text moment (335 occurrences) and hairline border (331). The brand voltage is mustard gold `#b68207`, but it appears only 8 times total, reserved for the Honey Chicken hero CTA strip at the top of the page. A crimson `#ad2118` Rewards red appears twice on the bag-grab promo card. There is no green, no tomato red, no signature avocado tone — every chromatic moment beyond the burnt-umber chrome lives inside the food photography itself.

What typography does Chipotle use, and what should I substitute?

Chipotle runs a two-typeface split. Trade Gothic LT Bold covers every uppercase headline and category label — 48/500 for hero headings, 40/700 for category tiles, 24/500 for menu names. Nunito (and Nunito Extra Bold / Nunito SemiBold variants) covers everything in mixed case — body paragraphs at 18/400, button labels at 16/700, footer links at 13/600. Trade Gothic LT Bold is proprietary; reasonable open-source substitutes are League Gothic, Bebas Neue, or Oswald at the same uppercase and weight-500 setting. Nunito is on Google Fonts directly and substitutes one-for-one.

Why is every button 4px-cornered instead of a pill?

Chipotle's page captured 14 occurrences of a 4px corner radius and only 3 of a 12px radius — every CTA, the menu category tiles, and the footer cards are 4px. The 12px radius is scoped to the Catering hero panels alone. There are no full-pill buttons anywhere. The primary CTA pattern is a burnt-umber `#451400` filled rectangle, 220px wide, 35px tall, with `0px 12px` padding and a 16/700 uppercase Nunito Extra Bold label — the hard-corner geometry matches the rectangular die-cut menu photography and the foil-wrap aesthetic of the brand itself.

What is the menu category tile pattern?

Each menu category — Burrito, Burrito Bowl, Quesadilla, Salad, Tacos, Kid's Meal, Chips & Sides — sits inside a white-fill card with a photographic die-cut of the food product centered above the category label. The label runs 24px uppercase Trade Gothic LT Bold in `#451400`. There is no caption, no price, no description on the tile itself — the photograph carries the entire identity and the label confirms it. Tiles sit in a responsive grid that drops from 4-up on desktop to 2-up on mobile, with `20px` gap as the universal rhythm constant (it appears 20 times in the captured spacing data).

When should I use the mustard-gold color?

Mustard gold `#b68207` is reserved for the Honey Chicken hero strip — the single chromatic moment at the very top of the page that announces the seasonal LTO menu item. It appears as a gradient pair with the deeper `#976500` and the brown stop `#6b321b` to render the foil-wrap callout band. Outside of that hero zone, gold does not appear as a CTA fill, a link color, or an accent on any other surface. Using gold as a general-purpose accent flattens the seasonal LTO signal — keep it scoped to the announcement strip and the rewards bag-grab promo only.

Where does the Rewards red appear?

Crimson `#ad2118` is the Rewards bag-grab card's signature — it shows up twice in the captured page, both inside the small panel that says `HONOR YOUR GRAB ON GIFT CARDS` near the middle of the home page. There is no Rewards-red CTA elsewhere, no error state mapped to it, no link color. Like the mustard gold, it is a scoped ceremonial token. A secondary tonal red `#9c1f16` also appears on a few text and border occurrences as the slightly darker stop in the same family. Outside of those two cards, the Rewards red does not appear.

Chipotle Design System

Chipotle's design system as a DESIGN.md file.

About Chipotle DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source chipotle.com

Food & Delivery

Chipotle's ordering surface reads like a deli counter laid out on butcher paper. The dominant chrome color is not black and not gray — it is a deep burnt-umber ink (`#451400`) that carries roughly 677 occurrences across the captured page, split almost evenly between text (335) and hairline border (331). That single token does the work that most retail systems split between a heading color, a body color, and a divider gray. Mustard gold (`#b68207`) shows up only 8 times — the Honey Chicken hero CTA strip and a Rewards bag-grab promo are essentially the entire chromatic budget of the page. Where most fast-casual brands ship a flat tomato red or a leaf green as their voltage, Chipotle reserves color for the moments the photograph cannot carry on its own.

This page packages Chipotle's marketing-and-order surface into one DESIGN.md file built on the Google Labs spec. Inside: 18 color tokens grouped into burnt-umber chrome (ink, hairline, shadow), photographic-safe neutrals (cream, white, ash), the single mustard-gold brand voltage, a crimson Rewards red, and four warm chili-tone gradients. 11 typography tokens run on a Trade Gothic LT Bold uppercase / Nunito body split — display sits at 48px in weight 500 uppercase rather than the 700+ weight that fintech brands lean on. The spec also captures 4px and 12px corner radii, an 8-step spacing scale from 5px to 40px anchored at 16px and 20px, and 17 components — the menu category tile, the burnt-umber filled CTA, the Rewards bag-grab card, the Catering hero panel, the bottom-of-page footer column.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Chipotle's restraint — die-cut food photography on cream-white tiles, 4px-cornered burnt-umber buttons with 16/700 Nunito Extra Bold uppercase labels, mustard-gold reserved for the hero strip — rather than a generic fast-casual theme. Or read the file as a discipline study: the system's strength is that almost every container reuses the same burnt-umber outline plus white fill plus photographic tile vocabulary, which is why Chipotle never needs a secondary accent to ship a new featured menu category.

What makes it distinct

Burnt-umber monochrome chrome#451400 carries 677 occurrences as both text (335) and hairline border (331), the structural workhorse of the whole site
Mustard-gold scarcity voltage#b68207 appears 8 times total, reserved for the Honey Chicken hero CTA and a single rewards strip
Photographic menu tiles, not typographic categoriesevery menu entry is a die-cut food photograph above 24px uppercase Trade Gothic LT Bold
Hard-corner geometryevery CTA carries a 4px radius and 9 of 12 radii on the page are 4px, with 12px reserved only for the catering hero panels
Two-typeface split disciplineTrade Gothic LT Bold uppercase for category and headline moments, Nunito 18/400 for descriptions and body, never blended

Live at chipotle.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

chipotle.com

Explore Chipotle

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Chipotle design system FAQ

Common questions about Chipotle's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Chipotle — official site

Chipotle Mexican Grill's ordering and rewards surface — the source this design.md describes.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Chipotle in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→