Diff

Glean vs Revolut

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#333333 #191c1f
Brand
#343ced #191c1f
Border
#e6e6ea #e2e4e6
Display font
PolySans Neutral Aeonik Pro
Body size
16px 16px
colors 52 changed
~ surface #f5f5f7 #ffffff
~ text #333333 #191c1f
~ text-muted #6b6b73 #5f676e
~ brand #343ced #191c1f
~ border #e6e6ea #e2e4e6
~ border-strong #d2d2d8 #c9cdd1
+ bg-dark #191c1f
+ bg-dark-deep #0e1013
+ surface-subtle #f7f7f8
+ surface-muted #eff0f1
+ surface-dark #23272b
+ surface-dark-2 #2d3237
+ text-body #3a3f44
+ text-subtle #8d969e
+ text-on-dark #ffffff
+ text-on-dark-muted rgba(255, 255, 255, 0.72)
+ text-on-dark-subtle rgba(255, 255, 255, 0.48)
+ brand-on-dark #ffffff
+ accent #5f43ff
+ accent-blue #2868ff
+ accent-pink #ff4d97
+ accent-soft rgba(95, 67, 255, 0.10)
+ on-brand-light #191c1f
+ link #191c1f
+ link-accent #5f43ff
+ link-on-dark #ffffff
+ border-soft #f0f1f2
+ border-on-dark rgba(255, 255, 255, 0.16)
+ semantic-success #1f8f4e
+ semantic-warning #c77700
+ semantic-danger #d92d20
+ semantic-info #2868ff
+ focus-ring rgba(95, 67, 255, 0.55)
+ shadow-ambient rgba(16, 18, 21, 0.06)
+ shadow-soft rgba(16, 18, 21, 0.10)
+ shadow-standard rgba(16, 18, 21, 0.14)
+ shadow-elevated rgba(16, 18, 21, 0.20)
surface-soft #fafafa
text-heading #0a0227
text-faint #9a9aa2
brand-sampled #343bed
brand-hover #2a31cc
brand-soft #ebecff
brand-deep #29246a
success #058a5e
success-bg #e6f5ee
warning #9a6b00
warning-bg #fbf2dc
danger #b42318
danger-bg #fdeceb
info #343ced
info-bg #ebecff
typography 4 changed
~ display {"family":"PolySans Neutral","size":72} {"family":"Aeonik Pro","size":86}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"Aeonik Pro","size":40}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"Aeonik Pro","size":32}
~ body {"family":"PolySans Neutral","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing 3 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
↻ Swap direction · Revolut → Glean