DoorDash Design System

Overview

DoorDash's corporate marketing site (about.doordash.com) inverts the food-delivery convention. Softened voltage. Where Uber Eats runs a saturated red CTA directly on a white canvas, Grubhub commits to an orange-on-white shout, and Instacart turns its green into a structural hairline rather than a fill, DoorDash takes a different route: it commits fully to the brand red on every primary CTA — DoorDash Red ({colors.primary} — #eb1700) appears 23 times, exclusively as background fill on pill buttons — but surrounds each CTA with a soft pink {colors.surface-pink} (#ffe8fe) card surface that softens what would otherwise read as a generic e-commerce shout. The pink does not compete with the red; it contains it.

The typographic system is TT-Norms everywhere. All 18 captured typographic signatures run on the same family — no second face for headings, no monospace for captions, no editorial serif anywhere. Display sits at 40px / weight 700 with normal tracking; the descended h2 lands at 24px / 700 / -0.64px letter-spacing (the tight negative tracking is the signature move — pulls the headline to read as dense and confident rather than airy). Body is 16px / 400 with the same -0.64px tracking. Nav labels move to weight 500 at 18px. There is no weight ladder of 400 / 500 / 600 / 700 — the system jumps from 400 (body) to 450 (sub-heading) to 500 (nav) to 700 (display) with no 600 step. Where Instacart relies on its proprietary Instacart Sans at three weights, DoorDash runs TT-Norms at four including the unusual 450.

The radius scale is two-radius binary. {rounded.lg} 20px (72 occurrences, the dominant value by a wide margin) on every product tile, category card, and content surface; {rounded.full} 9999px (23 occurrences) on every primary CTA pill. The 20px is generous — softer than Instacart's 8px card or Uber's 12px tile — and reads as marketplace-warm rather than as productivity-engineered. A handful of {rounded.md} 16px (4 occurrences) and 50%-circle (5 occurrences) treatments exist on icon-only chrome but are off-system.

Key Characteristics:

