Diff

Our Place vs Allbirds

41 token-level differences between these two design systems.

Role tokens
Background
#fcfaf6 #ece9e2
Text
#35312e #000000
Brand
#af5a3c #3a6b52
Border
#e4dccb #d6d2c8
Display font
Chelt Geograph
Body size
16px 16px
colors 35 changed
~ bg #fcfaf6 #ece9e2
~ bg-soft #f6f1e8 #f4f2ec
~ bg-deeper #efe7d8 #e2ded4
~ surface-soft #f6f1e8 #f7f5ef
~ brand #af5a3c #3a6b52
~ brand-deep #8f4730 #1c3527
~ text #35312e #000000
~ text-strong #2a2724 #000000
~ text-muted #6b645c #555555
~ text-faint #9a9189 #a6a39b
~ link #af5a3c #000000
~ link-hover #8f4730 #3a6b52
~ border #e4dccb #d6d2c8
~ border-strong #35312e #b9b4a7
~ border-soft #efe7d8 #e4e0d6
~ success #5a7a4d #3a6b52
~ warning #c8861a #c08457
~ danger #a73b2b #a3402f
~ info #5c707e #3a6b52
+ bg-warm #f0ede5
+ surface-deeper #e6e2d8
+ brand-hover #2f5743
+ brand-pressed #264634
+ brand-tint #dfe8e1
+ charcoal #2a2a2a
+ charcoal-soft #444444
+ text-soft #767676
+ text-on-brand #ffffff
+ selected-bg #dfe8e1
+ border-brand #3a6b52
+ clay #c08457
brand-soft #d8a087
cta-secondary-bg #ebe5d4
cta-secondary-text #35312e
text-on-image #ffffff
typography 4 changed
~ display {"family":"Chelt","size":80} {"family":"Geograph","size":56}
~ h1 {"family":"Chelt","size":60} {"family":"Geograph","size":24}
~ h2 {"family":"Chelt","size":40} {"family":"Geograph","size":22}
~ body {"family":"Plaid-XS-Web","size":16} {"family":"Geograph","size":16}
radius 2 changed
~ button 8px 0px
~ card 12px 0px
spacing identical
No differences.
↻ Swap direction · Allbirds → Our Place