The visual approach
DoorDash's interface is built on controlled intensity. The core palette pairs #FF3008 (brand red) with #5D1049 (burgundy) against soft pastel fields — #FFE5F0 (pink) and #F9F871 (yellow) — that bracket content without competing with it. The color system doesn't modulate; it divides. Buttons and CTA surfaces take the full-strength red, backgrounds take the pastels, and body text sits at #191919 (near-black) with mid-tones handled by #5C5C5C (gray 700).
The typography follows a similar logic. The custom sans-serif (DD-TTNorms or a Graphik variant) runs a steep scale — 64px bold for hero treatments down to 14px for metadata — and relies on weight more than size variation to establish hierarchy. Headings are set at 700 weight, body at 400. The spread between 16px body and 20px large body is minimal, which keeps the rhythm tight and reduces the need for responsive juggling.
Geometry is generous. Pill buttons carry a 24px border-radius that reads as friendly rather than clinical. Input fields use 8px radius — enough to soften corners without announcing themselves. Containers max out at 1280px, and sections are spaced 80–120px apart vertically, which gives each block room to breathe and makes scroll depth feel manageable.
What works
The pastel backgrounds do more than decorate. #FFE5F0 and #F9F871 create visual zones that help users parse multi-section layouts without relying on borders or drop shadows. On a landing page with mixed content — value props, merchant grids, FAQs — those fields act as implicit dividers. The effect is a cleaner DOM and fewer layout hacks.
The pill button is a case study in surface area. At 24px radius, the hit target feels larger than it is, and the shape softens urgency — a flat rectangle would read as transactional, but the pill reads as approachable. Pairing that with #FF3008 keeps it visible without needing motion or gradient tricks. The result is a CTA that works at small and large breakpoints with no tuning.
The typography scale's steepness pays off in information density. When a heading can be 48px bold and a subhead can be 28px bold, the page doesn't need to rely on spacing or color shifts to signal importance. This makes the design compress well on mobile — the hierarchy survives even when vertical space is tight.
The container constraint at 1280px is wider than many design systems (which often cap at 1200px or 1140px), and it reflects DoorDash's content model. Restaurant grids, product carousels, and multi-column merchant lists need horizontal real estate. The extra 80–140px prevents cramping and reduces the need for horizontal scroll or pagination on desktop.
What a builder can borrow
Start with the two-tier color strategy. Separate brand colors (high saturation, used sparingly) from zone colors (low saturation, used liberally). If your product has distinct sections — user-facing vs. merchant-facing, browse vs. checkout — pastel fields let you mark territory without adding weight. Implement this as CSS custom properties: --color-brand-primary: #FF3008; --color-zone-a: #FFE5F0; --color-zone-b: #F9F871; and apply zone colors to section backgrounds, not components.
Adopt the pill button radius as a middle path. 24px radius works on buttons between 40px and 56px tall. Below that, it distorts; above that, it looks inflated. If your button height varies, derive radius from height: border-radius: calc(var(--button-height) * 0.5); for full pills, or cap it at 24px for partial rounding.
Use the steep typography scale when your content has clear hierarchical breaks. A 48px / 28px / 16px progression (3:1.75:1 ratio) is aggressive, but it eliminates the need for color-coded headings or icon prefixes. Set it in a Tailwind @theme block or CSS variables: --font-size-hero: 64px; --font-size-h1: 48px; --font-size-h2: 36px; --font-size-h3: 28px; --font-size-lg: 20px; --font-size-base: 16px; --font-size-sm: 14px; and map weight to semantic use, not aesthetics.
For section spacing, the 80–120px range works when sections are self-contained. Below 80px, consecutive sections bleed together; above 120px, the page feels fragmented. If your layout mixes short and long blocks, use 80px as the default and reserve 120px for transitions between major content shifts (e.g., from hero to feature grid).
The 1280px max-width is a product decision disguised as a layout constraint. If your content is grid-based (cards, listings, tables), measure your ideal column count and multiply by card width plus gap. Let that dictate your container width rather than inheriting a framework default.