Diff

Wispr Flow vs Glif

53 token-level differences between these two design systems.

Role tokens
Background
#ffffeb #fcfaf6
Text
#1a1a1a #0e0e10
Brand
#f0d7ff #2e9e4f
Border
#1a1a1a4d #0000000f
Display font
EB Garamond Manrope
Body size
16px 16px
colors 49 changed
~ bg #ffffeb #fcfaf6
~ surface #034f46 #ffffff
~ text #1a1a1a #0e0e10
~ text-muted #666666 #55555a
~ text-soft #888888 #86868c
~ brand #f0d7ff #2e9e4f
~ on-brand #1a1a1a #fffaef
~ border #1a1a1a4d #0000000f
~ border-strong #1a1a1a80 #0000001f
~ success #114e0b #2e9e4f
~ warning #5e5515 #d98a00
~ danger #7f1c34 #d83a3a
+ bg-soft #f6f3ec
+ bg-elev #f1ede4
+ surface-2 #f6f3ec
+ surface-3 #ebe6db
+ text-strong #000000
+ text-faint #b8b8be
+ brand-hover #28893f
+ brand-active #22742f
+ brand-soft #e6f4ea
+ accent-warm #fffbf6
+ accent-warm-deep #f3ece0
+ accent-lilac #efeaff
+ accent-sky #e6f1fb
+ border-subtle #00000008
+ border-focus #2e9e4f
+ success-bg #e6f4ea
+ warning-bg #fdf2dc
+ danger-bg #fbe7e7
+ info #2e9e4f
+ info-bg #e6f4ea
bg-dark #e4e4d0
surface-soft #e4e4d0
text-darkest #111111
on-surface #ffffeb
brand-ink #1a1a1a
accent-glow #ffa946
accent-fathom #034f46
accent-pulse #7f1c34
border-soft #1a1a1a1a
white #ffffff
shadow-card rgba(26,26,15,0.05)
shadow-elev rgba(26,26,15,0.10)
scrim rgba(17,17,10,0.50)
success-soft #cef5ca
warning-soft #fcf8d8
danger-soft #f8e4e4
focus-state #2d62ff
typography 4 changed
~ display {"family":"EB Garamond","size":120} {"family":"Manrope","size":80}
~ h1 {"family":"EB Garamond","size":48} {"family":"Manrope","size":54}
~ h2 {"family":"EB Garamond","size":36} {"family":"Manrope","size":40}
~ body {"family":"Figtree","size":16} {"family":"Manrope","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Glif → Wispr Flow