---
version: alpha
name: "In-N-Out Burger"
website: "https://www.in-n-out.com"
description: >-
  A California fast-food institution whose marketing site runs a two-voltage
  system — deep burger-chain red (#b60000) as the primary brand color and ink
  black (#000000) as structure — set in Montserrat at bold weight for all-caps
  navigation and headlines and regular weight for body copy, against a white
  canvas (#ffffff). The design relies heavily on illustrated and photographic
  assets (the iconic yellow-arrow sign, retro car imagery, a mascot) for brand
  expression; the system chrome uses red for CTA buttons, nav links, and
  section headings, with a 29px pill radius on the primary CTA, 10px cards,
  and a 50% circle for icon treatments, making it the most visually assertive
  system in the fast-casual category.

seo:
  title: "In-N-Out Burger Design System for React — brand red #b60000, Montserrat, 14 components"
  metaDescription: "In-N-Out Burger's marketing design system as a DESIGN.md file. Brand red #b60000 on white, Montserrat bold all-caps navigation, pill CTAs at 29px radius, retro-Californian visual language. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Dual red-on-white voltage — brand deep-red appears 50 times across text, borders, and backgrounds; the entire interactive chrome runs on one chromatic signal"
    - "Montserrat bold all-caps for navigation — 11px uppercase weight-500 labels read as a compact retro-diner signage convention, not digital convention"
    - "Pill radius on primary CTA — the 29px border-radius on the main button creates a stadium-pill form that echoes In-N-Out's iconic oval signs"
    - "Illustration over photography — the site deploys retro-illustrated assets (the arrow sign, the '69 Camaro, the mascot) alongside photography, both at full-bleed"
    - "No muted text tier — the system runs two text colors (black and white) with no grey; secondary copy shifts to white-on-red or black-on-white"
  tags:
    - "Food & Delivery"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    In-N-Out Burger's marketing site is a case study in brand confidence through chromatic repetition. The brand deep-red appears 50 times in the captured page — as nav link text, CTA button fills, section headings, image borders, and overlay backgrounds — making it one of the highest-frequency single-color deployments in the food-and-delivery category. Where McDonald's holds its red to logo and accent, and where Shake Shack leans on a hunter-green brand identity, In-N-Out saturates the entire interface in red-on-white, then reinforces it with illustrated assets that have been in continuous use since the 1960s: the yellow arrow sign, the Camaro from the television ads, the mascot silhouette.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 7 color tokens built on a red-black-white triad with a single mid-grey for borders; 10 typography tokens all running Montserrat — bold at 500 weight for all-caps navigation at 11px, bold at 700 for uppercase section headings at 15px, and regular 400 for body at 15px; a radius scale that runs from 0px to a 29px stadium-pill on the primary CTA, with 50% circles for icon treatments and 10px cards; and 14 component definitions covering the red-pill CTA button, the photo-over-illustration hero grid, the retro card tiles, and the full-bleed illustrated billboard section.

    Feed this file to Claude or Cursor and it will reproduce In-N-Out's specific moves: brand-red voltage at near-saturation across every interactive element, Montserrat bold all-caps at small sizes, the 29px pill radius on primary CTAs, and black-on-white body text with no grey tier. The move worth borrowing — the commitment to running one chromatic voltage across text, borders, and backgrounds simultaneously — only holds when the voltage is this saturated and the brand has this much recognition. Attempted with a softer color, it would read as accidental rather than intentional.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.in-n-out.com"
      title: "In-N-Out Burger — official site"
      description: "In-N-Out Burger's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is In-N-Out's primary brand color?"
      answer: "In-N-Out's brand voltage is a deep burger-chain red (#b60000) — a dark, chromatic red that reads at full saturation against white without the brightness of a true fire-engine red. It appears 50 times on the captured page: 23 as text, 22 as borders, and 5 as background fills. In the CSS it has no variable name (the site uses no custom property system — all values are hardcoded). The red runs across navigation links, CTA button fills, section headings, card border accents, and image overlay tints. Unlike most food brands that hold red for logo and accent only, In-N-Out runs it as the primary text and border color for all interactive elements."
    - id: "typography"
      title: "What typeface does In-N-Out use, and what should I use as a substitute?"
      answer: "In-N-Out runs Montserrat across every tier. Navigation links render at 11px / 500 / uppercase with no letter-spacing declared; section headings at 15px / 700 / uppercase; body copy at 15px / 400 with normal text-transform. The all-caps treatment at navigation size (11px) is very small — it works within the established visual convention of fast-food signage but needs care at accessibility sizes. Montserrat is free on Google Fonts and the closest substitute is itself. If you need an alternative, Nunito Bold captures the rounded-humanist geometry at similar weights. For the all-caps label tier, Raleway SemiBold is a close match."
    - id: "radius"
      title: "What corner-radius system does In-N-Out use?"
      answer: "In-N-Out uses a four-value radius scale. The 50% radius (7 occurrences) is used for circular icon buttons and badge treatments. The 29px radius (1 occurrence) is the stadium-pill on the primary CTA button — it produces an oval or elongated-pill form that echoes the brand's oval sign geometry. The 10px radius (2 occurrences) is used for card surfaces and content tiles. The 6px radius (1 occurrence) appears on smaller UI chips. There is no 0px square-corner treatment — even the smallest surfaces have at least 6px rounding, making this the most rounded system in the food-delivery category."
    - id: "site-structure"
      title: "How is the In-N-Out marketing site structured?"
      answer: "The marketing homepage opens with a full-bleed photography hero (a burger with red-text headline overlay), then transitions into a 2x3 grid of illustrated editorial tiles covering brand stories: Company Store, Join Our Team, Our History, Gift Cards, Cookout Truck, Foundations. Below the grid sits a full-bleed illustrated billboard section featuring the brand's retro '69 Camaro and the In-N-Out Burger neon sign. The site mixes photography with illustration — the editorial tiles use a flat-illustrative graphic style, while the hero and billboard use photography and photo-realistic rendering. A modal dialog (a salute-to-veterans CTA with a close button) appeared over the hero at capture time."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a retro-Californian food brand interface?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce In-N-Out's specific moves: deep red at high frequency across text, borders, and backgrounds; Montserrat bold all-caps navigation at 11px; the 29px stadium-pill CTA; a two-column editorial tile grid; and black-on-white body copy with no grey secondary tier. Token references resolve cleanly — {colors.primary} for the red, {typography.nav-link} for the uppercase nav, {rounded.pill} for the CTA. Note that the illustrative and photographic assets are proprietary; the spec provides the token skeleton but not the visual assets that give the system its retro-California personality."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#b60000"
  ink: "#000000"
  canvas: "#ffffff"
  ink-inverse: "#ffffff"
  hairline: "#999999"
  overlay: "#000000"

typography:
  display-xl:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: 0
  heading-md:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 22.5px
    letterSpacing: 0
  body-md:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0
  body-sm:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0
  label-md:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 22.5px
    letterSpacing: 0
  nav-link:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  caption:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: 0
  cta-label:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 22.5px
    letterSpacing: 0
  footer-text:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0

rounded:
  sm: "6px"
  md: "10px"
  pill: "29px"
  full: "50%"

spacing:
  xs: "5px"
  sm: "7px"
  md: "8px"
  base: "10px"
  lg: "15px"
  xl: "34px"
  2xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.cta-label}"
    rounded: "{rounded.pill}"
    padding: "7px 34px"
    height: "40px"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "6px 15px"
    height: "36px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "0px"
    padding: "0px 15px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: "0px 15px 0px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.heading-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "0px"
    borderColor: "{colors.primary}"
  editorial-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "0px"
    padding: "0px"
  icon-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.full}"
    padding: "0px"
    height: "40px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "5px 10px"
    height: "36px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.footer-text}"
    padding: "0px 15px"
  modal-overlay:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.md}"
    padding: "20px 15px"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "2px 8px"
