Diff

Patagonia vs Allbirds

42 token-level differences between these two design systems.

Role tokens

Background

#f6efe1 → #ece9e2

Text

#1c1c1c → #000000

Brand

#cd0000 → #3a6b52

Border

#d8d0bc → #d6d2c8

Display font

Futura PT → Geograph

Body size

16px → 16px

colors 33 changed

~ bg #f6efe1 → #ece9e2

~ bg-soft #fdf9ed → #f4f2ec

~ bg-deeper #ebe3d0 → #e2ded4

~ bg-warm #f9f3e3 → #f0ede5

~ surface-soft #fbf8ed → #f7f5ef

~ surface-deeper #ede5d0 → #e6e2d8

~ brand #cd0000 → #3a6b52

~ brand-hover #a80000 → #2f5743

~ brand-pressed #820000 → #264634

~ brand-deep #5a0000 → #1c3527

~ brand-tint #fde0e0 → #dfe8e1

~ text #1c1c1c → #000000

~ text-muted #5a5a5a → #555555

~ text-soft #8a8a8a → #767676

~ text-faint #bcbcbc → #a6a39b

~ link #cd0000 → #000000

~ link-hover #820000 → #3a6b52

~ selected-bg #fde0e0 → #dfe8e1

~ border #d8d0bc → #d6d2c8

~ border-strong #bcb09a → #b9b4a7

~ border-soft #e8e0c8 → #e4e0d6

~ border-brand #cd0000 → #3a6b52

~ success #3d4a2e → #3a6b52

~ warning #cb9c45 → #c08457

~ danger #a80000 → #a3402f

~ info #3d4a2e → #3a6b52

+ charcoal #2a2a2a

+ charcoal-soft #444444

+ clay #c08457

− forest #3d4a2e

− forest-deep #293421

− forest-soft #dde3d4

− amber #cb9c45

typography 5 changed

~ display {"family":"Futura PT","size":80} → {"family":"Geograph","size":56}

~ h1 {"family":"Futura PT","size":36} → {"family":"Geograph","size":24}

~ h2 {"family":"Futura PT","size":28} → {"family":"Geograph","size":22}

~ body {"family":"Futura PT","size":16} → {"family":"Geograph","size":16}

~ label {"family":"SFMono-Regular","size":12} → {"family":"SFMono-Regular","size":13}

radius 2 changed

~ button 4px → 0px

~ card 14px → 0px

spacing 2 changed

~ lg 24px → 32px

~ xl 40px → 64px

↻ Swap direction · Allbirds → Patagonia