Diff

xAI vs Glif

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #fcfaf6
Text
#0a0a0a #0e0e10
Brand
#0a0a0a #2e9e4f
Border
#d5d9e2 #0000000f
Display font
Universal Sans Display Manrope
Body size
16px 16px
colors 52 changed
~ bg #ffffff #fcfaf6
~ bg-soft #fafafa #f6f3ec
~ surface #f9f8f6 #ffffff
~ text #0a0a0a #0e0e10
~ text-strong #0a0a0a #000000
~ text-muted #6b7280 #55555a
~ brand #0a0a0a #2e9e4f
~ brand-hover #1f1f1f #28893f
~ brand-active #2c2c2c #22742f
~ on-brand #0a0a0a #fffaef
~ border #d5d9e2 #0000000f
~ border-strong rgba(10,10,10,0.16) #0000001f
~ success #248430 #2e9e4f
~ success-bg #ecfdf3 #e6f4ea
~ info #3b82f6 #2e9e4f
~ info-bg #f0f8ff #e6f4ea
~ warning #b45309 #d98a00
~ warning-bg #fffcf0 #fdf2dc
~ danger #be2e31 #d83a3a
~ danger-bg #fff0f0 #fbe7e7
+ bg-elev #f1ede4
+ surface-2 #f6f3ec
+ surface-3 #ebe6db
+ text-soft #86868c
+ text-faint #b8b8be
+ brand-soft #e6f4ea
+ accent-warm #fffbf6
+ accent-warm-deep #f3ece0
+ accent-lilac #efeaff
+ accent-sky #e6f1fb
+ border-subtle #00000008
+ border-focus #2e9e4f
surface-terminal #f8f7f5
surface-card #fffffff2
surface-hover rgba(10,10,10,0.04)
surface-press rgba(10,10,10,0.08)
header-bg rgba(255,255,255,0.85)
text-terminal #262626
text-subtle #8a8f98
text-on-brand #ffffff
link #111827
link-hover #0a0a0a
link-visited #111827
ring #3b82f6
border-soft rgba(10,10,10,0.08)
scrim rgba(10,10,10,0.5)
shadow-color rgba(0,0,0,0.10)
terminal-fg #262626
terminal-green #248430
terminal-green-bg #e3efe4
terminal-red #be2e31
terminal-red-bg #f8eaea
typography 4 changed
~ display {"family":"Universal Sans Display","size":80} {"family":"Manrope","size":80}
~ h1 {"family":"Universal Sans Display","size":60} {"family":"Manrope","size":54}
~ h2 {"family":"Universal Sans Display","size":48} {"family":"Manrope","size":40}
~ body {"family":"Universal Sans","size":16} {"family":"Manrope","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Glif → xAI