Diff

Glean vs Qwik

69 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0a0e1a
Text
#333333 #ffffff
Brand
#343ced #ac7ef4
Border
#e6e6ea #ffffff14
Display font
PolySans Neutral Poppins
Body size
16px 16px
colors 59 changed
~ bg #ffffff #0a0e1a
~ surface #f5f5f7 #1a2040
~ text #333333 #ffffff
~ text-muted #6b6b73 #a8b1c2
~ text-faint #9a9aa2 #5a6478
~ brand #343ced #ac7ef4
~ brand-soft #ebecff #ac7ef422
~ border #e6e6ea #ffffff14
~ border-strong #d2d2d8 #ffffff26
~ success-bg #e6f5ee #0d2818
~ warning-bg #fbf2dc #2a2010
~ danger-bg #fdeceb #2a1414
~ info-bg #ebecff #0c2030
+ bg-soft #11162a
+ bg-strong #1a2040
+ surface-strong #252b50
+ surface-muted #0d1224
+ text-strong #ffffff
+ text-soft #7a8499
+ text-disabled #3a4258
+ brand-strong #8b5cf0
+ accent #18b6f6
+ accent-strong #0a9ad9
+ accent-soft #18b6f622
+ gradient-from #ac7ef4
+ gradient-to #18b6f6
+ gradient-via #7c3aed
+ glow #ac7ef466
+ glow-blue #18b6f666
+ link #18b6f6
+ link-hover #33d4ff
+ link-visited #c4b5fd
+ selected #ac7ef422
+ disabled-bg #252b50
+ disabled-text #5a6478
+ border-subtle #ffffff0a
+ border-brand #ac7ef466
+ divider #ffffff14
+ shadow-deep rgba(0, 0, 0, 0.4)
+ shadow-violet rgba(172, 126, 244, 0.32)
+ shadow-blue rgba(24, 182, 246, 0.32)
+ success-text #86efac
+ success-border #22c55e
+ warning-text #fbbf24
+ warning-border #f59e0b
+ danger-text #fca5a5
+ danger-border #ef4444
+ info-text #7dd3fc
+ info-border #0ea5e9
+ on-accent #0a0e1a
surface-soft #fafafa
text-heading #0a0227
brand-sampled #343bed
brand-hover #2a31cc
brand-deep #29246a
success #058a5e
warning #9a6b00
danger #b42318
info #343ced
typography 5 changed
~ display {"family":"PolySans Neutral","size":72} {"family":"Poppins","size":88}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"Poppins","size":48}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"Poppins","size":36}
~ body {"family":"PolySans Neutral","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 8px 10px
~ card 12px 16px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Qwik → Glean