Diff

Allbirds vs xAI

59 token-level differences between these two design systems.

Role tokens
Background
#ece9e2 #ffffff
Text
#000000 #0a0a0a
Brand
#3a6b52 #0a0a0a
Border
#d6d2c8 #d5d9e2
Display font
Geograph Universal Sans Display
Body size
16px 16px
colors 53 changed
~ bg #ece9e2 #ffffff
~ bg-soft #f4f2ec #fafafa
~ surface #ffffff #f9f8f6
~ brand #3a6b52 #0a0a0a
~ brand-hover #2f5743 #1f1f1f
~ on-brand #ffffff #0a0a0a
~ text #000000 #0a0a0a
~ text-strong #000000 #0a0a0a
~ text-muted #555555 #6b7280
~ link #000000 #111827
~ link-hover #3a6b52 #0a0a0a
~ border #d6d2c8 #d5d9e2
~ border-strong #b9b4a7 rgba(10,10,10,0.16)
~ border-soft #e4e0d6 rgba(10,10,10,0.08)
~ success #3a6b52 #248430
~ warning #c08457 #b45309
~ danger #a3402f #be2e31
~ info #3a6b52 #3b82f6
+ surface-terminal #f8f7f5
+ surface-card #fffffff2
+ surface-hover rgba(10,10,10,0.04)
+ surface-press rgba(10,10,10,0.08)
+ header-bg rgba(255,255,255,0.85)
+ text-terminal #262626
+ text-subtle #8a8f98
+ brand-active #2c2c2c
+ link-visited #111827
+ ring #3b82f6
+ scrim rgba(10,10,10,0.5)
+ shadow-color rgba(0,0,0,0.10)
+ terminal-fg #262626
+ terminal-green #248430
+ terminal-green-bg #e3efe4
+ terminal-red #be2e31
+ terminal-red-bg #f8eaea
+ success-bg #ecfdf3
+ info-bg #f0f8ff
+ warning-bg #fffcf0
+ danger-bg #fff0f0
bg-deeper #e2ded4
bg-warm #f0ede5
surface-soft #f7f5ef
surface-deeper #e6e2d8
brand-pressed #264634
brand-deep #1c3527
brand-tint #dfe8e1
charcoal #2a2a2a
charcoal-soft #444444
text-soft #767676
text-faint #a6a39b
selected-bg #dfe8e1
border-brand #3a6b52
clay #c08457
typography 4 changed
~ display {"family":"Geograph","size":56} {"family":"Universal Sans Display","size":80}
~ h1 {"family":"Geograph","size":24} {"family":"Universal Sans Display","size":60}
~ h2 {"family":"Geograph","size":22} {"family":"Universal Sans Display","size":48}
~ body {"family":"Geograph","size":16} {"family":"Universal Sans","size":16}
radius 2 changed
~ button 0px 8px
~ card 0px 12px
spacing identical
No differences.
↻ Swap direction · xAI → Allbirds