Diff

Amazon Web Services vs Storybook

79 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#16191f #000000
Brand
#ff9900 #ff4785
Border
#eaeded #e5e7eb
Display font
Amazon Ember Nunito Sans
Body size
14px 16px
colors 67 changed
~ text #16191f #000000
~ text-faint #687078 #9aa5ad
~ brand #ff9900 #ff4785
~ brand-hover #ec7211 #e63a73
~ brand-soft #fff8eb rgba(255, 71, 133, 0.10)
~ link #0073bb #ff4785
~ link-hover #005a92 #e63a73
~ border #eaeded #e5e7eb
~ border-strong #aab7b8 #cdd2d6
~ on-brand #000000 #ffffff
~ success #1d8102 #66bf3c
~ warning #8d6708 #e69d00
~ danger #d13212 #ff4400
~ info #0073bb #1ea7fd
+ bg-elev #f8f9fa
+ bg-deeper #f1f3f5
+ surface-ink #0d1026
+ text-secondary #454545
+ text-tertiary #73828c
+ text-on-ink #ffffff
+ text-on-ink-soft #b0b8c0
+ brand-deep #cc3066
+ brand-tint rgba(255, 71, 133, 0.06)
+ cta-bg #ffffff
+ cta-text #000000
+ cta-bg-brand #ff4785
+ cta-text-brand #ffffff
+ border-soft #f1f3f5
+ focus #ff4785
+ success-soft rgba(102, 191, 60, 0.10)
+ warning-soft rgba(230, 157, 0, 0.10)
+ danger-soft rgba(255, 68, 0, 0.10)
+ info-soft rgba(30, 167, 253, 0.10)
bg-soft #fafafa
bg-section #f2f3f3
bg-deep #232f3e
bg-darker #161e2d
bg-nav-secondary #37475a
surface-soft #fafafa
surface-hover #f2f3f3
surface-selected #fff8eb
text-strong #0d1116
text-body #16191f
text-muted #545b64
text-on-deep #ffffff
text-on-deep-muted #d5dbdb
brand-active #d45b07
brand-on #000000
navy #232f3e
navy-deep #161e2d
navy-mid #37475a
accent #0073bb
accent-hover #005a92
accent-soft #f1faff
accent-strong #005d8c
link-visited #5a3aa3
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
success-bg #f2f8f0
warning-bg #fff8eb
danger-bg #fdf3f1
info-bg #f1faff
typography 5 changed
~ display {"family":"Amazon Ember","size":56} {"family":"Nunito Sans","size":80}
~ h1 {"family":"Amazon Ember","size":32} {"family":"Nunito Sans","size":40}
~ h2 {"family":"Amazon Ember","size":24} {"family":"Nunito Sans","size":32}
~ body {"family":"Amazon Ember","size":14} {"family":"Nunito Sans","size":16}
~ label {"family":"Amazon Ember Mono","size":13} {"family":"Operator Mono","size":13}
radius 2 changed
~ button 4px 8px
~ card 8px 12px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 16px 32px
~ xl 24px 64px
↻ Swap direction · Storybook → Amazon Web Services