Diff

Kinde vs Ory

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#2b2b2b #0f1729
Brand
#ff6e6c #0f172a
Border
#e5e5e5 #e2e8f0
Display font
Inter Inter
Body size
16px 16px
colors 54 changed
~ bg-soft #fafafa #f8fafc
~ bg-section #f5f5f5 #f1f5f9
~ bg-dark #0f0f0f #0f172a
~ surface-soft #fafafa #f8fafc
~ surface-strong #f0f0f0 #f1f5f9
~ surface-dark #1a1a1a #1d283a
~ text #2b2b2b #0f1729
~ text-strong #0f0f0f #020617
~ text-muted #5a5a5a #475569
~ text-soft #787878 #64748b
~ text-faint #a0a0a0 #94a3b8
~ brand #ff6e6c #0f172a
~ brand-deep #e85a58 #020617
~ brand-light #ff8584 #1d283a
~ brand-soft #fff5f4 #1e293b
~ accent-violet #7c5cff #6366f1
~ border #e5e5e5 #e2e8f0
~ border-soft #efefef #f1f5f9
~ border-strong #d0d0d0 #cbd5e1
~ border-input #d4d4d4 #cbd5e1
~ on-light #0f0f0f #0f1729
~ scrim rgba(15,15,15,0.48) rgba(15,23,42,0.48)
~ shadow-card rgba(15,15,15,0.04) rgba(15,23,42,0.04)
~ shadow-elev rgba(15,15,15,0.08) rgba(15,23,42,0.08)
~ shadow-modal rgba(15,15,15,0.16) rgba(15,23,42,0.16)
~ success #0f8a4d #059669
~ success-bg #e6f6ec #ecfdf5
~ warning #a35316 #d97706
~ warning-bg #fef0e6 #fffbeb
~ danger #d92929 #dc2626
~ danger-bg #fdebeb #fef2f2
~ info #1a4ed8 #0066ff
+ bg-section-strong #e2e8f0
+ bg-dark-deeper #020617
+ surface-darker #0f172a
+ text-body #1e293b
+ link #0066ff
+ link-hover #0052cc
+ link-visited #5e2a8c
+ accent-cyan #06b6d4
+ accent-emerald #10b981
+ border-dark rgba(255,255,255,0.10)
bg-violet-tint #f6f5ff
bg-coral-tint #fff5f4
surface-section #f5f5f5
surface-coral #fff5f4
text-on-coral #0f0f0f
brand-pale #ffd6d4
accent-violet-soft #f6f5ff
accent-yellow #ffd84d
accent-green #4dd991
black-cta #0f0f0f
ink-active #000000
border-coral #ff6e6c
typography 2 changed
~ h1 {"family":"Inter","size":72} {"family":"Inter","size":48}
~ h2 {"family":"Inter","size":48} {"family":"Inter","size":30}
radius 1 changed
~ pill 9999px 999px
spacing identical
No differences.
↻ Swap direction · Ory → Kinde