Diff

Twilio vs Lovable

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#0d122b #1a1a23
Brand
#f22f46 #ff66c4
Border
#0d122b1f #0000000f
Display font
Twilio Sans Display Inter
Body size
16px 17px
colors 50 changed
~ bg-soft #f4f4f6 #fafafb
~ surface #fafafc #f4f5f8
~ surface-2 #f7f7f9 #ebedf2
~ surface-3 #eeeef2 #dfe2ea
~ text #0d122b #1a1a23
~ text-strong #000000 #0a0a14
~ text-muted #5b6079 #6b6e7d
~ text-soft #8b8e9e #9498a8
~ text-faint #b5b8c4 #c1c4d0
~ brand #f22f46 #ff66c4
~ brand-active #b8182f #7d44e0
~ border #0d122b1f #0000000f
~ border-strong #0d122b33 #0000001a
~ border-focus #f22f46 #9b6bff
~ success #1bb564 #22c55e
~ success-bg #dcf6e7 #dcfce7
~ danger #f22f46 #ef4444
~ danger-bg #fde7eb #fee2e2
~ info #3da9fc #9b6bff
~ info-bg #dcefff #f4eeff
+ bg-elev #f8f9fc
+ surface-tint-pink #fff0f8
+ surface-tint-violet #f4eeff
+ brand-mid #c068dd
+ brand-end #9b6bff
+ brand-solid #a665ff
+ brand-hover #8f54f0
+ accent-cream #fff1e6
+ accent-cream-deep #ffd9bf
+ accent-mint #bdf3d8
+ accent-mint-deep #7ed4a8
+ accent-sky #cfe9ff
+ accent-yellow #fff5b8
+ border-subtle #00000008
+ border-brand #ff66c4
bg-blue #e1eeff
bg-blue-deep #cee0fa
bg-navy #0d122b
surface-navy #1a1f3a
text-on-navy #ffffff
text-on-navy-muted #a8acc1
brand-strong #d6203a
brand-soft #fde7eb
brand-soft-2 #fbd5dc
accent #0d122b
accent-blue #3da9fc
accent-blue-deep #1e7fd9
accent-blue-soft #dcefff
border-soft #0d122b10
border-navy-on-dark #22253a
typography 5 changed
~ display {"family":"Twilio Sans Display","size":80} {"family":"Inter","size":88}
~ h1 {"family":"Twilio Sans Display","size":44} {"family":"Inter","size":48}
~ h2 {"family":"Twilio Sans Display","size":36} {"family":"Inter","size":36}
~ body {"family":"Twilio Sans Text","size":16} {"family":"Inter","size":17}
~ label {"family":"Twilio Sans Mono","size":14} {"family":"JetBrains Mono","size":14}
radius 2 changed
~ button 6px 12px
~ card 24px 40px
spacing identical
No differences.
↻ Swap direction · Lovable → Twilio