What is In-N-Out's primary brand color?

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.

What typeface does In-N-Out use, and what should I use as a substitute?

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.

What corner-radius system does In-N-Out use?

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.

How is the In-N-Out marketing site structured?

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.

Can I use this DESIGN.md to build a retro-Californian food brand interface?

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.

In-N-Out Burger Design System

In-N-Out Burger's marketing design system as a DESIGN.md file.

About In-N-Out Burger DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source in-n-out.com

Food & Delivery

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.

What makes it distinct

Dual red-on-white voltagebrand deep-red appears 50 times across text, borders, and backgrounds; the entire interactive chrome runs on one chromatic signal
Montserrat bold all-caps for navigation11px uppercase weight-500 labels read as a compact retro-diner signage convention, not digital convention
Pill radius on primary CTAthe 29px border-radius on the main button creates a stadium-pill form that echoes In-N-Out's iconic oval signs
Illustration over photographythe site deploys retro-illustrated assets (the arrow sign, the '69 Camaro, the mascot) alongside photography, both at full-bleed
No muted text tierthe system runs two text colors (black and white) with no grey; secondary copy shifts to white-on-red or black-on-white

Live at in-n-out.com

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

in-n-out.com

Explore In-N-Out Burger

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

In-N-Out Burger design system FAQ

Common questions about In-N-Out Burger'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.

In-N-Out Burger — official site

In-N-Out Burger's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.