Diff

Granola vs Bandcamp

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fafaf6
Text
#292929 #1a1a1a
Brand
#5b6f00 #629aa0
Border
#0000001a #dcdcd6
Display font
Quadrant Inter
Body size
17px 13px
colors 49 changed
~ bg #ffffff #fafaf6
~ bg-soft #faf8f3 #f5f5f0
~ surface #f3f0e8 #ffffff
~ text #292929 #1a1a1a
~ text-strong #0e0f0c #000000
~ text-muted #72726e #5a5a5a
~ text-soft #a09e95 #8a8a8a
~ brand #5b6f00 #629aa0
~ brand-soft #e5eacd #b8d5d8
~ brand-hover #465800 #4a8087
~ brand-deep #2f3a00 #2a4f56
~ border #0000001a #dcdcd6
~ border-soft #00000010 #ebebe5
~ border-strong #00000028 #bcbcb6
~ success #3a7b3a #3d8b62
~ warning #a35e0a #cc7a3a
~ danger #a8362f #a83a3a
~ info #345897 #629aa0
+ bg-deeper #eeeee8
+ bg-warm #fdfdf6
+ surface-soft #fafafa
+ surface-strong #f0f0eb
+ brand-pressed #3a6770
+ brand-tint #dfeded
+ text-faint #bcbcbc
+ text-on-brand #ffffff
+ link #629aa0
+ link-hover #3a6770
+ selected-bg #dfeded
+ border-brand #629aa0
+ buy-now-orange #cc7a3a
+ vinyl-warm #c97558
+ cassette-warm #bf8a3c
surface-elev #e8e3d4
surface-paper #fdfbf5
text-body #3a3a37
text-italic #5b6f00
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":"Inter","size":48}
~ h1 {"family":"Quadrant","size":40} {"family":"Inter","size":24}
~ h2 {"family":"Quadrant","size":32} {"family":"Inter","size":20}
~ body {"family":"Melange","size":17} {"family":"Inter","size":13}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":11}
radius 2 changed
~ button 12px 2px
~ card 16px 14px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 24px
~ xl 96px 40px
↻ Swap direction · Bandcamp → Granola