Diff

Glean vs Cash App

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0e0e0e
Text
#333333 #ffffff
Brand
#343ced #00d54b
Border
#e6e6ea rgba(255, 255, 255, 0.10)
Display font
PolySans Neutral Cash Sans
Body size
16px 16px
colors 52 changed
~ bg #ffffff #0e0e0e
~ text #333333 #ffffff
~ text-muted #6b6b73 #a0a0a0
~ brand #343ced #00d54b
~ brand-soft #ebecff rgba(0, 213, 75, 0.12)
~ brand-deep #29246a #00a83a
~ on-brand #ffffff #0e0e0e
~ border #e6e6ea rgba(255, 255, 255, 0.10)
~ border-strong #d2d2d8 rgba(255, 255, 255, 0.20)
+ 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-subtle #6c6c6c
+ text-on-light #0e0e0e
+ text-body-on-light #1f1f1f
+ brand-bright #21fb6f
+ accent-blue #00cfff
+ accent-orange #ff7800
+ accent-purple #9b59ff
+ accent-pink #ff4d8b
+ link #00d54b
+ link-hover #21fb6f
+ border-soft rgba(255, 255, 255, 0.06)
+ border-on-light #d8d8d8
+ border-on-green rgba(0, 0, 0, 0.20)
+ semantic-success #00d54b
+ semantic-warning #ffb800
+ semantic-danger #ff4d4d
+ semantic-info #00cfff
+ 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)
+ shadow-hard rgba(0, 0, 0, 0.65)
surface #f5f5f7
surface-soft #fafafa
text-heading #0a0227
text-faint #9a9aa2
brand-sampled #343bed
brand-hover #2a31cc
success #058a5e
success-bg #e6f5ee
warning #9a6b00
warning-bg #fbf2dc
danger #b42318
danger-bg #fdeceb
info #343ced
info-bg #ebecff
typography 5 changed
~ display {"family":"PolySans Neutral","size":72} {"family":"Cash Sans","size":96}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"Cash Sans","size":40}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"Cash Sans","size":32}
~ body {"family":"PolySans Neutral","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 → Glean