Diff

Lovable vs Uniswap

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1a1a23 #131313
Brand
#ff66c4 #ff007a
Border
#0000000f #ededed
Display font
Inter Basel
Body size
17px 16px
colors 50 changed
~ bg-soft #fafafb #f5f6fc
~ surface #f4f5f8 #ffffff
~ text #1a1a23 #131313
~ text-strong #0a0a14 #000000
~ text-muted #6b6e7d #5d6785
~ text-soft #9498a8 #888d9b
~ text-faint #c1c4d0 #cdcdcd
~ brand #ff66c4 #ff007a
~ brand-hover #8f54f0 #e60069
~ border #0000000f #ededed
~ border-strong #0000001a #cdcdcd
~ border-brand #ff66c4 #ff007a
~ success #22c55e #27ae60
~ warning #f59e0b #f3b71e
~ danger #ef4444 #fd4040
~ info #9b6bff #0068fc
+ bg-warm #fff4f9
+ surface-soft #fafbfd
+ surface-strong #f1f3f9
+ brand-pressed #cc005f
+ brand-deep #a60052
+ brand-tint #ffe5f1
+ brand-soft #ffb3d6
+ link #ff007a
+ link-hover #cc005f
+ selected-bg #ffe5f1
+ border-soft #f7f8fa
+ unicorn-purple #9c52ff
+ ethereum-blue #627eea
bg-elev #f8f9fc
surface-2 #ebedf2
surface-3 #dfe2ea
surface-tint-pink #fff0f8
surface-tint-violet #f4eeff
brand-mid #c068dd
brand-end #9b6bff
brand-solid #a665ff
brand-active #7d44e0
accent-cream #fff1e6
accent-cream-deep #ffd9bf
accent-mint #bdf3d8
accent-mint-deep #7ed4a8
accent-sky #cfe9ff
accent-yellow #fff5b8
border-subtle #00000008
border-focus #9b6bff
success-bg #dcfce7
warning-bg #fef3c7
danger-bg #fee2e2
info-bg #f4eeff
typography 5 changed
~ display {"family":"Inter","size":88} {"family":"Basel","size":88}
~ h1 {"family":"Inter","size":48} {"family":"Basel","size":40}
~ h2 {"family":"Inter","size":36} {"family":"Basel","size":32}
~ body {"family":"Inter","size":17} {"family":"Basel","size":16}
~ label {"family":"JetBrains Mono","size":14} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ card 40px 16px
spacing identical
No differences.
↻ Swap direction · Uniswap → Lovable