Diff

Plaid vs Casper

58 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #1e306e
Brand
#0a85ea #1e306e
Border
rgba(0, 0, 0, 0.10) #dde0e9
Display font
Plaid Sans New Kansas
Body size
16px 16px
colors 49 changed
~ bg-soft #f7f9fb #f6f7fa
~ surface #f3f5f8 #ffffff
~ text #000000 #1e306e
~ text-strong #000000 #012169
~ text-muted #4a5568 #5a6488
~ text-faint #a0a8b3 #8b93ac
~ brand #0a85ea #1e306e
~ brand-deep #003c80 #012169
~ link #0a85ea #1e306e
~ link-hover #0066c0 #012169
~ border rgba(0, 0, 0, 0.10) #dde0e9
~ border-strong rgba(0, 0, 0, 0.20) #1e306e
~ border-soft rgba(0, 0, 0, 0.06) #edeef3
~ success-bg #dcf3e3 #e8f3ed
~ warning-bg #fff0c5 #f7efe1
~ danger-bg #fde0e0 #f8e8e6
~ info-bg #dceeff #edeef3
+ bg-subtle #edeef3
+ surface-tint #f6f7fa
+ surface-inverse #1e306e
+ on-surface-inverse #ffffff
+ brand-hover #011a54
+ accent-tint #e8eaf0
+ accent-tint-strong #dde0e9
+ text-on-brand #ffffff
+ focus-ring #012169
+ success #1f7a4d
+ warning #9a6212
+ danger #b3261e
+ info #1e306e
bg-blue #eaf3ff
bg-cream #f3efe6
bg-ink #000000
surface-soft #fafbfc
surface-cream #faf6ed
text-medium #1a1f29
text-soft #7a8390
brand-strong #0066c0
brand-soft #dceeff
brand-wash rgba(10, 133, 234, 0.08)
accent #000000
accent-soft rgba(10, 133, 234, 0.08)
selected-bg #eaf3ff
disabled #c4cad3
border-blue rgba(10, 133, 234, 0.30)
success-text #1f5d3f
warning-text #7a5e1f
danger-text #8a2828
info-text #003c80
typography 5 changed
~ display {"family":"Plaid Sans","size":80} {"family":"New Kansas","size":80}
~ h1 {"family":"Plaid Sans","size":56} {"family":"New Kansas","size":40}
~ h2 {"family":"Plaid Sans","size":44} {"family":"New Kansas","size":32}
~ body {"family":"Plaid Sans","size":16} {"family":"Calibre","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 4 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ xl 48px 64px
↻ Swap direction · Casper → Plaid