Diff

Tailscale vs Amazon

85 token-level differences between these two design systems.

Role tokens
Background
#f9f7f6 #ffffff
Text
#181717 #0f1111
Brand
#d04841 #ff9900
Border
rgba(24, 23, 23, 0.12) #d5d9d9
Display font
Inter Amazon Ember
Body size
16px 14px
colors 74 changed
~ bg #f9f7f6 #ffffff
~ text #181717 #0f1111
~ brand #d04841 #ff9900
~ border rgba(24, 23, 23, 0.12) #d5d9d9
~ border-soft rgba(24, 23, 23, 0.07) #e7e7e7
~ border-strong rgba(24, 23, 23, 0.22) #888c8c
~ shadow-card rgba(24, 23, 23, 0.06) rgba(0,0,0,0.05)
~ shadow-elev rgba(24, 23, 23, 0.08) rgba(0,0,0,0.15)
~ scrim rgba(24, 23, 23, 0.45) rgba(15,17,17,0.7)
~ success #2f7d52 #007600
~ warning #c9821f #b66719
~ warning-soft rgba(201, 130, 31, 0.10) #fff3e0
~ danger #d04841 #b12704
~ info #181717 #007185
+ bg-page #eaeded
+ surface-soft #f7f8f8
+ surface-strong #f0f2f2
+ surface-yellow #fef8e8
+ masthead #131921
+ masthead-sub #232f3e
+ masthead-hover #37475a
+ text-strong #0f1111
+ text-link #007185
+ text-link-hover #c45500
+ text-muted #565959
+ text-soft #6f7373
+ text-on-dark #ffffff
+ text-on-dark-muted #cccccc
+ brand-cta-top #ffd814
+ brand-cta-bottom #ffa41c
+ brand-cta-border #fcd200
+ brand-cta-hover #f7ca00
+ buy-now #ffa41c
+ buy-now-hover #fa8900
+ border-input #a6a6a6
+ prime-blue #00a8e1
+ prime-deep #146eb4
+ rating-orange #ffa41c
+ rating-empty #d5d9d9
+ price #0f1111
+ price-deal #cc0c39
+ savings #cc0c39
+ warehouse-deal #007600
+ in-stock #007600
+ shipping-soon #b12704
bg-pure #ffffff
bg-elev #f3f0ee
bg-warm #efeae7
bg-ink #181717
bg-ink-soft #232222
surface-warm #f9f7f6
text-secondary #4a4746
text-tertiary #736f6d
text-faint #a39e9b
text-on-ink #f5f2f0
text-on-ink-soft #a39e9b
brand-hover #b83d37
brand-deep #9e332e
brand-soft rgba(208, 72, 65, 0.10)
brand-tint rgba(208, 72, 65, 0.06)
link #d04841
link-hover #b83d37
focus rgba(208, 72, 65, 0.40)
on-brand #ffffff
cta-bg #d04841
cta-text #ffffff
cta-bg-secondary #232222
cta-text-secondary #ffffff
border-ink #181717
shadow-ambient rgba(24, 23, 23, 0.04)
shadow-deep rgba(24, 23, 23, 0.14)
success-soft rgba(47, 125, 82, 0.10)
danger-soft rgba(208, 72, 65, 0.10)
info-soft rgba(24, 23, 23, 0.06)
typography 5 changed
~ display {"family":"Inter","size":80} {"family":"Amazon Ember","size":72}
~ h1 {"family":"Inter","size":48} {"family":"Amazon Ember","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Amazon Ember","size":32}
~ body {"family":"Inter","size":16} {"family":"Amazon Ember","size":14}
~ label {"family":"SFMono-Regular","size":13} {"family":"Monaco","size":11}
radius 2 changed
~ button 8px 7px
~ card 12px 8px
spacing 4 changed
~ xs 0px 2px
~ md 12px 8px
~ lg 32px 14px
~ xl 64px 22px
↻ Swap direction · Amazon → Tailscale