Diff

Ritual vs Headspace

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdf2e1
Text
#142b6f #1c1c1d
Brand
#142b6f #ffac1d
Border
#dfe3ec #1c1c1d
Display font
CircularXX HS Apercu
Body size
16px 16px
colors 49 changed
~ bg #ffffff #fdf2e1
~ bg-soft #f7f8fa #fff8ec
~ surface-soft #f7f8fa #fae5c4
~ brand #142b6f #ffac1d
~ brand-hover #0f2154 #e89610
~ brand-soft #e7eaf3 #fff3dc
~ text #142b6f #1c1c1d
~ text-strong #0f2154 #0e0e10
~ text-muted #5a6680 #535253
~ border #dfe3ec #1c1c1d
~ border-strong #c3c9d8 #c8b88f
~ success #1f8a5b #42a55a
~ warning #e6bd00 #e89610
~ danger #c2362b #d63a3a
~ info #142b6f #3a82d6
+ bg-strong #fae5c4
+ bg-page-light #ffffff
+ surface-cream #fff8ec
+ surface-elev #ffffff
+ brand-active #c87d04
+ brand-pale #ffe5b3
+ brand-deep #7d4f00
+ text-soft #7e7d7e
+ text-faint #9c9b9c
+ text-on-brand #1c1c1d
+ text-on-dark #fdf2e1
+ link #1c1c1d
+ link-hover #ffac1d
+ border-soft #e8d9bb
+ 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)
bg-deeper #eef0f5
bg-navy #142b6f
bg-cream #fbf7ee
on-brand #ffffff
accent-yellow #ffd200
accent-yellow-soft #fff3bf
accent-yellow-deep #e6bd00
on-accent #142b6f
border-navy #142b6f
typography 5 changed
~ display {"family":"CircularXX","size":80} {"family":"HS Apercu","size":72}
~ h1 {"family":"CircularXX","size":44} {"family":"HS Apercu","size":40}
~ h2 {"family":"CircularXX","size":34} {"family":"HS Apercu","size":32}
~ body {"family":"CircularXX","size":16} {"family":"HS Apercu","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"HS Apercu","size":11}
radius 2 changed
~ button 12px 16px
~ card 16px 24px
spacing 4 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
~ xl 64px 48px
↻ Swap direction · Headspace → Ritual