Diff

Allbirds vs Plaid

61 token-level differences between these two design systems.

Role tokens
Background
#ece9e2 #ffffff
Text
#000000 #000000
Brand
#3a6b52 #0a85ea
Border
#d6d2c8 rgba(0, 0, 0, 0.10)
Display font
Geograph Plaid Sans
Body size
16px 16px
colors 50 changed
~ bg #ece9e2 #ffffff
~ bg-soft #f4f2ec #f7f9fb
~ surface #ffffff #f3f5f8
~ surface-soft #f7f5ef #fafbfc
~ brand #3a6b52 #0a85ea
~ brand-deep #1c3527 #003c80
~ text-muted #555555 #4a5568
~ text-soft #767676 #7a8390
~ text-faint #a6a39b #a0a8b3
~ link #000000 #0a85ea
~ link-hover #3a6b52 #0066c0
~ selected-bg #dfe8e1 #eaf3ff
~ border #d6d2c8 rgba(0, 0, 0, 0.10)
~ border-strong #b9b4a7 rgba(0, 0, 0, 0.20)
~ border-soft #e4e0d6 rgba(0, 0, 0, 0.06)
+ bg-blue #eaf3ff
+ bg-cream #f3efe6
+ bg-ink #000000
+ surface-cream #faf6ed
+ text-medium #1a1f29
+ brand-strong #0066c0
+ brand-soft #dceeff
+ brand-wash rgba(10, 133, 234, 0.08)
+ accent #000000
+ accent-soft rgba(10, 133, 234, 0.08)
+ disabled #c4cad3
+ border-blue rgba(10, 133, 234, 0.30)
+ success-bg #dcf3e3
+ success-text #1f5d3f
+ warning-bg #fff0c5
+ warning-text #7a5e1f
+ danger-bg #fde0e0
+ danger-text #8a2828
+ info-bg #dceeff
+ info-text #003c80
bg-deeper #e2ded4
bg-warm #f0ede5
surface-deeper #e6e2d8
brand-hover #2f5743
brand-pressed #264634
brand-tint #dfe8e1
charcoal #2a2a2a
charcoal-soft #444444
text-on-brand #ffffff
border-brand #3a6b52
clay #c08457
success #3a6b52
warning #c08457
danger #a3402f
info #3a6b52
typography 5 changed
~ display {"family":"Geograph","size":56} {"family":"Plaid Sans","size":80}
~ h1 {"family":"Geograph","size":24} {"family":"Plaid Sans","size":56}
~ h2 {"family":"Geograph","size":22} {"family":"Plaid Sans","size":44}
~ body {"family":"Geograph","size":16} {"family":"Plaid Sans","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 0px 8px
~ card 0px 12px
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · Plaid → Allbirds