№ chipotle-com

Chipotle

Warm ochre and earthy browns—clean, spacious layout with a friendly, approachable sans-serif.

Marquee Herominimalism editorial food beveragelight

The hero image is a full-bleed, high-quality shot of the food, immediately establishing the product. The typography is clean and modern, prioritizing the product name and a concise descriptor. The overall feel is inviting and fresh. · food photography, restaurant hero, fast casual, food branding, modern typography, clean design, healthy food, chipotle, food website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: warm · earthy · muted

SwatchHexOKLCHSuggested roleCopy

Hex#db8528
OKLCHoklch(69.4% 0.145 62)
RoleDominant
find sites →
Hex#6b2d19
OKLCHoklch(38.0% 0.094 38)
RoleSurface
find sites →
Hex#e1bc95
OKLCHoklch(81.8% 0.067 68)
RoleInk
find sites →
Hex#a47f60
OKLCHoklch(62.4% 0.064 61)
RoleAccent
find sites →
Hex#ccd4a4
OKLCHoklch(85.2% 0.064 115)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Trade Gothic LT Bold	34px	500	1	Aa Bb Cc
h2	Trade Gothic LT Bold	24px	500	1.4	Aa Bb Cc
h3	Trade Gothic LT Bold	18px	500	1.4	Aa Bb Cc
body	Nunito	16px	400	1.4	Aa Bb Cc
button	FestivoLettersNo2	16px	700	2	Aa Bb Cc

Spacing scale

15px

16px

18px

20px

30px

32px

34px

44px

46px

48px

64px

Radius scale

0px

4px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #db8528;
  --color-surface: #6b2d19;
  --color-ink: #e1bc95;
  --color-accent: #a47f60;
  --color-detail: #ccd4a4;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Chipotle.
Reference design system (extracted from the live site):
- Palette: #db8528, #6b2d19, #e1bc95, #a47f60, #ccd4a4
- Typefaces: Trade Gothic LT Bold, Nunito, FestivoLettersNo2
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/chipotle-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Trade Gothic LT Bold

34px

500

Aa Bb Cc

Trade Gothic LT Bold

24px

500

1.4

Aa Bb Cc

Trade Gothic LT Bold

18px

500

1.4

Aa Bb Cc

body

Nunito

16px

400

1.4

Aa Bb Cc

button

FestivoLettersNo2

16px

700

Aa Bb Cc

Build a landing page in the visual style of Chipotle. Reference design system (extracted from the live site): - Palette: #db8528, #6b2d19, #e1bc95, #a47f60, #ccd4a4 - Typefaces: Trade Gothic LT Bold, Nunito, FestivoLettersNo2 - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/chipotle-com