Diff

Grubhub vs DoorDash

37 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#1a1a1a → #191919

Brand

#f44129 → #ff3008

Border

#e5e5e5 → #e8e8e8

Display font

Sentinel → DoorDash Sans Display

Body size

16px → 16px

colors 33 changed

~ surface-warm #fff3ef → #fff7f5

~ surface-cream #fff7ec → #faf5e8

~ brand #f44129 → #ff3008

~ brand-hover #d93619 → #e02c08

~ brand-active #b62c12 → #bf2306

~ brand-pale #fcc8be → #ffd2c8

~ brand-deep #7a1c0a → #8a1d05

~ brand-light #ffece8 → #fff0ec

~ text #1a1a1a → #191919

~ text-muted #5a5a5a → #5d5d5d

~ text-soft #757575 → #767676

~ link #1a1a1a → #ff3008

~ link-hover #f44129 → #bf2306

~ border #e5e5e5 → #e8e8e8

~ border-strong #cccccc → #cdcdcd

~ border-input #999999 → #919191

~ border-card #e5e5e5 → #ebebeb

~ star-fill #f44129 → #ff3008

~ free-delivery-green #0d8043 → #00854c

~ pickup-blue #1a73e8 → #0a47bf

~ bestseller-bg #ffece8 → #fff0ec

~ bestseller-text #7a1c0a → #8a1d05

~ trending-bg #fff7ec → #fff8e6

~ success #0d8043 → #00854c

~ success-soft #e6f4ec → #e6f3ec

~ danger #c91515 → #cc1212

~ info #1a73e8 → #0a47bf

+ dashpass-yellow #ffd400

+ dashpass-bg #191919

+ dashpass-text #ffffff

− grubhub-plus-yellow #ffd700

− grubhub-plus-bg #1a1a1a

− cuisine-tag-bg #f5f5f5

typography 4 changed

~ display {"family":"Sentinel","size":72} → {"family":"DoorDash Sans Display","size":72}

~ h1 {"family":"Sentinel","size":40} → {"family":"DoorDash Sans Display","size":40}

~ h2 {"family":"Sentinel","size":32} → {"family":"DoorDash Sans Display","size":32}

~ body {"family":"Avenir Next","size":16} → {"family":"DoorDash Sans","size":16}

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · DoorDash → Grubhub