Diff

Headspace vs Nintendo

59 token-level differences between these two design systems.

Role tokens
Background
#fdf2e1 #ffffff
Text
#1c1c1d #1f1f1f
Brand
#ffac1d #e60012
Border
#1c1c1d #e5e5e5
Display font
HS Apercu Nintendo Sans
Body size
16px 16px
colors 47 changed
~ bg #fdf2e1 #ffffff
~ bg-soft #fff8ec #f5f5f5
~ surface-soft #fae5c4 #fafafa
~ brand #ffac1d #e60012
~ brand-hover #e89610 #cc0010
~ brand-active #c87d04 #a8000d
~ brand-deep #7d4f00 #8a000a
~ text #1c1c1d #1f1f1f
~ text-strong #0e0e10 #000000
~ text-muted #535253 #5a5a5a
~ text-soft #7e7d7e #8a8a8a
~ text-faint #9c9b9c #bcbcbc
~ text-on-brand #1c1c1d #ffffff
~ link #1c1c1d #0066cc
~ link-hover #ffac1d #cc0010
~ border #1c1c1d #e5e5e5
~ border-soft #e8d9bb #f0f0f0
~ border-strong #c8b88f #cccccc
~ success #42a55a #00a345
~ warning #e89610 #ff8c00
~ danger #d63a3a #e60012
~ info #3a82d6 #0066cc
+ bg-warm #fff8f0
+ bg-tinted #ffeeee
+ surface-strong #f5f5f5
+ brand-tint #ffeeee
+ on-brand #ffffff
+ selected-bg #ffeeee
+ border-brand #e60012
bg-strong #fae5c4
bg-page-light #ffffff
surface-cream #fff8ec
surface-elev #ffffff
brand-pale #ffe5b3
brand-soft #fff3dc
text-on-dark #fdf2e1
border-input #1c1c1d
pastel-coral #ff8a78
pastel-mint #9cd6b0
pastel-lavender #c5b4e3
pastel-sky #a8d4f0
pastel-rose #fcc9d8
pastel-yolk #ffd66e
bg-dark #1c1c1d
scrim rgba(28,28,29,0.5)
shadow-card rgba(28,28,29,0.08)
shadow-elev rgba(28,28,29,0.16)
typography 5 changed
~ display {"family":"HS Apercu","size":72} {"family":"Nintendo Sans","size":80}
~ h1 {"family":"HS Apercu","size":40} {"family":"Nintendo Sans","size":36}
~ h2 {"family":"HS Apercu","size":32} {"family":"Nintendo Sans","size":28}
~ body {"family":"HS Apercu","size":16} {"family":"Inter","size":16}
~ label {"family":"HS Apercu","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 16px 12px
~ card 24px 16px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · Nintendo → Headspace