Diff

Workday vs Rive

65 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fdfcf8
Text
#1a1a1a #1d1d1b
Brand
#f37721 #ff5b37
Border
#dcd9d4 rgba(29, 29, 27, 0.10)
Display font
Adelle Sans Workday Inter Display
Body size
16px 17px
colors 59 changed
~ bg #ffffff #fdfcf8
~ surface-soft #faf8f5 #fdfcf8
~ brand #f37721 #ff5b37
~ brand-hover #d65f0e #e54a2a
~ brand-active #a64909 #cc3f23
~ brand-soft #fef4ec #ffe0d6
~ text #1a1a1a #1d1d1b
~ text-soft #5a5a5a #1d1d1b66
~ text-on-dark #ffffff #fdfcf8
~ border #dcd9d4 rgba(29, 29, 27, 0.10)
~ border-soft #ebe7e0 rgba(29, 29, 27, 0.06)
~ border-strong #a8a39b rgba(29, 29, 27, 0.20)
~ success #3aa15a #4cc38a
~ warning #d97706 #fcc24c
~ danger #c63030 #ff5b37
~ info #0066b2 #3a7bff
~ scrim rgba(26,26,26,0.55) rgba(29, 29, 27, 0.45)
~ shadow-deep rgba(0,0,0,0.20) rgba(29, 29, 27, 0.18)
+ bg-strong #f5f3ec
+ bg-cream #f9f7f0
+ surface-dark #1d1d1b
+ text-muted #1d1d1b99
+ text-on-dark-muted #fdfcf899
+ accent-yellow #fcc24c
+ accent-yellow-soft #fff1cf
+ accent-blue #3a7bff
+ accent-blue-soft #dbe7ff
+ accent-pink #ff6da6
+ accent-pink-soft #ffe0ec
+ accent-green #4cc38a
+ accent-green-soft #d6f1e2
+ cta-bg #1d1d1b
+ cta-bg-hover #000000
+ cta-text #fdfcf8
+ border-dark rgba(253, 252, 248, 0.12)
+ shadow-soft rgba(29, 29, 27, 0.05)
+ shadow-medium rgba(29, 29, 27, 0.10)
bg-soft #f7f5f2
bg-section #f0ece6
bg-feature #1a1a1a
bg-warm-feature #3d2914
bg-footer #1a1a1a
bg-info #fef4ec
surface-elev #ffffff
brand-tint #fde0c4
brand-deep #a64909
charcoal #1a1a1a
ink #262626
text-faint #8c8c8c
text-on-dark-soft rgba(255,255,255,0.78)
link #0066b2
link-hover #004a85
success-soft #e7f4ec
warning-soft #fff5e6
danger-soft #fbeaea
info-soft #e6f0f8
shadow-card rgba(26,26,26,0.08)
shadow-elev rgba(26,26,26,0.14)
shadow-warm rgba(243,119,33,0.18)
typography 4 changed
~ display {"family":"Adelle Sans Workday","size":80} {"family":"Inter Display","size":140}
~ h1 {"family":"Adelle Sans Workday","size":44} {"family":"Inter Display","size":72}
~ h2 {"family":"Adelle Sans Workday","size":36} {"family":"Inter Display","size":48}
~ body {"family":"Adelle Sans Workday","size":16} {"family":"Inter","size":17}
radius 2 changed
~ button 8px 12px
~ card 12px 32px
spacing identical
No differences.
↻ Swap direction · Rive → Workday