Diff

Allbirds vs SAP

63 token-level differences between these two design systems.

Role tokens
Background
#ece9e2 #ffffff
Text
#000000 #1d2d3e
Brand
#3a6b52 #0070f2
Border
#d6d2c8 #d8dee5
Display font
Geograph 72
Body size
16px 16px
colors 52 changed
~ bg #ece9e2 #ffffff
~ bg-soft #f4f2ec #f5f6f7
~ surface-soft #f7f5ef #f5f6f7
~ brand #3a6b52 #0070f2
~ brand-hover #2f5743 #0040b0
~ text #000000 #1d2d3e
~ text-strong #000000 #0a2540
~ text-soft #767676 #556270
~ text-faint #a6a39b #8b95a3
~ link #000000 #0070f2
~ link-hover #3a6b52 #0040b0
~ border #d6d2c8 #d8dee5
~ border-strong #b9b4a7 #a8b1bd
~ border-soft #e4e0d6 #eaecee
~ success #3a6b52 #36a41d
~ warning #c08457 #e76500
~ danger #a3402f #d20a0a
~ info #3a6b52 #0070f2
+ bg-section #eaecee
+ bg-feature #1d2d3e
+ bg-footer #1d2d3e
+ bg-cool #ebf8ff
+ surface-elev #ffffff
+ brand-active #002a77
+ brand-subtle #d1efff
+ brand-soft #ebf8ff
+ navy #1d2d3e
+ navy-deep #0a2540
+ text-on-dark #ffffff
+ text-on-dark-soft rgba(255,255,255,0.78)
+ link-visited #5d36ff
+ success-soft #e9f8ec
+ warning-soft #fff3e0
+ danger-soft #fde1e1
+ info-soft #ebf8ff
+ scrim rgba(29,45,62,0.55)
+ shadow-card rgba(29,45,62,0.10)
+ shadow-elev rgba(29,45,62,0.18)
+ shadow-deep rgba(0,0,0,0.20)
bg-deeper #e2ded4
bg-warm #f0ede5
surface-deeper #e6e2d8
brand-pressed #264634
brand-deep #1c3527
brand-tint #dfe8e1
charcoal #2a2a2a
charcoal-soft #444444
text-muted #555555
text-on-brand #ffffff
selected-bg #dfe8e1
border-brand #3a6b52
clay #c08457
typography 5 changed
~ display {"family":"Geograph","size":56} {"family":"72","size":72}
~ h1 {"family":"Geograph","size":24} {"family":"72","size":44}
~ h2 {"family":"Geograph","size":22} {"family":"72","size":36}
~ body {"family":"Geograph","size":16} {"family":"72","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"72 Mono","size":14}
radius 2 changed
~ button 0px 6px
~ card 0px 8px
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · SAP → Allbirds