Diff

Suno vs Glean

55 token-level differences between these two design systems.

Role tokens
Background
#101012 #ffffff
Text
#f7f4ef #333333
Brand
#fd429c #343ced
Border
rgba(255, 255, 255, 0.10) #e6e6ea
Display font
Neue Montreal PolySans Neutral
Body size
16px 16px
colors 44 changed
~ bg #101012 #ffffff
~ surface #1c1c1f #f5f5f7
~ surface-soft rgba(255, 255, 255, 0.05) #fafafa
~ text #f7f4ef #333333
~ text-muted #c2c2c1 #6b6b73
~ text-faint #737373 #9a9aa2
~ brand #fd429c #343ced
~ brand-deep #e02f8a #29246a
~ brand-soft rgba(253, 66, 156, 0.15) #ebecff
~ border rgba(255, 255, 255, 0.10) #e6e6ea
~ border-strong rgba(255, 255, 255, 0.18) #d2d2d8
~ success-bg rgba(34, 197, 94, 0.12) #e6f5ee
~ warning-bg rgba(245, 166, 35, 0.12) #fbf2dc
~ danger-bg rgba(239, 68, 68, 0.12) #fdeceb
~ info-bg rgba(56, 96, 190, 0.15) #ebecff
+ text-heading #0a0227
+ brand-sampled #343bed
+ brand-hover #2a31cc
+ success #058a5e
+ warning #9a6b00
+ danger #b42318
+ info #343ced
bg-alt #1c1c1f
surface-translucent rgba(28, 28, 31, 0.60)
surface-strong rgba(255, 255, 255, 0.08)
surface-iced #fcfbf9
surface-paper #f7f4ef
text-strong #ffffff
text-medium #e0ddd6
text-soft #a3a3a3
text-paper #101012
accent-cobalt #3860be
accent-deep #27455c
accent-amber #f5a623
link #f7f4ef
link-hover #fd429c
selected-bg rgba(253, 66, 156, 0.15)
disabled #737373
border-subtle rgba(255, 255, 255, 0.05)
border-pink rgba(253, 66, 156, 0.40)
success-text #86efac
warning-text #fcd34d
danger-text #fca5a5
info-text #93b8ee
typography 5 changed
~ display {"family":"Neue Montreal","size":96} {"family":"PolySans Neutral","size":72}
~ h1 {"family":"Neue Montreal","size":56} {"family":"PolySans Neutral","size":56}
~ h2 {"family":"Neue Montreal","size":48} {"family":"PolySans Neutral","size":40}
~ body {"family":"Neue Montreal","size":16} {"family":"PolySans Neutral","size":16}
~ label {"family":"SFMono-Regular","size":12} {"family":"SFMono-Regular","size":13}
radius 1 changed
~ card 20px 12px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 32px
~ xl 20px 64px
↻ Swap direction · Glean → Suno