Diff

Things vs Buttondown

54 token-level differences between these two design systems.

Role tokens
Background
#f2f5f7 #ffffff
Text
#303336 #000000
Brand
#5c9cf5 #0069ff
Border
#26344a1a #e5e5e5
Display font
Inter Auto Pro
Body size
17px 16px
colors 44 changed
~ bg #f2f5f7 #ffffff
~ surface #e8ecef #fafafa
~ text #303336 #000000
~ text-strong #0a1320 #000000
~ text-muted #26344a80 #525252
~ text-soft #000f24a3 #737373
~ text-faint #26344a40 #a3a3a3
~ brand #5c9cf5 #0069ff
~ brand-hover #4385e0 #0052cc
~ brand-soft #dceaff #e6f0ff
~ border #26344a1a #e5e5e5
~ border-strong #26344a2e #d4d4d4
~ success #34a853 #15803d
~ warning #f59e0b #b45309
~ danger #dc3545 #dc2626
~ info #5c9cf5 #0069ff
+ surface-2 #f4f4f5
+ surface-3 #e9e9eb
+ brand-active #0043a8
+ accent #fef08a
+ accent-soft #fefce8
+ highlight #fef08a
+ link #0069ff
+ success-bg #dcfce7
+ warning-bg #fef3c7
+ danger-bg #fee2e2
+ info-bg #e6f0ff
bg-soft #ffffff
surface-elev #dde2e6
surface-card #ffffff
text-body #3f454d
brand-softer #eaf2ff
brand-deep #2c6dbf
cta-bg #1a1a1f
cta-text #ffffff
border-soft #26344a10
shadow-icon rgba(20,30,50,0.08)
shadow-card rgba(20,30,50,0.04)
shadow-elev rgba(20,30,50,0.10)
scrim rgba(10,19,32,0.50)
success-soft #e6f4ea
warning-soft #fff8e1
danger-soft #fde7ea
info-soft #dceaff
typography 5 changed
~ display {"family":"Inter","size":56} {"family":"Auto Pro","size":96}
~ h1 {"family":"Inter","size":40} {"family":"Auto Pro","size":44}
~ h2 {"family":"Inter","size":32} {"family":"Auto Pro","size":32}
~ body {"family":"Inter","size":17} {"family":"Auto Pro","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":13}
radius identical
No differences.
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 48px 32px
~ xl 96px 64px
↻ Swap direction · Buttondown → Things