• DoorDash Red ({colors.primary} — #eb1700) appears 23 times, exclusively as background fill on pill CTAs; never as text or border.
• Soft pink {colors.surface-pink} (#ffe8fe) carries the category-card and promo-band surfaces — the chromatic intermediary between the red voltage and the white canvas.
• A legacy DoorDash red ({colors.primary-legacy} — #ff3008) is declared as --color-doordash-red in the CSS but never rendered on the captured surface — preserved as brand-history artifact.
• TT-Norms across every typographic role; no second family on the corporate surface.
• Tight negative tracking on every body and display token (-0.36px to -0.64px); even nav labels at 18px / 500 sit with tracking pulled inward.
• Two-radius binary: {rounded.lg} 20px on every tile (72 occurrences), {rounded.full} 9999px on every pill CTA (23 occurrences). No 8 / 12 / 16px middle tier.
• Navy {colors.navy} (#233069) and burgundy {colors.burgundy} (#810b00) wired as CSS variables but absent from the captured render — reserved for consumer-side surfaces or promotional bands not exposed on the corporate page.
• Ink {colors.ink} (#191919) carries 1378 occurrences — 697 text, 681 border — making it the load-bearing tone. Pure black {colors.shadow} appears 87 times as a tighter body-text variant.

Colors

Brand

• DoorDash Red ({colors.primary} — #eb1700): frequency 23 — all 23 are background fill, never text or border. Wired as the rendered fill on every pill CTA (Get Started, Order Now, See How). The brand voltage held to a single surface role.
• DoorDash Legacy Red ({colors.primary-legacy} — #ff3008): frequency 0 in the rendered surface; declared as --color-doordash-red. The brand's prior voltage hex — slightly more orange / saturated — preserved as a CSS variable but migrated away from on the corporate marketing chrome.

Ink

• Ink ({colors.ink} — #191919): frequency 1378 — 697 text, 681 border. Wired as --color-text-primary and --reject-all-button-text-color. The load-bearing tone — display headlines, body text, nav labels, and 681 border-occurrence surfaces. Not pure black; a near-black with a slight warmth that matches the cream-warm canvas treatment elsewhere on the page.
• Ink Secondary ({colors.ink-secondary} — #1f2229): frequency 36 — 18 text, 18 border. A blueish-near-black variant used on secondary nav surfaces and footnote text.
• Ink Tertiary ({colors.ink-tertiary} — #434343): frequency 0 rendered; wired as --color-text-medium, --color-grey-dark, and --prebanner-text-color. Reserved for tertiary text — likely metadata and timestamp strips.
• Shadow ({colors.shadow} — #000000): frequency 87 — 43 text, 43 border, 1 shadow. Used as the tighter body-text color on product-card prose; pure black where ink would feel too warm.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 305 — 131 border, 131 text-on-dark, 42 background, 1 shadow. The page floor; pure white with no off-white tinting. Wired as --color-white, --prebanner-background-color, and --color-grey-light (which paradoxically resolves to white on this page).
• Surface Pink ({colors.surface-pink} — #ffe8fe): frequency 4 — all 4 as background fill. The signature card-tile surface: holds the Restaurants / Grocery / Convenience category cards and the promotional pullquote band. The chromatic intermediary that softens the red CTA inside each card.
• Surface Stone ({colors.surface-stone} — #e7e4d9): frequency 0 rendered; wired as --color-stone. A warm taupe declared but not exposed on the corporate page — likely reserved for the consumer marketplace's storefront surfaces.
• Hairline ({colors.hairline} — #d9d9d9): frequency 15 — all 15 as border. The card-outline tone on product tiles and input fields.
• Hairline Soft ({colors.hairline-soft} — #cccccc): frequency 4 — all 4 as background. The disabled-state or hover-tint surface.

Reserved (declared but not rendered)

• Navy ({colors.navy} — #233069): wired as --color-navy. A deep desaturated navy reserved for promotional bands and consumer-merchant landing pages.
• Blue Light ({colors.blue-light} — #e4ebf7): wired as --color-blue-light. The pale-blue surface paired with the navy.
• Burgundy ({colors.burgundy} — #810b00): wired as --color-burgundy. A deep brick-burgundy reserved for promotional band backgrounds — distinct from the brand red.
• Teal Dark ({colors.teal-dark} — #024c52): wired as --color-teal-dark. Part of the broader product-vertical palette.
• Teal Mid ({colors.teal-mid} — #4ba0a7): wired as --color-teal-mid. The lighter teal companion.

Typography

Font Family

The system runs TT-Norms across every typographic role on the corporate page — display, heading, body, button, nav, and footer. Both the regular cut (TT-Norms) and a DoorDash-licensed variant (DD-TTNorms) are declared, with fallback walking -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif. A condensed cut (DD-TTNorms Condensed) is declared in --font-condensed but not rendered on the captured surface — reserved for product-specific marketing pages or merchant-side dashboards.

There is no second family — no editorial serif, no monospace, no secondary humanist sans. TT-Norms handles every job from 12px caption to 40px hero display.

Hierarchy

Principles

The defining typographic move is tight negative tracking on body and display. Every running-text token sits at -0.14px to -0.64px letter-spacing — the pull-inward tracking makes the type read as dense and confident rather than airy. Where Instacart commits to default 0 tracking and Uber Eats sits at slight positive tracking, DoorDash pulls every letter pair tighter. The cumulative effect on the 40px hero is a headline that reads as packed and decisive.

The weight ladder is 400 / 450 / 500 / 700 — the unusual 450 step (used on the sub-heading tier at 20px) sits between regular body 400 and the medium 500 used on nav labels. Most type systems use 400 / 500 / 600 / 700; DoorDash skips 600 entirely and inserts a 450 between body and medium. This is a TT-Norms-specific weight that does not exist in most open-source substitutes.

Note on Font Substitutes

TT-Norms is licensed from Typetype. The closest open-source substitute is Inter at the same weights with the tracking applied manually (-0.04em on body and 0 on display). For the unusual weight-450 step, Inter at weight 500 with font-weight: 425 interpolation via variable-font CSS gets close. Geist Sans has comparable tighter cap height and is closer in feel than Inter, though it lacks the same humanist warmth. There is no direct free substitute for the DD-TTNorms Condensed cut.

Layout

Spacing System

• Base unit: 8px, with 0px 8px (54 occurrences) and 32px (38 occurrences) as the dominant values.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 48px.
• Section padding (vertical): the dominant band padding is 48x48x16px on the hero and 48px on promotional bands.
• Card internal padding: {spacing.lg} (32px) on category cards; {spacing.md} (24px) on product tiles.
• Top-nav padding: {spacing.base} (16px) vertical, {spacing.lg} (32px) horizontal.

Grid & Container

• Max content width: 1224px (declared as --max-width). Hero band runs at full width with the centered text column at ~620px.
• Hero block: white canvas with a 2-column layout — text-left, lifestyle photo of a woman with takeout right.
• Category strip: 3-up grid of soft-pink category cards (Restaurants / Grocery / Convenience), each with an illustrated glyph and a red pill CTA.
• Promo band: full-width navy band ("The best of your neighborhood, delivered for less") and a full-width pink band below it.
• Product tile grid: 4-up cards with 2-column copy alternating with lifestyle photography.

Rhythm

The page rhythm alternates between dense product grid and single-photo promo band. Hero is a single lifestyle photograph plus headline. The 3-up pink category strip below is dense and chromatically warm. The pink promo band that follows is full-bleed. Then a 4-up product-tile grid with photography. Then a navy promotional band. The system uses background-color shifts (white → pink → navy → pink → white) to create rhythm rather than using vertical spacing alone.

Elevation

The system has essentially no shadow tier. The captured page has 1 occurrence of a soft shadow under the hero photograph and 1 inside the focus state of the email-capture row. Cards lift off the canvas by surface-color contrast (pink card on white floor) rather than by layered shadows.

• Flat (no shadow): hero text band, all category cards, the navy promo band, the pink pullquote band, the product-tile grid, the footer — 99% of surfaces.
• Photographic lift: the hero lifestyle photo carries a soft shadow underneath, the only consistently-elevated element on the captured page.
• Hairline borders: {colors.hairline} (#d9d9d9) carries the card-outline work — 15 border occurrences across product tiles and inputs.

Shapes

The radius scale is two-radius binary:

• {rounded.lg} 20px — 72 occurrences. The dominant radius by a wide margin. Every product tile, every category card, every content surface. Generous-soft rather than tight; 20px is unusually high among marketplace systems (Instacart 8px, Uber 12px, Grubhub 16px). Reads as marketplace-warm.
• {rounded.full} 9999px — 23 occurrences. Every primary CTA pill. Renders as a fully-rounded capsule on the brand-red conversion buttons.
• {rounded.md} 16px — 4 off-system occurrences on icon backgrounds.
• {rounded.sm} 8px — 1 occurrence on the email-capture input outline.
• 50% — 5 occurrences on circular icon glyphs inside category cards.

There is no 4 / 6 / 12px tier. Surfaces are either 20px-rounded tiles or full-pill CTAs, with everything else as a one-off exception.

Components

hero-section — White canvas, ink text, 48x48x16px padding. Holds the hero h1 "Your Door to More" at {typography.display-xl}, a sub-paragraph below, and a single red pill CTA on the left, with a lifestyle photo on the right.

hero-heading — Matte ink text on white, TT-Norms 40px / 700, normal tracking. The largest typographic moment on the page.

section-heading — TT-Norms 24px / 700 / -0.64px tracking. The category h2s ("Grocery", "Restaurants", "Convenience") sitting inside the pink category cards.

body-paragraph — Pure black {colors.shadow} running text at {typography.body-md} (16px / 400 / -0.64px tracking). The default body style on white surfaces.

body-paragraph-muted — Ink-tertiary {colors.ink-tertiary} variant for secondary copy.

button-primary — DoorDash Red {colors.primary} fill, white text, TT-Norms 16px / 400, {rounded.full} 9999px pill, 0x6px padding, 40px height. No border. "Get Started" / "Order Now" / "See How" — the signature conversion button on the page. Rendered 23 times across the captured surface.

button-secondary — White {colors.canvas} fill, ink text, 1px ink border, same dimensions. Used for secondary actions on light surfaces.

top-nav — White {colors.canvas} band, 64px height. DoorDash logo flush left, product-nav links center (Products / Resources / Pricing / Company), red "Get Started" pill CTA flush right. No bottom hairline rule — the nav floats over the hero canvas below.

nav-link — Transparent background, ink text in {typography.nav-link} (TT-Norms 18px / 500), 8x0px padding. No hover background captured.

category-card — Soft pink {colors.surface-pink} fill, ink text, {rounded.lg} 20px radius, 32px padding. Holds an illustrated glyph at the top (utensils / banana / shopping bag), a {typography.heading-sm} title, a 1-line description, and a red pill CTA at the bottom. The signature card of the system.

product-tile — White {colors.canvas} fill, 1px {colors.hairline} border, {rounded.lg} 20px radius, 24px padding. Holds product-feature copy and a lifestyle photo. Sits alongside category cards in the 4-up grid below the hero.

promo-band — Full-bleed {colors.surface-pink} background, {typography.display-lg} centered headline, 48x0px padding. The pink pullquote band ("Your favorite brands from your favorite tastes").

navy-band — Full-bleed {colors.navy} (#233069) background, white text, 48x48x16px padding. The "Pickup and delivery, less than five minutes away" promotional band.

text-input — White fill, ink text, 1px {colors.hairline} border, {rounded.sm} 8px radius, 8x12px padding, 40px height. Notably the only component on the page that uses the 8px radius — the input is the off-system surface.

footer — Ink {colors.ink} canvas, white text, 48px padding. Multi-column link list at {typography.body-sm}. Inverts the system: ink as floor, white as ink.

Do's and Don'ts

Do keep DoorDash Red {colors.primary} (#eb1700) as background fill on pill CTAs only. The captured page renders the brand voltage 23 times and every single one is a pill-button fill — using it as text color or border breaks the discipline that defines the conversion language.

Do use {colors.surface-pink} (#ffe8fe) as the card-surface intermediary. The pink is the system's softening move — placing a red CTA directly on the white canvas without the pink intermediary loses the marketplace-warm voice that distinguishes DoorDash from Uber Eats and Grubhub.

Do apply -0.14px to -0.64px letter-spacing on every body and display token. The tight negative tracking is the typographic signature; default 0 tracking makes the system read as generic SaaS rather than as the dense, decisive voice DoorDash carries.

Do use {rounded.lg} 20px on every product tile and card. The 20px is generous-soft — softer than Instacart's 8px card and Uber's 12px tile. It is the radius that distinguishes the marketplace within the food-delivery category; bumping down to 12px reads as borrowed from a peer brand.

Don't use the legacy {colors.primary-legacy} (#ff3008) as a new brand-color token. It is declared as --color-doordash-red for backward compatibility only and never renders on the active marketing surface. Use {colors.primary} (#eb1700) for any intentional red.

Don't introduce a weight-600 step in the typography ladder. The system runs 400 / 450 / 500 / 700 — the unusual 450 sub-heading weight sits between body and medium, and a 600 step would compete with both. Stay on the four-weight ladder TT-Norms ships with.

Don't add a third radius value between 8px and 20px. The system is binary: {rounded.lg} 20px tile or {rounded.full} pill CTA. A 12px or 16px corner reads as a generic SaaS card library rather than as DoorDash's specific marketplace-soft chrome.

Don't render {colors.surface-pink} on text or buttons. It is a card-and-band background fill only — 4 occurrences, all as backgrounds. Using it on a button or as a text color breaks the soft-canvas role and reads as a foreign brand spilling into the system.

Known Gaps

• Consumer-side surfaces: this DESIGN.md captures about.doordash.com (the corporate marketing site) only. The consumer-facing www.doordash.com ordering surface is Cloudflare-protected and renders a bot-verification page on automated extraction; the consumer storefront, restaurant detail pages, cart, and checkout flow carry their own token system that is not represented here.
• Reserved palette: the navy {colors.navy} (#233069), burgundy {colors.burgundy} (#810b00), and teal {colors.teal-dark} / {colors.teal-mid} are declared as CSS variables but render only minimally or not at all on the captured corporate surface. They likely carry weight on merchant-side dashboards, DashPass subscription pages, and seasonal promotional bands.
• Hover and focus states: the captured surface exposes resting states only. Pill-CTA hover, focus ring, and disabled states are not visible.
• Form input variants: {component.text-input} carries only the email-capture style; search, address-entry, and tip-selection inputs live on the consumer ordering surface.
• Motion: lifestyle photographs may carousel-rotate on the corporate page, but the spec captures end-state values only.
• DD-TTNorms Condensed: declared as --font-condensed but not rendered. Reserved for product-specific marketing pages.
• Dark mode: the captured surface is light-only. A dark variant exists in the merchant-dashboard product but is not represented.
• Legacy red migration: {colors.primary-legacy} (#ff3008) is preserved in CSS as --color-doordash-red but no longer rendered. The brand has migrated to the cooler #eb1700 on active marketing chrome.