Diff

Glean vs Gitpod

50 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f9f9f9
Text
#333333 #0a0e19
Brand
#343ced #ffae33
Border
#e6e6ea rgba(10, 14, 25, 0.12)
Display font
PolySans Neutral Martina Plantijn
Body size
16px 16px
colors 46 changed
~ bg #ffffff #f9f9f9
~ surface #f5f5f7 rgba(255, 255, 255, 0.85)
~ text #333333 #0a0e19
~ text-faint #9a9aa2 #9499a3
~ brand #343ced #ffae33
~ brand-soft #ebecff rgba(255, 174, 51, 0.12)
~ brand-deep #29246a #ff8a00
~ on-brand #ffffff #0a0e19
~ border #e6e6ea rgba(10, 14, 25, 0.12)
~ border-strong #d2d2d8 rgba(10, 14, 25, 0.24)
~ success #058a5e #1f9d55
~ warning #9a6b00 #ffae33
~ danger #b42318 #e5484d
+ bg-pure #ffffff
+ bg-elev #f2f2f3
+ bg-deeper #ebebed
+ bg-ink #0a0e19
+ text-secondary #3a3f4b
+ text-tertiary #5b606c
+ text-on-dark #f5f5f7
+ text-on-dark-soft #a7abb5
+ brand-tint rgba(255, 174, 51, 0.06)
+ link #0a0e19
+ link-hover #ff8a00
+ cta-bg #0a0e19
+ cta-text #ffffff
+ cta-bg-secondary rgba(255, 255, 255, 0.85)
+ cta-text-secondary #0a0e19
+ border-soft rgba(10, 14, 25, 0.06)
+ shadow-ambient rgba(10, 14, 25, 0.04)
+ shadow-card rgba(10, 14, 25, 0.06)
+ shadow-elev rgba(10, 14, 25, 0.10)
+ scrim rgba(10, 14, 25, 0.45)
+ success-soft rgba(31, 157, 85, 0.12)
+ warning-soft rgba(255, 174, 51, 0.12)
+ danger-soft rgba(229, 72, 77, 0.12)
surface-soft #fafafa
text-heading #0a0227
text-muted #6b6b73
brand-sampled #343bed
brand-hover #2a31cc
success-bg #e6f5ee
warning-bg #fbf2dc
danger-bg #fdeceb
info #343ced
info-bg #ebecff
typography 4 changed
~ display {"family":"PolySans Neutral","size":72} {"family":"Martina Plantijn","size":80}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"Martina Plantijn","size":40}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"Martina Plantijn","size":32}
~ body {"family":"PolySans Neutral","size":16} {"family":"ABC Diatype","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Gitpod → Glean