Diff

Pinterest vs Xbox

45 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e10
Text
#000000 #ffffff
Brand
#e60023 #107c10
Border
#e5e5e0 rgba(255, 255, 255, 0.10)
Display font
Pin Sans Segoe UI Display
Body size
16px 16px
colors 38 changed
~ bg #ffffff #0e0e10
~ surface #ffffff #1a1a1c
~ text #000000 #ffffff
~ text-faint #91918c #5a5a5a
~ text-muted #62625b #a8a8a8
~ brand #e60023 #107c10
~ brand-hover #cc001f #16a316
~ brand-pressed #b2001b #0c5e0c
~ border #e5e5e0 rgba(255, 255, 255, 0.10)
~ border-strong #c8c8c1 rgba(255, 255, 255, 0.20)
~ success #097239 #107c10
~ warning #b24700 #ffa61a
~ danger #b60c0c #ff4757
~ info #62625b #0078d4
+ bg-deep #040405
+ bg-section #1a1a1c
+ bg-elev #222226
+ surface-strong #2a2a2e
+ surface-translucent rgba(14, 14, 16, 0.85)
+ brand-deep #08440a
+ brand-tint rgba(16, 124, 16, 0.20)
+ text-strong #ffffff
+ text-soft #787878
+ text-on-brand #ffffff
+ link #3aaa3a
+ link-hover #16a316
+ selected-bg rgba(16, 124, 16, 0.20)
+ border-brand #107c10
+ game-pass-yellow #ffd71a
+ game-pass-yellow-deep #cc9f00
surface-elevated #fbfbf9
surface-wash #f6f6f3
text-subtle #62625b
border-soft #f6f6f3
success-bg #e3f7ec
warning-bg #ffede0
danger-bg #ffebeb
info-bg #f6f6f3
typography 5 changed
~ display {"family":"Pin Sans","size":72} {"family":"Segoe UI Display","size":96}
~ h1 {"family":"Pin Sans","size":36} {"family":"Segoe UI Display","size":40}
~ h2 {"family":"Pin Sans","size":28} {"family":"Segoe UI Display","size":32}
~ body {"family":"Pin Sans","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"Cascadia Code","size":13}
radius 1 changed
~ pill 999px 9999px
spacing 1 changed
~ xl 32px 40px
↻ Swap direction · Xbox → Pinterest