Diff

Glif vs Bolt

57 token-level differences between these two design systems.

Role tokens
Background
#fcfaf6 #1e1e21
Text
#0e0e10 #ffffff
Brand
#2e9e4f #1488fc
Border
#0000000f rgba(255, 255, 255, 0.10)
Display font
Manrope Inter Display
Body size
16px 16px
colors 51 changed
~ bg #fcfaf6 #1e1e21
~ surface #ffffff #26262a
~ text #0e0e10 #ffffff
~ text-muted #55555a #a3a3a8
~ text-faint #b8b8be #8a8a8f
~ brand #2e9e4f #1488fc
~ on-brand #fffaef #f3f0f5
~ border #0000000f rgba(255, 255, 255, 0.10)
~ border-strong #0000001f rgba(255, 255, 255, 0.16)
~ border-subtle #00000008 rgba(255, 255, 255, 0.06)
~ border-focus #2e9e4f #1488fc
~ success-bg #e6f4ea rgba(34, 134, 58, 0.18)
~ warning-bg #fdf2dc rgba(166, 120, 20, 0.18)
~ danger-bg #fbe7e7 rgba(196, 52, 60, 0.18)
~ info-bg #e6f4ea rgba(20, 136, 252, 0.14)
+ bg-deep #161618
+ surface-soft #2a2a2e
+ surface-strong #2e2e33
+ text-display #fffeff
+ text-medium #b2b2b8
+ text-disabled #5c5c61
+ brand-bright #2ba6ff
+ brand-deep #0f6fd6
+ brand-wash rgba(20, 136, 252, 0.12)
+ on-brand-bright #ffffff
+ utility-dark #101010
+ utility-dark-text rgba(255, 255, 255, 0.75)
+ link #2ba6ff
+ link-hover #5cbbff
+ selected-bg #26262a
+ success-text #3fce6a
+ warning-text #e2b13c
+ danger-text #ff6b73
+ info-text #5cbbff
bg-soft #f6f3ec
bg-elev #f1ede4
surface-2 #f6f3ec
surface-3 #ebe6db
text-strong #000000
text-soft #86868c
brand-hover #28893f
brand-active #22742f
brand-soft #e6f4ea
accent-warm #fffbf6
accent-warm-deep #f3ece0
accent-lilac #efeaff
accent-sky #e6f1fb
success #2e9e4f
warning #d98a00
danger #d83a3a
info #2e9e4f
typography 4 changed
~ display {"family":"Manrope","size":80} {"family":"Inter Display","size":80}
~ h1 {"family":"Manrope","size":54} {"family":"Inter Display","size":48}
~ h2 {"family":"Manrope","size":40} {"family":"Inter Display","size":32}
~ body {"family":"Manrope","size":16} {"family":"Inter","size":16}
radius 2 changed
~ button 8px 6px
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Bolt → Glif