---

## Overview

In-N-Out Burger's marketing site runs one chromatic voltage at near-maximum deployment. **Red saturation as identity.** The brand deep-red appears 50 times in the captured page — as text on navigation links, as background fills on CTA buttons and badge treatments, as borders on section headings and card accents, and as overlay tints on editorial tiles. Unlike fast-food peers McDonald's (red-to-yellow gradient branding, red held for logo/accent), Shake Shack (hunter-green brand voltage deployed sparingly), and Five Guys (red-and-white at half the frequency), In-N-Out runs red across text, borders, and fills simultaneously — a saturation that reads as brand certainty rather than as decoration.

The illustration-photography hybrid makes the visual system distinctive within the food-delivery category. The 2x3 editorial grid on the homepage deploys flat-illustrative graphic tiles alongside photographic assets, then transitions into a full-bleed illustrated billboard featuring a retro 1969 Camaro and the neon In-N-Out sign. This mix of illustration (Company Store, Join Our Team, Gift Cards) and photography (hero burger, billboard car) is not the convention for fast-casual digital — it is In-N-Out's specific continuity with its mid-century California roadside origin.

**Key Characteristics:**
- Brand deep-red (`{colors.primary}`) at frequency 50: 23 text, 22 border, 5 background — the dominant chromatic signal across every interactive tier.
- Ink black (`{colors.ink}`) at frequency 91: body text, overlay, shadow, nav structure.
- White canvas (`{colors.canvas}`) at frequency 31: the page ground and inverse text on red surfaces.
- Montserrat across all tiers: 11px / 500 / uppercase for navigation, 15px / 700 / uppercase for headings, 15px / 400 for body.
- 29px pill radius on the primary CTA — a stadium-oval form that references the brand's oval sign geometry.
- 50% circular radius for icon treatments and badge elements.
- Full-bleed photography and illustration deployed at equal visual weight — the site treats illustrated and photographic assets as interchangeable formats.

