Diff

Glean vs Kagi

62 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fffbf5
Text
#333333 #2b2417
Brand
#343ced #ffb87a
Border
#e6e6ea rgba(0, 0, 0, 0.10)
Display font
PolySans Neutral IBM Plex Sans
Body size
16px 17px
colors 51 changed
~ bg #ffffff #fffbf5
~ surface #f5f5f7 #fbf2e2
~ text #333333 #2b2417
~ text-muted #6b6b73 #6b5d47
~ text-faint #9a9aa2 #a99a7d
~ brand #343ced #ffb87a
~ brand-hover #2a31cc #f3a45f
~ brand-soft #ebecff #ffe5c8
~ brand-deep #29246a #c97a3b
~ on-brand #ffffff #1c170d
~ border #e6e6ea rgba(0, 0, 0, 0.10)
~ border-strong #d2d2d8 rgba(0, 0, 0, 0.18)
~ success-bg #e6f5ee #e0ebd0
~ warning-bg #fbf2dc #fde8c7
~ danger-bg #fdeceb #f7d8d2
~ info-bg #ebecff #e8e3ff
+ bg-soft #fff6e8
+ surface-strong #f4e8ce
+ surface-hover #fff0d8
+ surface-elevated #fffefa
+ text-strong #1c170d
+ text-medium #3a3120
+ text-soft #8a7a5e
+ on-cta #1c170d
+ brand-active #e89348
+ brand-faint #fff4e3
+ brand-glow rgba(255, 184, 122, 0.32)
+ accent #7d6ce0
+ accent-hover #6b5acc
+ accent-soft #e8e3ff
+ link #c97a3b
+ link-hover #a55d24
+ selected-bg #fbf2e2
+ disabled-bg #f4e8ce
+ disabled-text #a99a7d
+ border-soft rgba(0, 0, 0, 0.08)
+ border-warm rgba(201, 122, 59, 0.20)
+ border-focus #c97a3b
+ success-text #3d5a47
+ warning-text #7a5e1f
+ danger-text #8a3a3a
+ info-text #3a3a6a
+ shadow-rgb 43, 36, 23
+ shadow-warm 201, 122, 59
surface-soft #fafafa
text-heading #0a0227
brand-sampled #343bed
success #058a5e
warning #9a6b00
danger #b42318
info #343ced
typography 5 changed
~ display {"family":"PolySans Neutral","size":72} {"family":"IBM Plex Sans","size":80}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"IBM Plex Sans","size":56}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"IBM Plex Sans","size":40}
~ body {"family":"PolySans Neutral","size":16} {"family":"IBM Plex Sans","size":17}
~ label {"family":"SFMono-Regular","size":13} {"family":"IBM Plex Mono","size":13}
radius 1 changed
~ card 12px 16px
spacing 5 changed
~ xs 0px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 32px 16px
~ xl 64px 24px
↻ Swap direction · Kagi → Glean