Diff

Workday vs Kinde

71 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a1a #2b2b2b
Brand
#f37721 #ff6e6c
Border
#dcd9d4 #e5e5e5
Display font
Adelle Sans Workday Inter
Body size
16px 16px
colors 64 changed
~ bg-soft #f7f5f2 #fafafa
~ bg-section #f0ece6 #f5f5f5
~ surface-soft #faf8f5 #fafafa
~ brand #f37721 #ff6e6c
~ brand-soft #fef4ec #fff5f4
~ brand-deep #a64909 #e85a58
~ text #1a1a1a #2b2b2b
~ text-strong #000000 #0f0f0f
~ text-soft #5a5a5a #787878
~ text-faint #8c8c8c #a0a0a0
~ border #dcd9d4 #e5e5e5
~ border-soft #ebe7e0 #efefef
~ border-strong #a8a39b #d0d0d0
~ success #3aa15a #0f8a4d
~ warning #d97706 #a35316
~ danger #c63030 #d92929
~ info #0066b2 #1a4ed8
~ scrim rgba(26,26,26,0.55) rgba(15,15,15,0.48)
~ shadow-card rgba(26,26,26,0.08) rgba(15,15,15,0.04)
~ shadow-elev rgba(26,26,26,0.14) rgba(15,15,15,0.08)
+ bg-violet-tint #f6f5ff
+ bg-coral-tint #fff5f4
+ bg-dark #0f0f0f
+ surface-strong #f0f0f0
+ surface-section #f5f5f5
+ surface-coral #fff5f4
+ surface-dark #1a1a1a
+ text-muted #5a5a5a
+ text-on-coral #0f0f0f
+ brand-light #ff8584
+ brand-pale #ffd6d4
+ accent-violet #7c5cff
+ accent-violet-soft #f6f5ff
+ accent-yellow #ffd84d
+ accent-green #4dd991
+ black-cta #0f0f0f
+ ink-active #000000
+ border-input #d4d4d4
+ border-coral #ff6e6c
+ on-dark #ffffff
+ on-light #0f0f0f
+ shadow-modal rgba(15,15,15,0.16)
+ success-bg #e6f6ec
+ warning-bg #fef0e6
+ danger-bg #fdebeb
bg-feature #1a1a1a
bg-warm-feature #3d2914
bg-footer #1a1a1a
bg-info #fef4ec
surface-elev #ffffff
brand-hover #d65f0e
brand-active #a64909
brand-tint #fde0c4
charcoal #1a1a1a
ink #262626
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-deep rgba(0,0,0,0.20)
shadow-warm rgba(243,119,33,0.18)
typography 5 changed
~ display {"family":"Adelle Sans Workday","size":80} {"family":"Inter","size":72}
~ h1 {"family":"Adelle Sans Workday","size":44} {"family":"Inter","size":72}
~ h2 {"family":"Adelle Sans Workday","size":36} {"family":"Inter","size":48}
~ body {"family":"Adelle Sans Workday","size":16} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"JetBrains Mono","size":13}
radius 2 changed
~ button 8px 6px
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Kinde → Workday