Diff

Buttondown vs SpaceX

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #000000
Text
#000000 #f0f0fa
Brand
#0069ff #f0f0fa
Border
#e5e5e5 rgba(240, 240, 250, 0.25)
Display font
Auto Pro D-DIN-Bold
Body size
16px 16px
colors 44 changed
~ bg #ffffff #000000
~ surface #fafafa #000000
~ text #000000 #f0f0fa
~ text-faint #a3a3a3 rgba(240, 240, 250, 0.4)
~ brand #0069ff #f0f0fa
~ on-brand #ffffff #000000
~ border #e5e5e5 rgba(240, 240, 250, 0.25)
~ border-strong #d4d4d4 rgba(240, 240, 250, 0.55)
~ link #0069ff #f0f0fa
~ success #15803d #5be38a
~ warning #b45309 #ffb84a
~ danger #dc2626 #ff4a4a
~ info #0069ff #7ab8ff
+ bg-overlay rgba(0, 0, 0, 0.5)
+ text-on-bg #f0f0fa
+ text-mute rgba(240, 240, 250, 0.7)
+ brand-deep #000000
+ ghost-fill rgba(240, 240, 250, 0.1)
+ ghost-fill-hover rgba(240, 240, 250, 0.18)
+ ghost-border rgba(240, 240, 250, 0.35)
+ ghost-border-strong rgba(240, 240, 250, 0.55)
+ link-hover #ffffff
+ divider rgba(240, 240, 250, 0.15)
+ rule-strong rgba(240, 240, 250, 0.4)
+ white-100 #ffffff
+ border-soft rgba(240, 240, 250, 0.15)
+ scrim-light rgba(0, 0, 0, 0.3)
+ scrim-deep rgba(0, 0, 0, 0.7)
+ shadow-token transparent
surface-2 #f4f4f5
surface-3 #e9e9eb
text-strong #000000
text-muted #525252
text-soft #737373
brand-hover #0052cc
brand-active #0043a8
brand-soft #e6f0ff
accent #fef08a
accent-soft #fefce8
highlight #fef08a
success-bg #dcfce7
warning-bg #fef3c7
danger-bg #fee2e2
info-bg #e6f0ff
typography 5 changed
~ display {"family":"Auto Pro","size":96} {"family":"D-DIN-Bold","size":48}
~ h1 {"family":"Auto Pro","size":44} {"family":"D-DIN-Bold","size":40}
~ h2 {"family":"Auto Pro","size":32} {"family":"D-DIN-Bold","size":32}
~ body {"family":"Auto Pro","size":16} {"family":"D-DIN","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"D-DIN","size":11}
radius 3 changed
~ button 8px 4px
~ card 12px 0px
~ pill 9999px 32px
spacing 4 changed
~ xs 0px 3px
~ sm 4px 5px
~ lg 32px 20px
~ xl 64px 30px
↻ Swap direction · SpaceX → Buttondown