Diff

Calm vs Oura

56 token-level differences between these two design systems.

Role tokens
Background
#0a1f3a #000000
Text
#fafafa #ffffff
Brand
#0066ff #d6c283
Border
#243d65 #262626
Display font
Aktiv Grotesk Inter
Body size
16px 16px
colors 49 changed
~ bg #0a1f3a #000000
~ bg-elev #13294a #0d0d0d
~ bg-elev-strong #1c3458 #1a1a1a
~ surface #13294a #0d0d0d
~ surface-soft #1c3458 #1a1a1a
~ surface-strong #243d65 #262626
~ brand #0066ff #d6c283
~ brand-hover #0052d6 #c4ae6a
~ brand-active #003fa3 #a8924f
~ brand-pale #a8c8ff #ede4cb
~ brand-deep #001f5c #7d6a3d
~ brand-soft #0d2456 #1a1612
~ text #fafafa #ffffff
~ text-muted #a8b3c5 #b5b5b5
~ text-soft #7d8a9e #8a8a8a
~ text-faint #5a6678 #666666
~ text-on-brand #ffffff #000000
~ text-on-light #0a1f3a #000000
~ link #fafafa #ffffff
~ link-hover #0066ff #d6c283
~ border #243d65 #262626
~ border-soft #1c3458 #1a1a1a
~ border-strong #365182 #3a3a3a
~ border-input #4a648a #4d4d4d
~ scrim rgba(4,12,26,0.8) rgba(0,0,0,0.8)
~ success #42d68a #84d97e
~ warning #ffba43 #d9b67e
~ danger #ff6b6b #d97e84
~ info #0066ff #7eb8d9
+ bg-light #ffffff
+ bg-cream #f5f0e6
+ ring-titanium #8a8a8a
+ ring-rose-gold #c4847a
+ ring-stealth #3a3a3a
+ score-readiness #84d97e
+ score-sleep #7eb8d9
+ score-activity #d9b67e
+ score-stress #d97e84
+ score-resilience #9c7ed9
bg-strong #040c1a
bg-twilight #1a2c52
bg-dawn #2a3d6e
surface-light #fafafa
brand-glow #3380ff
star-white #ffffff
star-blue #a8c8ff
twilight-purple #7c5fb8
dusk-pink #e88fa8
shadow-blue-glow rgba(0,102,255,0.25)
typography 5 changed
~ display {"family":"Aktiv Grotesk","size":72} {"family":"Inter","size":72}
~ h1 {"family":"Aktiv Grotesk","size":40} {"family":"Inter","size":40}
~ h2 {"family":"Aktiv Grotesk","size":32} {"family":"Inter","size":32}
~ body {"family":"Aktiv Grotesk","size":16} {"family":"Inter","size":16}
~ label {"family":"Aktiv Grotesk","size":11} {"family":"Inter","size":11}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing identical
No differences.
↻ Swap direction · Oura → Calm