W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
DoorDash
DoorDash is the U.S.-anchored last-mile logistics platform — restaurant delivery, grocery, retail — founded in 2013. The brand identity centers on DoorDash Red (#FF3038), a warm, slightly orange-leaning red carried on the wordmark, the rolling-dot mark, and the primary CTA. The red reads against near-white canvases with deep neutral type. doordash.design is DoorDash's public design system. The voice is direct, friendly, and product-forward — the brand chrome stays out of the way of the marketplace it surfaces.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/doordash/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/doordash/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
DoorDash
DoorDash is the U.S.-anchored last-mile logistics platform — restaurant delivery, grocery, retail — founded in 2013. The brand identity centers on DoorDash Red (#FF3038), a warm, slightly orange-leaning red carried on the wordmark, the rolling-dot mark, and the primary CTA. The red reads against near-white canvases with deep neutral type. doordash.design is DoorDash's public design system. The voice is direct, friendly, and product-forward — the brand chrome stays out of the way of the marketplace it surfaces.
Tags: doordash, delivery, food, brand, red, light-first
Atoms
Palette
DoorDash · [email protected] · Proprietary — All Rights Reserved
DoorDash's brand palette is centered on DoorDash Red (#FF3038), a warm, slightly orange-leaning red that carries the wordmark and the primary CTA across the marketing site and consumer app. The red reads against a near-white canvas with deep neutral text, supported by a small functional ramp. doordash.design documents the design system; the brand voice is direct, friendly, and product-forward.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
doordash-red |
DoorDash Red | #FF3038 |
doordash-red-pressed |
DoorDash Red Pressed | #D9242B |
doordash-ink |
DoorDash Ink | #191919 |
doordash-charcoal |
DoorDash Charcoal | #2D2D2D |
doordash-graphite |
DoorDash Graphite | #767676 |
doordash-mist |
DoorDash Mist | #E3E3E3 |
doordash-fog |
DoorDash Fog | #F5F5F5 |
doordash-white |
DoorDash White | #FFFFFF |
doordash-success |
DoorDash Success | #1E874B |
doordash-warning |
DoorDash Warning | #E58A00 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
doordash-white |
#FFFFFF |
surface |
doordash-fog |
#F5F5F5 |
surface-elevated |
doordash-white |
#FFFFFF |
text-primary |
doordash-ink |
#191919 |
text-secondary |
doordash-charcoal |
#2D2D2D |
text-tertiary |
doordash-graphite |
#767676 |
primary |
doordash-red |
#FF3038 |
primary-hover |
doordash-red-pressed |
#D9242B |
accent |
doordash-red |
#FF3038 |
accent-hover |
doordash-red-pressed |
#D9242B |
success |
doordash-success |
#1E874B |
warning |
doordash-warning |
#E58A00 |
error |
doordash-red-pressed |
#D9242B |
border |
doordash-mist |
#E3E3E3 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
doordash-ink |
#191919 |
surface |
doordash-charcoal |
#2D2D2D |
surface-elevated |
doordash-graphite |
#767676 |
text-primary |
doordash-white |
#FFFFFF |
text-secondary |
doordash-mist |
#E3E3E3 |
text-tertiary |
doordash-graphite |
#767676 |
primary |
doordash-red |
#FF3038 |
primary-hover |
doordash-red-pressed |
#D9242B |
accent |
doordash-red |
#FF3038 |
accent-hover |
doordash-red-pressed |
#D9242B |
success |
doordash-success |
#1E874B |
warning |
doordash-warning |
#E58A00 |
error |
doordash-red-pressed |
#D9242B |
border |
doordash-charcoal |
#2D2D2D |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
doordash-red |
#FF3038 |
on-identity |
doordash-white |
#FFFFFF |
primary |
doordash-red |
#FF3038 |
primary-hover |
doordash-red-pressed |
#D9242B |
accent |
doordash-red |
#FF3038 |
accent-hover |
doordash-red-pressed |
#D9242B |
mark |
doordash-red |
#FF3038 |
success |
doordash-success |
#1E874B |
warning |
doordash-warning |
#E58A00 |
error |
doordash-red-pressed |
#D9242B |
background-light |
doordash-white |
#FFFFFF |
background-dark |
doordash-ink |
#191919 |
surface-light |
doordash-fog |
#F5F5F5 |
surface-dark |
doordash-charcoal |
#2D2D2D |
text-primary-light |
doordash-ink |
#191919 |
text-primary-dark |
doordash-white |
#FFFFFF |
text-secondary-light |
doordash-charcoal |
#2D2D2D |
text-tertiary-light |
doordash-graphite |
#767676 |
border-light |
doordash-mist |
#E3E3E3 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.wordmark.fill
- allowed: doordash-red, doordash-white, doordash-ink
- forbidden: doordash-red-pressed, doordash-warning, doordash-success, doordash-graphite
The DoorDash wordmark renders in DoorDash Red on light surfaces, in white on dark surfaces, or in DoorDash Ink for monochrome applications. The pressed-red variant is an interactive-state value, not a wordmark fill. Functional warning / success hues must never substitute for the brand red.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace
DoorDash's wordmark is flat in the signature red with generous clearspace. Gradients, shadows, and recolorings compromise the warm-red optical recognition the brand depends on across delivery surfaces, app icons, and driver-facing collateral.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
DoorDash Ink (#191919) on DoorDash White (#FFFFFF) gives ~17:1 — well above the WCAG AA 4.5:1 floor for body text. The rule codifies the floor for new foreground/background pairings introduced on DoorDash surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
DoorDash Red on DoorDash White must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) to keep the primary CTA perceptible. The warm red is comfortably above the floor against white but the rule encodes the expectation explicitly.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, subtle-divider
DoorDash Red is reserved for the wordmark, the mark, and the primary call to action. Using it inside body copy or for subtle dividers dilutes the signature accent and weakens the visual hierarchy the brand voice depends on.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. DoorDash surfaces are used by consumers, dashers, and merchants under varied conditions; AA is the floor for any text on any DoorDash surface.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
DoorDash's marketing headlines on doordash.com and doordash.design sit in the Medium (500) through Bold (700) band. Lighter weights compromise the direct, confident voice; heavier weights are not part of the standard kit.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: doordash-white, doordash-fog, doordash-ink
- doesNotPairWith: doordash-warning, doordash-success
DoorDash Red reads cleanest against the white canvas, the lightest fog neutral, or the deep ink dark canvas. Pairing it adjacent to the warning amber or the green success hue introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source: https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License:
Proprietary — All Rights Reserved - Attribution: DoorDash, Inc. — DoorDash and the DoorDash wordmark are trademarks of DoorDash, Inc. The signature red (#FF3038) is verified via the simple-icons brand database (v13.0.0). doordash.design is DoorDash's publicly available design-system surface and informs the role mappings here.
- Imported:
2026-05-19 - Notes: DoorDash's marketing and product surfaces use bespoke typography that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. Supporting neutral and functional swatches in the palette are authored complements faithful to doordash.design; see the palette atom notes.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by DoorDash
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
DoorDash
A clear hierarchy in DoorDash's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ doordash-red #FF3038 accent-hover
→ doordash-red-pressed #D9242B background-dark
→ doordash-ink #191919 background-light
→ doordash-white #FFFFFF border-light
→ doordash-mist #E3E3E3 error
→ doordash-red-pressed #D9242B identity
→ doordash-red #FF3038 mark
→ doordash-red #FF3038 on-identity
→ doordash-white #FFFFFF primary
→ doordash-red #FF3038 primary-hover
→ doordash-red-pressed #D9242B success
→ doordash-success #1E874B surface-dark
→ doordash-charcoal #2D2D2D surface-light
→ doordash-fog #F5F5F5 text-primary-dark
→ doordash-white #FFFFFF text-primary-light
→ doordash-ink #191919 text-secondary-light
→ doordash-charcoal #2D2D2D text-tertiary-light
→ doordash-graphite #767676 warning
→ doordash-warning #E58A00 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from doordash)
Light mode (14 roles)
accent
→ doordash-red accent-hover
→ doordash-red-pressed background
→ doordash-white border
→ doordash-mist error
→ doordash-red-pressed primary
→ doordash-red primary-hover
→ doordash-red-pressed success
→ doordash-success surface
→ doordash-fog surface-elevated
→ doordash-white text-primary
→ doordash-ink text-secondary
→ doordash-charcoal text-tertiary
→ doordash-graphite warning
→ doordash-warning Dark mode (14 roles)
accent
→ doordash-red accent-hover
→ doordash-red-pressed background
→ doordash-ink border
→ doordash-charcoal error
→ doordash-red-pressed primary
→ doordash-red primary-hover
→ doordash-red-pressed success
→ doordash-success surface
→ doordash-charcoal surface-elevated
→ doordash-graphite text-primary
→ doordash-white text-secondary
→ doordash-mist text-tertiary
→ doordash-graphite warning
→ doordash-warning Rules (8 typed constraints)
error · 6 rules
colorChoice logo.wordmark.fill allowed doordash-red, doordash-white, doordash-ink forbidden doordash-red-pressed, doordash-warning, doordash-success, doordash-graphite The DoorDash wordmark renders in DoorDash Red on light surfaces, in white on dark surfaces, or in DoorDash Ink for monochrome applications. The pressed-red variant is an interactive-state value, not a wordmark fill. Functional warning / success hues must never substitute for the brand red.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, placed-without-clearspace DoorDash's wordmark is flat in the signature red with generous clearspace. Gradients, shadows, and recolorings compromise the warm-red optical recognition the brand depends on across delivery surfaces, app icons, and driver-facing collateral.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA DoorDash Ink (#191919) on DoorDash White (#FFFFFF) gives ~17:1 — well above the WCAG AA 4.5:1 floor for body text. The rule codifies the floor for new foreground/background pairings introduced on DoorDash surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large DoorDash Red on DoorDash White must clear 3:1 at large-text and UI-component sizes (WCAG AA-large) to keep the primary CTA perceptible. The warm red is comfortably above the floor against white but the rule encodes the expectation explicitly.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, subtle-divider DoorDash Red is reserved for the wordmark, the mark, and the primary call to action. Using it inside body copy or for subtle dividers dilutes the signature accent and weakens the visual hierarchy the brand voice depends on.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. DoorDash surfaces are used by consumers, dashers, and merchants under varied conditions; AA is the floor for any text on any DoorDash surface.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 DoorDash's marketing headlines on doordash.com and doordash.design sit in the Medium (500) through Bold (700) band. Lighter weights compromise the direct, confident voice; heavier weights are not part of the standard kit.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith doordash-white, doordash-fog, doordash-ink doesNotPairWith doordash-warning, doordash-success DoorDash Red reads cleanest against the white canvas, the lightest fog neutral, or the deep ink dark canvas. Pairing it adjacent to the warning amber or the green success hue introduces a chromatic conflict that fights for attention without resolving into hierarchy.
Provenance
- Source
- https://raw.githubusercontent.com/simple-icons/simple-icons/13.0.0/_data/simple-icons.json
- License
Proprietary — All Rights Reserved- Attribution
- DoorDash, Inc. — DoorDash and the DoorDash wordmark are trademarks of DoorDash, Inc. The signature red (#FF3038) is verified via the simple-icons brand database (v13.0.0). doordash.design is DoorDash's publicly available design-system surface and informs the role mappings here.
- Imported
2026-05-19- Notes
- DoorDash's marketing and product surfaces use bespoke typography that is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles. Supporting neutral and functional swatches in the palette are authored complements faithful to doordash.design; see the palette atom notes.