Diff

Gumroad vs Square

53 token-level differences between these two design systems.

Role tokens
Background
#f4f4f0 #ffffff
Text
#000000 #000000
Brand
#ff90e8 #000000
Border
#000000 #d8d8d8
Display font
ABC Favorit Square Sans Display
Body size
16px 16px
colors 45 changed
~ bg #f4f4f0 #ffffff
~ text-muted #555555 #5a5a5a
~ text-subtle #767676 #8a8a8a
~ brand #ff90e8 #000000
~ link #000000 #006aff
~ link-hover #ff62db #0050c8
~ border #000000 #d8d8d8
~ shadow-hard #000000 rgba(0, 0, 0, 0.16)
~ semantic-success #23a094 #1f8b4c
~ semantic-warning #ffc900 #cc7700
~ semantic-danger #dc341e #cf202f
~ semantic-info #90a8ed #006aff
+ bg-dark #000000
+ bg-cool #f7f7f7
+ bg-cream #f1eee9
+ surface-soft #f7f7f7
+ surface-strong #ebebeb
+ surface-dark-elevated #1c1c1c
+ surface-cream #f1eee9
+ text-body #1c1c1c
+ text-on-dark #ffffff
+ text-on-dark-soft #a0a0a0
+ brand-hover #1c1c1c
+ accent #006aff
+ accent-hover #0050c8
+ accent-soft #e6efff
+ on-brand #ffffff
+ on-accent #ffffff
+ border-strong #a0a0a0
+ border-soft #ebebeb
+ border-on-dark rgba(255,255,255,0.16)
+ focus-ring rgba(0,106,255,0.45)
+ shadow-ambient rgba(0, 0, 0, 0.04)
+ shadow-soft rgba(0, 0, 0, 0.08)
surface-pink #ff90e8
surface-cream-deep #efefe8
text-on-pink #000000
text-on-black #ffffff
brand-deep #ff62db
brand-soft #ffe1f8
accent-yellow #ffc900
accent-blue #90a8ed
accent-green #23a094
border-thick #000000
divider #dcdcd4
typography 5 changed
~ display {"family":"ABC Favorit","size":96} {"family":"Square Sans Display","size":80}
~ h1 {"family":"ABC Favorit","size":40} {"family":"Square Sans Display","size":40}
~ h2 {"family":"ABC Favorit","size":32} {"family":"Square Sans Display","size":32}
~ body {"family":"ABC Favorit","size":16} {"family":"Square Sans Text","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Square Sans Mono","size":11}
radius identical
No differences.
spacing 3 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
↻ Swap direction · Square → Gumroad