Diff

Oura vs Chase

60 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #101820
Brand
#d6c283 #0060f0
Border
#262626 #d4d9e0
Display font
Inter Open Sans
Body size
16px 16px
colors 51 changed
~ bg #000000 #ffffff
~ surface #0d0d0d #ffffff
~ surface-soft #1a1a1a #f5f7fa
~ brand #d6c283 #0060f0
~ brand-hover #c4ae6a #0048bf
~ brand-deep #7d6a3d #003594
~ text #ffffff #101820
~ text-muted #b5b5b5 #5a6470
~ text-faint #666666 #6b7280
~ text-on-brand #000000 #ffffff
~ link #ffffff #0060f0
~ link-hover #d6c283 #0048bf
~ border #262626 #d4d9e0
~ border-strong #3a3a3a #9aa3af
~ scrim rgba(0,0,0,0.8) rgba(16,24,32,0.55)
~ success #84d97e #128842
~ warning #d9b67e #9a5b00
~ danger #d97e84 #c4001a
~ info #7eb8d9 #0060f0
+ surface-tint #eef4ff
+ text-on-green #ffffff
+ secondary #128842
+ secondary-hover #0e6e35
+ border-on-dark rgba(255,255,255,0.24)
+ shadow-soft rgba(16,24,32,0.06)
+ shadow-medium rgba(16,24,32,0.12)
+ shadow-deep rgba(16,24,32,0.20)
+ on-brand #ffffff
bg-elev #0d0d0d
bg-elev-strong #1a1a1a
bg-light #ffffff
bg-cream #f5f0e6
surface-strong #262626
brand-active #a8924f
brand-pale #ede4cb
brand-soft #1a1612
ring-titanium #8a8a8a
ring-rose-gold #c4847a
ring-stealth #3a3a3a
text-strong #ffffff
text-soft #8a8a8a
text-on-light #000000
border-soft #1a1a1a
border-input #4d4d4d
score-readiness #84d97e
score-sleep #7eb8d9
score-activity #d9b67e
score-stress #d97e84
score-resilience #9c7ed9
shadow-card rgba(0,0,0,0.5)
shadow-elev rgba(0,0,0,0.7)
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"Open Sans","size":80}
~ h1 {"family":"Inter","size":40} {"family":"Open Sans","size":40}
~ h2 {"family":"Inter","size":32} {"family":"Open Sans","size":32}
~ body {"family":"Inter","size":16} {"family":"Open Sans","size":16}
~ label {"family":"Inter","size":11} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Chase → Oura