Diff

Oura vs Warby Parker

61 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffff
Text
#ffffff #121212
Brand
#d6c283 #1050d0
Border
#262626 #e2e1da
Display font
Inter fontIvoryLl
Body size
16px 16px
colors 51 changed
~ bg #000000 #ffffff
~ surface #0d0d0d #ffffff
~ surface-soft #1a1a1a #f7f7f5
~ brand #d6c283 #1050d0
~ brand-hover #c4ae6a #0d44b0
~ text #ffffff #121212
~ text-strong #ffffff #072369
~ text-muted #b5b5b5 #5c5c5c
~ text-faint #666666 #8a8a8a
~ text-on-brand #000000 #ffffff
~ link #ffffff #1050d0
~ link-hover #d6c283 #0d44b0
~ border #262626 #e2e1da
~ border-strong #3a3a3a #121212
~ border-input #4d4d4d #bdbcb4
~ success #84d97e #0f8a4f
~ warning #d9b67e #b06a00
~ danger #d97e84 #c0331f
~ info #7eb8d9 #1050d0
+ bg-soft #f7f7f5
+ bg-deeper #f0efe9
+ on-brand #ffffff
+ accent-navy #072369
+ accent-navy-hover #05194d
+ on-navy #ffffff
+ button-light #ffffff
+ on-button-light #121212
+ selection-bg #cfe0fb
bg-elev #0d0d0d
bg-elev-strong #1a1a1a
bg-light #ffffff
bg-cream #f5f0e6
surface-strong #262626
brand-active #a8924f
brand-pale #ede4cb
brand-deep #7d6a3d
brand-soft #1a1612
ring-titanium #8a8a8a
ring-rose-gold #c4847a
ring-stealth #3a3a3a
text-soft #8a8a8a
text-on-light #000000
border-soft #1a1a1a
score-readiness #84d97e
score-sleep #7eb8d9
score-activity #d9b67e
score-stress #d97e84
score-resilience #9c7ed9
scrim rgba(0,0,0,0.8)
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":"fontIvoryLl","size":80}
~ h1 {"family":"Inter","size":40} {"family":"fontIvoryLl","size":40}
~ h2 {"family":"Inter","size":32} {"family":"fontIvoryLl","size":32}
~ body {"family":"Inter","size":16} {"family":"Proxima Nova","size":16}
~ label {"family":"Inter","size":11} {"family":"SFMono-Regular","size":13}
radius 1 changed
~ pill 9999px 100px
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Warby Parker → Oura