## Colors

### Brand

- **Primary** (`{colors.primary}` — #b60000): frequency 50. Used as text (23), border (22), background (5). In-N-Out's single brand voltage — runs across navigation links, CTA buttons, section headings, image border accents, and tile overlays. Not wired into CSS custom properties; hardcoded throughout the stylesheet.

### Structure

- **Ink** (`{colors.ink}` — #000000): frequency 91. Used as text (41), background (3), border (36), shadow (11). The structural color — body paragraphs, footer background, shadow layers on cards. Shadow occurrences (11) are notable — the system uses genuine drop shadows on the modal dialog.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 31. Used as text (14) on red fills, background (4), border (13). The page floor and the inverse text color for red-background elements.
- **Hairline** (`{colors.hairline}` — #999999): frequency 6, all as borders. The neutral mid-grey used on form inputs and secondary card borders. Not a text color — limited to border context only.

## Typography

### Font Family

The system runs a single voice: **Montserrat** (Google Fonts), falling back to `sans-serif`. Three weight variants appear in the captured surfaces: 500 for navigation labels at 11px uppercase, 700 for headings and CTA labels at 15px uppercase, and 400 for body copy at 15px. Montserrat's humanist-geometric construction at bold weights reads as rounded and approachable — a contrast to the sharpness of the red voltage.

### Hierarchy

| Token | Size | Weight | Case | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 24px | 700 | default | 30px | Hero headline overlay |
| `{typography.heading-md}` | 15px | 700 | uppercase | 22.5px | Section headings, editorial tile labels |
| `{typography.body-md}` | 15px | 400 | default | 22.5px | Body copy, descriptions |
| `{typography.nav-link}` | 11px | 500 | uppercase | 16px | Navigation link labels |
| `{typography.label-md}` | 11px | 500 | uppercase | 16px | Category labels, chip text |
| `{typography.caption}` | 12px | 700 | default | 18px | Sub-navigation, metadata |
| `{typography.button-md}` | 15px | 700 | default | 22.5px | CTA button labels |
| `{typography.footer-text}` | 15px | 400 | default | 22.5px | Footer navigation and legal text |

### Principles

The all-caps treatment at 11px / weight 500 for navigation is the smallest legible uppercase setting in the captured directory — approaching the floor of comfortable reading at screen resolution. It works in this context because the navigation category labels are short (one to two words: "Menu," "Locations," "History") and the contrast on white is maximum. The 15px / 700 uppercase heading size is where the system becomes visually assertive — at full saturation in brand red, it reads as signage rather than as web type.

### Note on Font Substitutes

Montserrat is free on Google Fonts — no substitution needed for production use. For a brand with a similar register, **Raleway Bold** has a comparable all-caps personality; **Nunito Bold** is softer at the same weight.

## Layout

### Spacing System

- **Base unit:** no strict module is evident; values cluster around 7–8px for micro-gaps and 15px for horizontal margins.
- **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 7px · `{spacing.md}` 8px · `{spacing.base}` 10px · `{spacing.lg}` 15px · `{spacing.xl}` 34px · `{spacing.2xl}` 96px.
- **Dominant values:** 7px (icon labels, micro-margins), 15px (horizontal nav padding), 34px (CTA horizontal padding).

### Grid & Container

- **Hero:** full-bleed photography with red-text headline overlay. No padding at the viewport edge — the image fills the container.
- **Editorial tile grid:** 2×3 mosaic of illustrated and photographic editorial tiles at equal scale. Each tile is a full-bleed image with text overlay.
- **Billboard section:** full-bleed illustrated scene (Camaro + In-N-Out neon sign) spanning the full viewport width.

### Rhythm

The page alternates between editorial photography/illustration (full-bleed, zero margin) and nav/text zones (fixed height, constrained horizontal padding). The rhythm is dense — editorial panel follows editorial panel with minimal vertical breathing room between. The mid-century American roadside aesthetic is reinforced by the density: roadside signage is not spaced; it is stacked.

## Elevation

The system uses actual drop shadows — not hairlines, not tonal lift. The captured page registers 11 shadow occurrences, all using pure ink black as the shadow color. The modal dialog is the primary elevated surface: it sits above an overlay backdrop with a genuine box-shadow. Card tiles appear to use a subtle shadow on hover to signal interactivity. This makes In-N-Out one of the few food-delivery brand sites in the directory that deploys real drop-shadow elevation rather than hairline-only separation.

## Shapes

The radius scale is **mixed, with strong pill commitment**:

- `{rounded.full}` 50% — 7 occurrences. Circular icon buttons, badge elements, and the brand's favicon treatment.
- `{rounded.pill}` 29px — 1 occurrence. The primary CTA button — a stadium-pill that echoes the brand's oval sign and button geometry from printed materials.
- `{rounded.md}` 10px — 2 occurrences. Content cards and secondary surface tiles.
- `{rounded.sm}` 6px — 1 occurrence. Smaller UI chips and form elements.

There is no 0px square-corner surface in the captured system. Even secondary buttons and form inputs carry at least 6px rounding — a consistent warm-geometry policy across the board.

## Components

**`button-primary`** — Brand-red fill (`{colors.primary}`), white text, `{rounded.pill}` 29px radius, 7×34px padding, 40px height. "View Menu" and equivalent primary CTAs — the stadium-pill form is the signature CTA shape across all In-N-Out communications.

**`button-secondary`** — Transparent fill, brand-red text and border, `{rounded.md}` 10px radius, same Montserrat bold. Used for secondary actions and "Learn more" style links within editorial tiles.

**`top-nav`** — White canvas, 48px height, 15px horizontal padding. Brand logo centered or left-aligned, all-caps nav links (`{typography.nav-link}`) in brand red flush right. The nav color-codes its links in red rather than the conventional black-on-white.

**`nav-link`** — Transparent background, brand-red text at `{typography.nav-link}` (11px / 500 / uppercase), 15px right padding. The red text on white is the system's interactive affordance signal at the nav tier.

**`hero-heading`** — Brand-red text at `{typography.display-xl}` on the photography hero. No background fill; the headline floats over the food photography.

**`section-heading`** — Brand-red text at `{typography.heading-md}` (15px / 700 / uppercase). Used for section titles like "Quality You Can Taste" — always uppercase, always red.

**`body-paragraph`** — Ink-black text at `{typography.body-md}` (15px / 400). Descriptions, quality copy, and marketing body text.

**`card`** — White canvas, brand-red 1px border, `{rounded.md}` 10px radius, 0 padding on the image frame. Editorial content cards — the red border is the primary brand signal.

**`editorial-tile`** — Full-bleed illustrated or photographic tile with a white text overlay. No padding; the image fills edge to edge. Used in the 2x3 grid for Company Store, Join Our Team, Our History, Gift Cards, Cookout Truck, Foundations.

**`icon-button`** — Brand-red fill, white icon, 50% radius (circular), 40px height. Badge-style icon buttons and circular interactive elements.

**`text-input`** — White fill, ink text at `{typography.body-md}`, 5×10px padding, 36px height, 1px `{colors.hairline}` border. Standard form fields — grey rather than red border signals neutral state.

**`footer`** — Ink-black fill, white text at `{typography.footer-text}` (15px / 400), flush horizontal padding. The single dark-canvas surface in the system.

**`modal-overlay`** — Black-canvas overlay with the modal card (`{rounded.md}` 10px radius) centered. The veterans-tribute modal captures the only genuine elevation event on the page.

**`badge`** — Brand-red fill, white text at `{typography.label-md}` (11px / 500 / uppercase), full circular radius, tight padding. Used for notification dots and category badges.

## Do's and Don'ts

**Do** run brand red on navigation links, not just CTA buttons. The system deploys `{colors.primary}` as the text color for all nav links simultaneously — this is the move that makes the system feel branded throughout the chrome, not just at the primary action point.

**Do** use the 29px pill radius (`{rounded.pill}`) on primary CTA buttons. The stadium-pill is the brand's CTA signature — reducing it to 10px or 6px would borrow the secondary-card radius and lose the distinctive oval geometry.

**Do** mix illustration and photography at equal weight. The editorial tile grid treats illustrated assets and photographic assets as interchangeable — both fill the same tile template at the same scale. Treating illustration as subordinate to photography would break the retro-Californian visual register.

**Do** use `{colors.hairline}` only for form input borders. It is a neutral structural token — 6 occurrences, all borders. Do not use it as a text color or surface fill.

**Don't** apply the brand-red fill to large background sections other than CTAs and icon treatments. The system uses red as text (23x) and border (22x) far more than as fill (5x). Large red fills read as urgency rather than identity in this system; the white canvas is the ground.

**Don't** render body copy in brand red. The red text convention in this system is reserved for navigation links, section headings, and CTA labels — all short, high-impact text. Running paragraph body copy in red would make 15px / 400 prose illegible and would break the contrast economy.

**Don't** introduce a grey text tier for secondary copy. The system has no muted grey text — secondary information shifts to a smaller size or moves to the footer, not to a lighter text color. Adding a mid-grey secondary tone would introduce a third ink value the system does not have.

**Don't** swap the Montserrat all-caps nav labels to title case. The uppercase treatment at 11px is the fast-food signage convention — lowercasing the labels would read as a different brand category (lifestyle, startup) rather than casual-dining retail.

## Known Gaps

- **Menu and ordering surfaces:** the restaurant menu detail page, item customization, and any online-ordering flow carry additional component tokens (item cards, modifier checkboxes, cart surfaces) not visible on the marketing homepage.
- **Hover and focus states:** the interactive states for nav links, editorial tiles, and card surfaces were not captured. The system likely uses a red-darken hover treatment on the red elements but this is inferred, not measured.
- **Mobile layout:** the extraction ran at desktop width. The mobile layout (hamburger navigation, stacked editorial tiles) is not represented in this spec.
- **Dark mode:** the system does not appear to have a dark-mode variant. The footer's black-canvas strip is the only dark surface captured.
- **Photographic and illustrative assets:** the visual personality of the system is heavily dependent on proprietary photography (food shots, campaign Camaro image) and the proprietary illustration style (Company Store, Foundations tiles). The token spec provides the chrome skeleton but not the assets.
- **Animation and transition:** the site likely uses fade and slide transitions on editorial tiles and the full-bleed billboard. Easing values and timing are not captured from the static extraction.