Diff

Astro vs Allbirds

60 token-level differences between these two design systems.

Role tokens
Background
#060913 #ece9e2
Text
#f2f6fa #000000
Brand
#ff5d01 #3a6b52
Border
#ffffff14 #d6d2c8
Display font
Mona Sans Geograph
Body size
16px 16px
colors 48 changed
~ bg #060913 #ece9e2
~ bg-soft #0d1117 #f4f2ec
~ surface #11162a #ffffff
~ text #f2f6fa #000000
~ text-muted #bfc1c9 #555555
~ text-soft #8a8fa3 #767676
~ text-faint #5a5e72 #a6a39b
~ brand #ff5d01 #3a6b52
~ brand-hover #e54e00 #2f5743
~ brand-deep #c43f00 #1c3527
~ link #bfc1c9 #000000
~ link-hover #ff5d01 #3a6b52
~ selected-bg #1a2040 #dfe8e1
~ border #ffffff14 #d6d2c8
~ border-strong #ffffff26 #b9b4a7
~ border-brand rgba(255, 93, 1, 0.40) #3a6b52
~ success #17c964 #3a6b52
~ warning #f5a524 #c08457
~ danger #f31260 #a3402f
~ info #a374ff #3a6b52
+ bg-deeper #e2ded4
+ bg-warm #f0ede5
+ surface-soft #f7f5ef
+ surface-deeper #e6e2d8
+ brand-pressed #264634
+ brand-tint #dfe8e1
+ charcoal #2a2a2a
+ charcoal-soft #444444
+ text-strong #000000
+ text-on-brand #ffffff
+ border-soft #e4e0d6
+ clay #c08457
bg-deep #02040a
surface-strong #1a2040
surface-elevated #222850
accent #a374ff
accent-hover #8e5dff
accent-soft #7611a6
accent-deep #4c0c70
gradient-from #a374ff
gradient-to #ff5d01
gradient-mid #d465a8
disabled #5a5e72
border-subtle #ffffff0a
success-bg rgba(23, 201, 100, 0.12)
warning-bg rgba(245, 165, 36, 0.14)
danger-bg rgba(243, 18, 96, 0.14)
info-bg rgba(163, 116, 255, 0.14)
typography 5 changed
~ display {"family":"Mona Sans","size":96} {"family":"Geograph","size":56}
~ h1 {"family":"Mona Sans","size":64} {"family":"Geograph","size":24}
~ h2 {"family":"Mona Sans","size":48} {"family":"Geograph","size":22}
~ body {"family":"Inter","size":16} {"family":"Geograph","size":16}
~ label {"family":"IBM Plex Mono","size":13} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 8px 0px
~ card 16px 0px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 32px
~ xl 20px 64px
↻ Swap direction · Allbirds → Astro