Diff

Kagi vs Glean

62 token-level differences between these two design systems.

Role tokens
Background
#fffbf5 #ffffff
Text
#2b2417 #333333
Brand
#ffb87a #343ced
Border
rgba(0, 0, 0, 0.10) #e6e6ea
Display font
IBM Plex Sans PolySans Neutral
Body size
17px 16px
colors 51 changed
~ bg #fffbf5 #ffffff
~ surface #fbf2e2 #f5f5f7
~ text #2b2417 #333333
~ text-muted #6b5d47 #6b6b73
~ text-faint #a99a7d #9a9aa2
~ on-brand #1c170d #ffffff
~ brand #ffb87a #343ced
~ brand-hover #f3a45f #2a31cc
~ brand-deep #c97a3b #29246a
~ brand-soft #ffe5c8 #ebecff
~ border rgba(0, 0, 0, 0.10) #e6e6ea
~ border-strong rgba(0, 0, 0, 0.18) #d2d2d8
~ success-bg #e0ebd0 #e6f5ee
~ warning-bg #fde8c7 #fbf2dc
~ danger-bg #f7d8d2 #fdeceb
~ info-bg #e8e3ff #ebecff
+ surface-soft #fafafa
+ text-heading #0a0227
+ brand-sampled #343bed
+ success #058a5e
+ warning #9a6b00
+ danger #b42318
+ info #343ced
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
typography 5 changed
~ display {"family":"IBM Plex Sans","size":80} {"family":"PolySans Neutral","size":72}
~ h1 {"family":"IBM Plex Sans","size":56} {"family":"PolySans Neutral","size":56}
~ h2 {"family":"IBM Plex Sans","size":40} {"family":"PolySans Neutral","size":40}
~ body {"family":"IBM Plex Sans","size":17} {"family":"PolySans Neutral","size":16}
~ label {"family":"IBM Plex Mono","size":13} {"family":"SFMono-Regular","size":13}
radius 1 changed
~ card 16px 12px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 16px 32px
~ xl 24px 64px
↻ Swap direction · Glean → Kagi