Diff

HEY vs Xbox

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e10
Text
#231c33 #ffffff
Brand
#5522fa #107c10
Border
#231c3314 rgba(255, 255, 255, 0.10)
Display font
Really Sans Large Segoe UI Display
Body size
18px 16px
colors 51 changed
~ bg #ffffff #0e0e10
~ text #231c33 #ffffff
~ brand #5522fa #107c10
~ border #231c3314 rgba(255, 255, 255, 0.10)
+ bg-deep #040405
+ bg-section #1a1a1c
+ bg-elev #222226
+ surface #1a1a1c
+ surface-strong #2a2a2e
+ surface-translucent rgba(14, 14, 16, 0.85)
+ brand-hover #16a316
+ brand-pressed #0c5e0c
+ brand-deep #08440a
+ brand-tint rgba(16, 124, 16, 0.20)
+ text-strong #ffffff
+ text-muted #a8a8a8
+ text-soft #787878
+ text-faint #5a5a5a
+ text-on-brand #ffffff
+ link #3aaa3a
+ link-hover #16a316
+ selected-bg rgba(16, 124, 16, 0.20)
+ border-strong rgba(255, 255, 255, 0.20)
+ border-brand #107c10
+ game-pass-yellow #ffd71a
+ game-pass-yellow-deep #cc9f00
+ success #107c10
+ warning #ffa61a
+ danger #ff4757
+ info #0078d4
paper #f9f7f5
stone #edeae6
stone-light #f7f4f0
grey #736c83
cobalt #0074e4
yellow #f5d652
canary #fff5ca
orange #f87917
coral #f95c5c
coral-dark #ec4343
salmon #ec8580
peach #ffe5da
mint #b3f4e0
teal #5fddc5
sky #b6dbff
lavender #d5d2ff
pink #cf6fb6
purple #7700a2
green #299850
shadow-card rgba(35,28,51,0.2)
shadow-deep rgba(35,28,51,0.6)
typography 5 changed
~ display {"family":"Really Sans Large","size":74} {"family":"Segoe UI Display","size":96}
~ h1 {"family":"Really Sans Large","size":44} {"family":"Segoe UI Display","size":40}
~ h2 {"family":"Really Sans Large","size":34} {"family":"Segoe UI Display","size":32}
~ body {"family":"Moniker","size":18} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":14} {"family":"Cascadia Code","size":13}
radius 2 changed
~ button 12px 8px
~ card 18px 12px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Xbox → HEY