Diff

Amazon Web Services vs Paper Website

71 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fbf8f3
Text
#16191f #1a1a1a
Brand
#ff9900 #3d6b8a
Border
#eaeded #e3dcc9
Display font
Amazon Ember Tiempos Headline
Body size
14px 18px
colors 60 changed
~ bg #ffffff #fbf8f3
~ surface #ffffff #f3eee2
~ surface-soft #fafafa #f8f4ea
~ text #16191f #1a1a1a
~ text-strong #0d1116 #0d0d0d
~ text-muted #545b64 #5c574e
~ text-faint #687078 #aba59a
~ brand #ff9900 #3d6b8a
~ brand-hover #ec7211 #2d5570
~ brand-soft #fff8eb #dde6ee
~ accent #0073bb #a04a35
~ accent-hover #005a92 #8a3d2a
~ accent-soft #f1faff #f0e2d8
~ link #0073bb #3d6b8a
~ link-hover #005a92 #2d5570
~ link-visited #5a3aa3 #5b4570
~ border #eaeded #e3dcc9
~ border-strong #aab7b8 #d4cab2
~ on-brand #000000 #ffffff
~ success #1d8102 #4a7a5c
~ success-bg #f2f8f0 #e6efe9
~ warning #8d6708 #a04a35
~ danger #d13212 #8a2e2e
+ bg-alt #ffffff
+ bg-cream #faf6ec
+ surface-warm #f0e9d8
+ text-soft #8a8478
+ brand-deep #1f3f54
+ accent-tint #f6ebe2
+ border-soft #ede6d3
+ shadow-paper rgba(60,40,15,0.04)
+ shadow-warm rgba(80,55,20,0.06)
+ shadow-deep rgba(50,30,10,0.10)
bg-soft #fafafa
bg-section #f2f3f3
bg-deep #232f3e
bg-darker #161e2d
bg-nav-secondary #37475a
surface-hover #f2f3f3
surface-selected #fff8eb
text-body #16191f
text-on-deep #ffffff
text-on-deep-muted #d5dbdb
brand-active #d45b07
brand-on #000000
navy #232f3e
navy-deep #161e2d
navy-mid #37475a
accent-strong #005d8c
border-subtle #f2f3f3
border-input #879596
ring-focus #0073bb
shadow-tile rgba(0,28,36,0.06)
shadow-elevated rgba(0,28,36,0.20)
on-accent #ffffff
on-navy #ffffff
warning-bg #fff8eb
danger-bg #fdf3f1
info #0073bb
info-bg #f1faff
typography 5 changed
~ display {"family":"Amazon Ember","size":56} {"family":"Tiempos Headline","size":72}
~ h1 {"family":"Amazon Ember","size":32} {"family":"Tiempos Headline","size":56}
~ h2 {"family":"Amazon Ember","size":24} {"family":"Tiempos Headline","size":38}
~ body {"family":"Amazon Ember","size":14} {"family":"Tiempos Text","size":18}
~ label {"family":"Amazon Ember Mono","size":13} {"family":"iA Writer Mono","size":12}
radius 1 changed
~ button 4px 6px
spacing 5 changed
~ xs 1px 2px
~ sm 2px 4px
~ md 6px 12px
~ lg 16px 32px
~ xl 24px 64px
↻ Swap direction · Paper Website → Amazon Web Services