Diff

The Home Depot vs Costco

55 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#333333 #333333
Brand
#f96302 #005dab
Border
#cccccc #cccccc
Display font
Helvetica Neue 75 Bold Inter
Body size
14px 14px
colors 49 changed
~ bg-page #f5f5f5 #f4f4f4
~ surface-soft #f5f5f5 #f4f4f4
~ surface-strong #e6e6e6 #e8e8e8
~ surface-blue-soft #e8f0f7 #e3f0fa
~ masthead #ffffff #005dab
~ brand #f96302 #005dab
~ brand-deep #d65300 #003e74
~ text-muted #595959 #5e5e5e
~ text-soft #7a7a7a #7d7d7d
~ link #3e7697 #005dab
~ link-hover #1f4d6e #003e74
~ border-input #7a7a7a #999999
~ out-of-stock #7a7a7a #7d7d7d
~ success #007e34 #3a8b00
~ warning-soft #fff5e6 #fff7e6
~ danger #c01818 #e31837
~ info #00659e #005dab
+ surface-yellow #fff8d6
+ masthead-deep #003e74
+ masthead-active #002c52
+ brand-darkest #002c52
+ costco-red #e31837
+ costco-red-deep #b41027
+ costco-red-active #8c0c1f
+ warehouse-yellow #ffeb00
+ warehouse-yellow-deep #fdd000
+ text-on-blue #ffffff
+ text-on-red #ffffff
+ text-on-yellow #000000
+ rating-yellow #fdd000
+ member-savings #e31837
+ online-only #005dab
surface-orange-soft #fef3eb
surface-charcoal #333333
surface-charcoal-deep #1a1a1a
masthead-band #f96302
brand-active #a8420a
brand-soft #fef3eb
pro-blue #00659e
pro-blue-deep #004870
pro-blue-active #002f4d
text-on-brand #ffffff
text-on-charcoal #ffffff
rating-orange #f96302
savings-orange #f96302
pickup-green #007e34
pickup-green-deep #005d26
pro-tag #00659e
exclusive-tag #f96302
typography 4 changed
~ display {"family":"Helvetica Neue 75 Bold","size":48} {"family":"Inter","size":72}
~ h1 {"family":"Helvetica Neue 75 Bold","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Helvetica Neue 75 Bold","size":32} {"family":"Inter","size":32}
~ body {"family":"Helvetica Neue 75 Bold","size":14} {"family":"Inter","size":14}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Costco → The Home Depot