Diff

Glean vs Biome

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#333333 #353841
Brand
#343ced #0065da
Border
#e6e6ea #e4e7ec
Display font
PolySans Neutral Inter
Body size
16px 16px
colors 50 changed
~ surface #f5f5f7 #ffffff
~ surface-soft #fafafa #fbfcfd
~ text #333333 #353841
~ text-muted #6b6b73 #6b7280
~ text-faint #9a9aa2 #9ca3af
~ brand #343ced #0065da
~ brand-soft #ebecff #e6f0fc
~ border #e6e6ea #e4e7ec
~ border-strong #d2d2d8 #d0d5dd
~ success-bg #e6f5ee #ecfdf3
~ warning-bg #fbf2dc #fffaeb
~ danger-bg #fdeceb #fef3f2
~ info-bg #ebecff #e6f0fc
+ bg-soft #f7f8fa
+ bg-strong #eef0f3
+ text-strong #17181c
+ brand-strong #0052b3
+ brand-faint #f2f7fe
+ accent #0065da
+ accent-soft #e6f0fc
+ link #0065da
+ link-hover #0052b3
+ selected #e6f0fc
+ disabled-bg #eef0f3
+ disabled-text #9ca3af
+ border-subtle #f0f1f4
+ divider #e4e7ec
+ inverse-bg #17181c
+ inverse-text #e4e7ec
+ inverse-text-muted #9ca3af
+ shadow-ambient rgba(16, 24, 40, 0.04)
+ shadow-standard rgba(16, 24, 40, 0.08)
+ shadow-brand rgba(0, 101, 218, 0.18)
+ success-text #027a48
+ success-border #abefc6
+ warning-text #b54708
+ warning-border #fedf89
+ danger-text #b42318
+ danger-border #fecdca
+ info-text #0052b3
+ info-border #b3d4f5
+ on-inverse #e4e7ec
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":"Inter","size":80}
~ h1 {"family":"PolySans Neutral","size":56} {"family":"Inter","size":64}
~ h2 {"family":"PolySans Neutral","size":40} {"family":"Inter","size":40}
~ body {"family":"PolySans Neutral","size":16} {"family":"Inter","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ button 8px 5px
spacing identical
No differences.
↻ Swap direction · Biome → Glean