Diff

Gumroad vs Cash App

57 token-level differences between these two design systems.

Role tokens
Background
#f4f4f0 #0e0e0e
Text
#000000 #ffffff
Brand
#ff90e8 #00d54b
Border
#000000 rgba(255, 255, 255, 0.10)
Display font
ABC Favorit Cash Sans
Body size
16px 16px
colors 47 changed
~ bg #f4f4f0 #0e0e0e
~ text #000000 #ffffff
~ text-muted #555555 #a0a0a0
~ text-subtle #767676 #6c6c6c
~ brand #ff90e8 #00d54b
~ brand-deep #ff62db #00a83a
~ brand-soft #ffe1f8 rgba(0, 213, 75, 0.12)
~ accent-blue #90a8ed #00cfff
~ link #000000 #00d54b
~ link-hover #ff62db #21fb6f
~ border #000000 rgba(255, 255, 255, 0.10)
~ shadow-hard #000000 rgba(0, 0, 0, 0.65)
~ semantic-success #23a094 #00d54b
~ semantic-warning #ffc900 #ffb800
~ semantic-danger #dc341e #ff4d4d
~ semantic-info #90a8ed #00cfff
+ bg-pure #000000
+ bg-elevated #1a1a1a
+ bg-card #1f1f1f
+ bg-elevated-2 #2a2a2a
+ surface-light-rare #ffffff
+ surface-light-cool #f5f5f5
+ text-body #e8e8e8
+ text-on-light #0e0e0e
+ text-body-on-light #1f1f1f
+ brand-bright #21fb6f
+ on-brand #0e0e0e
+ accent-orange #ff7800
+ accent-purple #9b59ff
+ accent-pink #ff4d8b
+ border-strong rgba(255, 255, 255, 0.20)
+ border-soft rgba(255, 255, 255, 0.06)
+ border-on-light #d8d8d8
+ border-on-green rgba(0, 0, 0, 0.20)
+ focus-ring rgba(0, 213, 75, 0.50)
+ shadow-glow rgba(0, 213, 75, 0.45)
+ shadow-ambient rgba(0, 0, 0, 0.4)
+ shadow-soft rgba(0, 0, 0, 0.5)
surface #ffffff
surface-pink #ff90e8
surface-cream-deep #efefe8
text-on-pink #000000
text-on-black #ffffff
accent-yellow #ffc900
accent-green #23a094
border-thick #000000
divider #dcdcd4
typography 5 changed
~ display {"family":"ABC Favorit","size":96} {"family":"Cash Sans","size":96}
~ h1 {"family":"ABC Favorit","size":40} {"family":"Cash Sans","size":40}
~ h2 {"family":"ABC Favorit","size":32} {"family":"Cash Sans","size":32}
~ body {"family":"ABC Favorit","size":16} {"family":"Cash Sans","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"Cash Sans Mono","size":11}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing 3 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
↻ Swap direction · Cash App → Gumroad