Diff

CircleCI vs Amazon

81 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#343434 #0f1111
Brand
#00db75 #ff9900
Border
#e3e4e8 #d5d9d9
Display font
Inter Amazon Ember
Body size
16px 14px
colors 70 changed
~ surface #f7f7f7 #ffffff
~ text #343434 #0f1111
~ brand #00db75 #ff9900
~ border #e3e4e8 #d5d9d9
~ border-soft #eeeff1 #e7e7e7
~ border-strong #cdcfd6 #888c8c
~ shadow-card rgba(20, 24, 33, 0.08) rgba(0,0,0,0.05)
~ shadow-elev rgba(20, 24, 33, 0.12) rgba(0,0,0,0.15)
~ scrim rgba(22, 22, 24, 0.55) rgba(15,17,17,0.7)
~ success #00b85f #007600
~ warning #e0a000 #b66719
~ warning-soft rgba(224, 160, 0, 0.12) #fff3e0
~ danger #d93838 #b12704
~ info #1a73c7 #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-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
surface-elev #f0f1f3
hero-ink #161618
hero-ink-soft #1f2024
text-secondary #5a5a5a
text-tertiary #767676
text-faint #9a9a9a
text-on-dark-soft #c5c8cf
brand-deep #00b85f
brand-ink #005700
brand-soft rgba(0, 219, 117, 0.12)
brand-tint rgba(0, 219, 117, 0.06)
navy #2e3c52
navy-deep #243044
navy-soft rgba(46, 60, 82, 0.08)
on-brand #005700
on-navy #ffffff
cta-bg #161618
cta-text #ffffff
cta-secondary-bg #2e3c52
cta-secondary-text #ffffff
link #1a73c7
link-hover #155a9e
shadow-ambient rgba(20, 24, 33, 0.04)
success-soft rgba(0, 184, 95, 0.12)
danger-soft rgba(217, 56, 56, 0.12)
info-soft rgba(26, 115, 199, 0.10)
typography 5 changed
~ display {"family":"Inter","size":71} {"family":"Amazon Ember","size":72}
~ h1 {"family":"Inter","size":40} {"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 → CircleCI