Diff

Glif vs Recraft

52 token-level differences between these two design systems.

Role tokens
Background
#fcfaf6 #000000
Text
#0e0e10 #ffffff
Brand
#2e9e4f #d2fc31
Border
#0000000f rgba(255, 255, 255, 0.10)
Display font
Manrope ABC Gravity Condensed
Body size
16px 16px
colors 48 changed
~ bg #fcfaf6 #000000
~ surface #ffffff #141414
~ text #0e0e10 #ffffff
~ text-strong #000000 #ffffff
~ text-muted #55555a #a3a3a3
~ text-soft #86868c #737373
~ text-faint #b8b8be #525252
~ brand #2e9e4f #d2fc31
~ brand-soft #e6f4ea rgba(210, 252, 49, 0.14)
~ on-brand #fffaef #0000ee
~ border #0000000f rgba(255, 255, 255, 0.10)
~ border-strong #0000001f rgba(255, 255, 255, 0.18)
~ border-subtle #00000008 rgba(255, 255, 255, 0.05)
~ success-bg #e6f4ea rgba(74, 222, 128, 0.12)
~ warning-bg #fdf2dc rgba(250, 204, 21, 0.12)
~ danger-bg #fbe7e7 rgba(248, 113, 113, 0.12)
~ info-bg #e6f4ea rgba(210, 252, 49, 0.10)
+ bg-alt #0a0a0a
+ surface-soft #1c1c1c
+ surface-elevated #242424
+ brand-deep #bce815
+ on-brand-ink #000000
+ link #ffffff
+ link-hover #d2fc31
+ cta-secondary-bg rgba(255, 255, 255, 0.9)
+ cta-secondary-text #0000ee
+ selected-bg rgba(255, 255, 255, 0.08)
+ disabled #525252
+ border-lime rgba(210, 252, 49, 0.45)
+ success-text #86efac
+ warning-text #fde047
+ danger-text #fca5a5
+ info-text #d2fc31
bg-soft #f6f3ec
bg-elev #f1ede4
surface-2 #f6f3ec
surface-3 #ebe6db
brand-hover #28893f
brand-active #22742f
accent-warm #fffbf6
accent-warm-deep #f3ece0
accent-lilac #efeaff
accent-sky #e6f1fb
border-focus #2e9e4f
success #2e9e4f
warning #d98a00
danger #d83a3a
info #2e9e4f
typography 4 changed
~ display {"family":"Manrope","size":80} {"family":"ABC Gravity Condensed","size":80}
~ h1 {"family":"Manrope","size":54} {"family":"ABC Gravity Condensed","size":40}
~ h2 {"family":"Manrope","size":40} {"family":"ABC Gravity Condensed","size":32}
~ body {"family":"Manrope","size":16} {"family":"Inter","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Recraft → Glif