Diff

Tailscale vs Glean

55 token-level differences between these two design systems.

Role tokens
Background
#f9f7f6 #ffffff
Text
#181717 #333333
Brand
#d04841 #343ced
Border
rgba(24, 23, 23, 0.12) #e6e6ea
Display font
Inter PolySans Neutral
Body size
16px 16px
colors 51 changed
~ bg #f9f7f6 #ffffff
~ surface #ffffff #f5f5f7
~ text #181717 #333333
~ text-faint #a39e9b #9a9aa2
~ brand #d04841 #343ced
~ brand-hover #b83d37 #2a31cc
~ brand-deep #9e332e #29246a
~ brand-soft rgba(208, 72, 65, 0.10) #ebecff
~ border rgba(24, 23, 23, 0.12) #e6e6ea
~ border-strong rgba(24, 23, 23, 0.22) #d2d2d8
~ success #2f7d52 #058a5e
~ warning #c9821f #9a6b00
~ danger #d04841 #b42318
~ info #181717 #343ced
+ surface-soft #fafafa
+ text-heading #0a0227
+ text-muted #6b6b73
+ brand-sampled #343bed
+ success-bg #e6f5ee
+ warning-bg #fbf2dc
+ danger-bg #fdeceb
+ info-bg #ebecff
bg-pure #ffffff
bg-elev #f3f0ee
bg-warm #efeae7
bg-ink #181717
bg-ink-soft #232222
surface-warm #f9f7f6
text-secondary #4a4746
text-tertiary #736f6d
text-on-ink #f5f2f0
text-on-ink-soft #a39e9b
brand-tint rgba(208, 72, 65, 0.06)
link #d04841
link-hover #b83d37
focus rgba(208, 72, 65, 0.40)
cta-bg #d04841
cta-text #ffffff
cta-bg-secondary #232222
cta-text-secondary #ffffff
border-soft rgba(24, 23, 23, 0.07)
border-ink #181717
shadow-ambient rgba(24, 23, 23, 0.04)
shadow-card rgba(24, 23, 23, 0.06)
shadow-elev rgba(24, 23, 23, 0.08)
shadow-deep rgba(24, 23, 23, 0.14)
scrim rgba(24, 23, 23, 0.45)
success-soft rgba(47, 125, 82, 0.10)
warning-soft rgba(201, 130, 31, 0.10)
danger-soft rgba(208, 72, 65, 0.10)
info-soft rgba(24, 23, 23, 0.06)
typography 4 changed
~ display {"family":"Inter","size":80} {"family":"PolySans Neutral","size":72}
~ h1 {"family":"Inter","size":48} {"family":"PolySans Neutral","size":56}
~ h2 {"family":"Inter","size":32} {"family":"PolySans Neutral","size":40}
~ body {"family":"Inter","size":16} {"family":"PolySans Neutral","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Glean → Tailscale