Diff

Pitch vs Prime Video

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0f171e
Text
#000000 #ffffff
Brand
#5318eb #1399ff
Border
#e4e2ee #2a3a48
Display font
Mark Pro Bold Amazon Ember Display
Body size
16px 14px
colors 44 changed
~ bg #ffffff #0f171e
~ surface #0a0a0a #1a242f
~ text #000000 #ffffff
~ text-muted #5b5b66 #9ca8b4
~ brand #5318eb #1399ff
~ brand-hover #4512c9 #3aabff
~ brand-active #3a0fab #0072c8
~ border #e4e2ee #2a3a48
~ border-strong #cbc8da #1399ff
~ success #16a34a #00c08a
~ warning #d97706 #ffba33
~ danger #dc2626 #ff4757
~ info #5318eb #1399ff
+ bg-deep #000000
+ surface-strong #232f3e
+ surface-soft #0a1117
+ surface-card #1a242f
+ surface-overlay rgba(15,23,30,0.85)
+ text-strong #ffffff
+ text-body #dbdbdb
+ text-soft #6f7c89
+ text-disabled #4f5a64
+ brand-deep #005391
+ brand-amazon-orange #ff9900
+ star-rating #ffba33
+ imdb-yellow #f5c518
+ prime-tier #1399ff
+ rent-tier #ffffff
+ buy-tier #ff9900
+ free-tier #00c08a
+ border-soft #1f2a36
+ shadow-card rgba(0,0,0,0.6)
+ shadow-billboard rgba(0,0,0,0.85)
+ progress-watched #1399ff
+ progress-rail #3a4856
+ scrim-bottom linear-gradient(0deg, #0f171e 0%, transparent 100%)
bg-hero #000000
surface-light #f6f5fb
text-on-hero #ffffff
text-muted-on-hero #a8a8b3
brand-tint #ebe3fe
link #0000ee
link-hover #3a0fab
border-on-hero #26262e
typography 5 changed
~ display {"family":"Mark Pro Bold","size":180} {"family":"Amazon Ember Display","size":72}
~ h1 {"family":"Mark Pro Bold","size":56} {"family":"Amazon Ember Display","size":40}
~ h2 {"family":"Mark Pro Bold","size":40} {"family":"Amazon Ember Display","size":32}
~ body {"family":"Mark Pro","size":16} {"family":"Amazon Ember","size":14}
~ label {"family":"SFMono-Regular","size":14} {"family":"SFMono-Regular","size":11}
radius 2 changed
~ button 8px 4px
~ card 12px 6px
spacing 5 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ lg 32px 28px
~ xl 64px 40px
↻ Swap direction · Prime Video → Pitch