DoorDash Dasher

Overview

DoorDash Dasher is a high-energy recruitment platform designed to convert potential delivery drivers through bold visual contrast and direct, motivational messaging. The design system embraces 'Energetic Minimalism'—a movement that combines vibrant color blocking (vivid red #eb1700 against soft yellow backgrounds) with clean typography and decisive action elements to create urgency without visual clutter. The aesthetic evokes confidence, opportunity, and forward momentum: users should feel empowered to take control of their earning potential.

The brand voice is conversational, empowering, and action-oriented. Tone: direct without being pushy, optimistic without being naive. Vocabulary favors active verbs ('Earn,' 'Dash,' 'Discover') and personal agency ('your schedule,' 'your terms,' 'your money'). Example sentence in brand voice: 'Set your own schedule and keep more of what you earn—10% cash back on gas because your time matters.'

Colors

The color system is built on high-contrast, decisive accents that drive conversion. Primary (#eb1700) is DoorDash's signature red—used exclusively on call-to-action buttons, critical links, and active states. This red appears on approximately 4% of the page but commands attention through saturation and placement. Secondary (#4c0c3a, a deep plum) provides brand personality and is reserved for headings and accent text, creating visual hierarchy without competing with primary. Tertiary (#ffd700, a warm gold) is used sparingly for highlights and promotional badges.

The surface stack is deliberately minimal: white (#ffffff) dominates as the primary background, with subtle grays (#f7f7f7, #e9ecef, #d0d0d0) used for container layering and disabled states. On-surface text is near-black (#191919)

Typography

The type system is built on two complementary font families: DD-TTNorms Condensed (a geometric, high-impact condensed sans-serif) for display and headline levels, and TT-Norms (a clean, humanist sans-serif) for body and label text. This pairing creates visual distinction between attention-grabbing headlines and readable body copy. Display (56px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like 'WORK WHEN YOU WANT. EARN WHAT YOU NEED.' and uses the condensed variant for maximum impact. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) use the condensed family for section titles. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) use TT-Norms for readable paragraph text and form labels.

Label-md (14px, 600 weight, 0.01em letter-spacing) is used

Layout

The page layout follows a 12-column grid with a max-width of 1280px, enabling flexible responsive design from mobile to desktop. The hero section uses a split-screen composition: the left side (yellow background, 50% width on desktop) contains the headline, copy, and signup form; the right side (50% width) features a full-bleed hero image. On mobile, this stacks vertically with the form taking priority above the fold.

Whitespace is semantic and generous: lg spacing (40px) separates major sections (hero, features, FAQ), md spacing (24px) separates cards and form groups, and sm spacing (12px) separates inline elements. The gutter (24px) is applied consistently to left/right margins on desktop, reducing to 16px on tablet and 12px on mobile. Container padding uses md (24px) for standard cards

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering, not through color darkening. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, form containers) uses elevation.lg: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, readable shadow that lifts the element 8px from the background. Level 3 (modals, dropdowns, overlays) uses a stronger shadow: box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), creating more pronounced depth. All shadows use a 15% black opacity to maintain the clean, minimal aesthetic—never use harsh black shadows

Shapes

The shape philosophy is 'Functional Clarity'—rounded corners are used strategically to soften hard edges and improve usability, but never so much that they obscure the geometric precision of the layout. Buttons use full rounding (border-radius: 9999px) to create pill-shaped CTAs that feel friendly and clickable, with a minimum height of 48px and horizontal padding of 24px. Form inputs use subtle rounding (border-radius: 4px, or 0.25rem) to maintain a clean, technical appearance while remaining approachable. Cards and containers use lg rounding (border-radius: 1rem, or 16px) to create a modern,

Components

Action Elements Buttons are the primary driver of conversion and use the full rounding (9999px) to maximize affordance. Primary buttons (button-primary) use #eb1700 background with white text, 16px font-size, 600 font-weight, and 48px height. Padding is 12px horizontal (left/right) to accommodate the pill shape. On hover (button-primary-hover), the background darkens to #d41600 with a 200ms ease-in-out transition. On active/pressed (button-primary-active), the background further darkens to #a80d00. Secondary buttons use transparent background with a 2px solid border at #eb1700 and #eb1700 text; on hover, the background fills with #ffcccc (primary-container) and text changes to #570000 (on-primary-container).

Containers & Surfaces Cards (card) use white background (#ffffff), 1px bo

Do's and Don'ts

**Do**

• Do use primary red (#eb1700) exclusively on CTAs, links, and focus states—never on body text or large surface areas.
• Do maintain the yellow + plum + red color blocking in hero sections to preserve brand recognition and visual energy.
• Do apply 48px minimum height to all interactive elements (buttons, inputs, selects) to meet touch-target accessibility standards.
• Do use the condensed font family (DD-TTNorms Condensed) for all display and headline text to create visual distinction and impact.
• Do transition hover/focus states over 150-200ms with ease-in-out timing to create smooth, professional interactions.
• Do use lg spacing (40px) to separate major sections and create breathing room in the layout.

**Don't**

• Don't use primary red (#eb1700) for body text, backgrounds, or non-interactive elements—it's reserved for CTAs and focus states only.
• Don't apply border-radius: 0 to any interactive elements; use at least 4px rounding to maintain the brand's approachable aesthetic.
• Don't use harsh shadows (rgba(0, 0, 0, 0.3+)); keep shadow opacity at 12-15% for a clean, minimal feel.
• Don't mix font families within a single headline or body paragraph; use DD-TTNorms Condensed for display/headlines and TT-Norms for body/labels.
• Don't create input fields smaller than 48px in height; this violates accessibility standards and creates poor touch targets on mobile.
• Don't use the secondary color (#4c0c3a) on interactive elements; reserve it for headings and accent text only.