What is DoorDash's primary brand color?

DoorDash's brand voltage is DoorDash Red, a saturated warm-red rendered 23 times on the captured corporate page, exclusively as background fill on the primary pill CTAs (Get Started, Order Now, See How). It never appears as text color or border. The legacy DoorDash brand red — a slightly more orange tone wired as --color-doordash-red in the CSS — is declared but does not render anywhere on the captured surface; the system has migrated to the cooler red on the active marketing chrome while preserving the legacy hex as a CSS variable. There is also a navy reserved on the consumer surfaces (--color-navy) and a tea-leaf burgundy reserved for promotional bands.

What typeface does DoorDash use, and what should I substitute?

DoorDash runs TT-Norms across every typographic role on the corporate site — display, heading, body, button, nav, and footer. Every one of 18 captured typographic signatures uses the same family. Display sits at 40px / weight 700 / -0.64px letter-spacing (the tight negative tracking is the signature). Body sits at 16px / weight 400 / -0.64px tracking. Nav labels move to weight 500 at 18px. Two condensed cuts are declared in the CSS variables — TT-Norms Condensed and DD-TTNorms (a DoorDash-licensed version) — but the rendered surface uses only the regular cut. Open-source substitutes: Inter at the same weights covers it directly; for the tight -0.64px tracking, apply the equivalent letter-spacing or use Geist Sans which has comparable tighter cap height.

Why does DoorDash use a soft pink as the card surface?

The soft pink `{colors.surface-pink}` (#ffe8fe) appears 4 times as a background fill on the product-category cards under the hero — Restaurants, Grocery, Convenience. The pink is the system's chromatic intermediary between the saturated DoorDash Red CTA inside the card and the white page canvas around it. Without the pink, the red CTA would sit on white and read as a generic e-commerce shout; with the pink, the red reads as a warm marketplace voltage held inside a softer container. Where Uber Eats runs red-on-white directly and Grubhub uses a saturated orange-on-white, DoorDash inserts the pastel intermediary — a move that distinguishes the marketplace within the food-delivery category.

What is DoorDash's corner-radius philosophy?

The radius scale is binary: 20px on every product tile and card surface (72 occurrences, the dominant radius by a wide margin), and 9999px (rendered as a full pill) on every primary CTA (23 occurrences). There is no 8 / 12 / 16px middle tier — surfaces are either softly-rounded as the 20px card or fully-rounded as the pill button. A handful of 16px (4 occurrences) and 50% (5 occurrences for icons) appear on chrome that is technically off-system. The 20px is generous — softer than Instacart's 8px card and Uber's 12px tile — and reads as warmer / more approachable, matching the marketplace voice.

Can I use this DESIGN.md to build my own food-delivery or marketplace site?

Yes — the file feeds cleanly into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce DoorDash's specific moves: red-on-pill conversion voltage, soft-pink card surfaces, TT-Norms across every role, the tight negative-tracking display, and the 20px-or-pill radius binary. The tokens resolve without invention — every hex, font name, and component value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the soft-pink intermediary surface only works if your brand voltage is saturated enough to need softening. A muted brand color sitting on a soft-pink card reads as two competing pastel surfaces rather than as a held-back hot CTA inside a warm container.

DoorDash Design System

DoorDash's corporate marketing system as a DESIGN.md file.

About DoorDash DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source about.doordash.com

Food & Delivery
Marketplaces

DoorDash's corporate marketing site (about.doordash.com) does something most consumer marketplace brands do not: it commits fully to the brand voltage on every primary action and surrounds it with a soft pastel-pink canvas that softens what would otherwise be a saturated chromatic shout. The hero "Your Door to More" sits in matte ink on a near-white surface; underneath it, a 4-card product grid uses cards with `#ffe8fe`-pink fills and DoorDash Red `#eb1700` pill CTAs as the conversion targets. The pink reads as an unexpected move — Uber Eats, Grubhub, and Instacart all run their marketing on white plus a single saturated voltage, while DoorDash adds a quiet chromatic intermediary. The pink does not compete with the red; it softens it, the way a paper takeout bag softens a logo print.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 16 color tokens drawn from 1378 occurrences of matte ink (text 697, border 681), 305 occurrences of pure white, 87 of pure black, 36 of a near-black surface variant, and the 23-occurrence DoorDash Red brand voltage that appears exclusively as background fill on pill CTAs. Eleven typography tokens all run on TT-Norms — no second family on the corporate surface. The radius scale is brutally binary: 20px (72 occurrences) on every product tile and card, 9999px (23 occurrences) on every pill CTA, with 16px / 50% / 8px as rare one-off treatments. 16 components cover the pill primary CTA, the soft-pink card surface, the tight-tracked display headline, the navigation row with 18px / 500 labels, and the body paragraph in TT-Norms with -0.64px tracking.

Feed this file to Claude or Cursor and it reproduces DoorDash's specific moves: red-on-pill conversion voltage, soft-pink card surfaces softening the red, TT-Norms across every typographic role, the tight negative-tracking display, and the 20px-or-pill radius binary. The token references resolve cleanly. The one move worth borrowing only if your product is itself a consumer marketplace: the willingness to use a softening pastel intermediary between a saturated CTA voltage and a white canvas. SaaS brands generally cannot — the pink reads as commerce-warm rather than as productivity-cool. But on a marketplace where the conversion CTA is "Order now" rather than "Start trial," the soft canvas + saturated CTA pairing performs the warmth a delivery brand needs.

What makes it distinct

Red-on-pill voltageDoorDash Red #eb1700 appears 23 times exclusively as background fill on 9999px pill CTAs, never as text or border
TT-Norms everywhereevery one of 18 captured typographic signatures runs on TT-Norms; no second family on the corporate surface
Soft-pink card canvas`{colors.surface-pink}` #ffe8fe is the dominant card-tile background, paired with the brand red CTA inside each card
Two-radius binary20px on every product tile (72 occurrences, dominant), 9999px on every pill CTA (23 occurrences); nothing at 8 / 12 / 16px
Tight tracking displayh1 sits at 40px / weight 700 / -0.64px letter-spacing; the negative tracking pulls the headline to read as dense and confident rather than airy

Live at about.doordash.com

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

about.doordash.com

Explore DoorDash

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.

DoorDash design system FAQ

Common questions about DoorDash'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.

DoorDash — corporate site

DoorDash's corporate 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.