Diff

Granola vs Casper

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#292929 #1e306e
Brand
#5b6f00 #1e306e
Border
#0000001a #dde0e9
Display font
Quadrant New Kansas
Body size
17px 16px
colors 48 changed
~ bg-soft #faf8f3 #f6f7fa
~ surface #f3f0e8 #ffffff
~ text #292929 #1e306e
~ text-strong #0e0f0c #012169
~ text-muted #72726e #5a6488
~ brand #5b6f00 #1e306e
~ brand-hover #465800 #011a54
~ brand-deep #2f3a00 #012169
~ border #0000001a #dde0e9
~ border-soft #00000010 #edeef3
~ border-strong #00000028 #1e306e
~ success #3a7b3a #1f7a4d
~ warning #a35e0a #9a6212
~ danger #a8362f #b3261e
~ info #345897 #1e306e
+ bg-subtle #edeef3
+ surface-tint #f6f7fa
+ surface-inverse #1e306e
+ on-surface-inverse #ffffff
+ accent-tint #e8eaf0
+ accent-tint-strong #dde0e9
+ text-faint #8b93ac
+ text-on-brand #ffffff
+ link #1e306e
+ link-hover #012169
+ focus-ring #012169
+ success-bg #e8f3ed
+ warning-bg #f7efe1
+ danger-bg #f8e8e6
+ info-bg #edeef3
surface-elev #e8e3d4
surface-paper #fdfbf5
text-body #3a3a37
text-soft #a09e95
text-italic #5b6f00
brand-soft #e5eacd
brand-softer #f1f4e0
accent-olive-bg #e5eacd
accent-cream #f4ebd9
accent-warm-paper #f7f1de
shadow-card rgba(34,30,15,0.04)
shadow-elev rgba(34,30,15,0.08)
shadow-paper rgba(34,30,15,0.06)
scrim rgba(20,18,10,0.50)
success-soft #eaf3ea
warning-soft #fbf1de
danger-soft #f7e6e4
info-soft #e6ecf5
typography 5 changed
~ display {"family":"Quadrant","size":68} {"family":"New Kansas","size":80}
~ h1 {"family":"Quadrant","size":40} {"family":"New Kansas","size":40}
~ h2 {"family":"Quadrant","size":32} {"family":"New Kansas","size":32}
~ body {"family":"Melange","size":17} {"family":"Calibre","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 12px 8px
~ card 16px 12px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 32px
~ xl 96px 64px
↻ Swap direction · Casper → Granola