--- version: alpha name: "DoorDash" website: "https://about.doordash.com" description: >- A food-delivery marketplace whose corporate marketing surface runs on DoorDash Red (#eb1700), TT-Norms across every typographic role, and pill-shaped CTAs at 9999px — paired with a soft pastel pink card surface, a 20px softly-rounded product tile (72 occurrences, the dominant radius), and a comprehensive single-typeface system that hits 18 typographic signatures all on TT-Norms with weights 400 / 450 / 500 / 700. The brand voltage is held in reserve: the saturated DoorDash Red appears 23 times, exclusively as background fill on the primary pill CTA, while ink #191919 carries 1378 occurrences as the dominant text and border tone. A second declared red — DoorDash legacy red #ff3008 — is wired into a CSS variable but never rendered on the captured surface, preserved as a brand-history artifact rather than as an active token. seo: title: "DoorDash Design System for React — DoorDash Red, TT-Norms, 16 components" metaDescription: "DoorDash's corporate marketing system as a DESIGN.md file. DoorDash Red #eb1700 on pill CTAs, TT-Norms across every role, 20px soft-rounded tiles, 16 colors and 16 components for React, Next.js, and AI tools." highlights: - "Red-on-pill voltage — DoorDash Red #eb1700 appears 23 times exclusively as background fill on 9999px pill CTAs, never as text or border" - "TT-Norms everywhere — every 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 binary — 20px on every product tile (72 occurrences, dominant), 9999px on every pill CTA (23 occurrences); nothing at 8 / 12 / 16px" - "Tight tracking display — h1 sits at 40px / weight 700 / -0.64px letter-spacing; the negative tracking pulls the headline to read as dense and confident rather than airy" tags: - "Food & Delivery" - "Marketplaces" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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://about.doordash.com" title: "DoorDash — corporate site" description: "DoorDash's corporate 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 DoorDash's primary brand color?" answer: "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." - id: "typography" title: "What typeface does DoorDash use, and what should I substitute?" answer: "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." - id: "pink-canvas" title: "Why does DoorDash use a soft pink as the card surface?" answer: "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." - id: "rounded-style" title: "What is DoorDash's corner-radius philosophy?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own food-delivery or marketplace site?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: primary: "#eb1700" primary-legacy: "#ff3008" ink: "#191919" ink-secondary: "#1f2229" ink-tertiary: "#434343" shadow: "#000000" canvas: "#ffffff" surface-pink: "#ffe8fe" surface-stone: "#e7e4d9" hairline: "#d9d9d9" hairline-soft: "#cccccc" navy: "#233069" blue-light: "#e4ebf7" burgundy: "#810b00" teal-dark: "#024c52" teal-mid: "#4ba0a7" typography: display-xl: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 46px letterSpacing: 0 display-lg: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 36.8px letterSpacing: 0 display-md: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 27.6px letterSpacing: "-0.64px" heading-md: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 450 lineHeight: 30px letterSpacing: "-0.56px" heading-sm: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 20.7px letterSpacing: 0 body-md: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "-0.64px" body-emphasis: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 22px letterSpacing: "-0.01px" body-sm: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 19.6px letterSpacing: "-0.14px" nav-link: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 20.7px letterSpacing: 0 button-md: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 18.4px letterSpacing: 0 caption: fontFamily: "TT-Norms, DD-TTNorms, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 450 lineHeight: 18px letterSpacing: "-0.36px" rounded: none: "0px" sm: "8px" md: "16px" lg: "20px" full: "9999px" spacing: xs: "8px" sm: "12px" base: "16px" md: "24px" lg: "32px" xl: "40px" 2xl: "48px" components: hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "48px 48px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.shadow}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-tertiary}" typography: "{typography.body-md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 6px" height: "40px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "0px 12px" height: "40px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px 32px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "8px 0px" height: "37px" category-card: backgroundColor: "{colors.surface-pink}" textColor: "{colors.ink}" typography: "{typography.heading-sm}" rounded: "{rounded.lg}" padding: "32px" product-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.hairline}" promo-band: backgroundColor: "{colors.surface-pink}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: "48px 0px" navy-band: backgroundColor: "{colors.navy}" textColor: "{colors.canvas}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "48px 48px 16px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "8px 12px" height: "40px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "48px" --- ## 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 | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 40px | 700 | 46px | 0 | Hero h1 ("Your Door to More") | | `{typography.display-lg}` | 32px | 700 | 36.8px | 0 | Section displays below the hero | | `{typography.display-md}` | 24px | 700 | 27.6px | -0.64px | Category h2 ("Grocery", "Restaurants", "Convenience") | | `{typography.heading-md}` | 20px | 450 | 30px | -0.56px | Sub-headings and lead-paragraph blocks | | `{typography.heading-sm}` | 18px | 500 | 20.7px | 0 | Nav-link tier and inline strong labels | | `{typography.body-md}` | 16px | 400 | 24px | -0.64px | Default running text under headlines | | `{typography.body-emphasis}` | 16px | 700 | 22px | -0.01px | Inline strong / emphasized phrases | | `{typography.body-sm}` | 14px | 500 | 19.6px | -0.14px | Caption rows and meta strips | | `{typography.nav-link}` | 18px | 500 | 20.7px | 0 | Top-nav category labels | | `{typography.button-md}` | 16px | 400 | 18.4px | 0 | Primary and secondary pill CTA labels | | `{typography.caption}` | 12px | 450 | 18px | -0.36px | Legal and footnote captions | ### 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.