Diff

The Home Depot vs Lowe's

53 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#333333 #1a1a1a
Brand
#f96302 #012169
Border
#cccccc #d0d0d0
Display font
Helvetica Neue 75 Bold Inter
Body size
14px 14px
colors 47 changed
~ surface-strong #e6e6e6 #eaeaea
~ surface-blue-soft #e8f0f7 #e6ecf5
~ masthead #ffffff #012169
~ brand #f96302 #012169
~ brand-deep #d65300 #001447
~ pro-blue #00659e #012169
~ text #333333 #1a1a1a
~ text-muted #595959 #5b5b5b
~ link #3e7697 #0046be
~ link-hover #1f4d6e #012169
~ border #cccccc #d0d0d0
~ border-strong #999999 #9a9a9a
~ border-input #7a7a7a #9a9a9a
~ rating-orange #f96302 #f26522
~ rating-empty #cccccc #d0d0d0
~ success #007e34 #007a3d
~ warning-soft #fff5e6 #fff4e5
~ danger #c01818 #cc0000
~ info #00659e #012169
+ surface-red-soft #fdeaea
+ masthead-deep #001447
+ masthead-active #000d33
+ brand-darkest #000d33
+ lowes-red #cc0000
+ lowes-red-deep #a30000
+ lowes-red-active #7a0000
+ clearance-orange #f26522
+ text-on-blue #ffffff
+ text-on-red #ffffff
+ free-shipping #007a3d
+ in-stock #007a3d
+ clearance-tag #cc0000
surface-orange-soft #fef3eb
surface-charcoal #333333
surface-charcoal-deep #1a1a1a
masthead-band #f96302
brand-active #a8420a
brand-soft #fef3eb
pro-blue-deep #004870
pro-blue-active #002f4d
text-on-brand #ffffff
text-on-charcoal #ffffff
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 · Lowe's → The Home Depot