Diff

Wispr Flow vs Cursor

57 token-level differences between these two design systems.

Role tokens
Background
#ffffeb #f7f7f4
Text
#1a1a1a #26251e
Brand
#f0d7ff #f54e00
Border
#1a1a1a4d #e6e5e0
Display font
EB Garamond CursorGothic
Body size
16px 16px
colors 48 changed
~ bg #ffffeb #f7f7f4
~ surface #034f46 #ffffff
~ surface-soft #e4e4d0 #f2f1ed
~ text #1a1a1a #26251e
~ text-muted #666666 #807d72
~ text-soft #888888 rgba(38, 37, 30, 0.6)
~ brand #f0d7ff #f54e00
~ on-brand #1a1a1a #ffffff
~ border #1a1a1a4d #e6e5e0
~ border-soft #1a1a1a1a #efeee8
~ border-strong #1a1a1a80 #cfcdc4
~ success #114e0b #1f8a65
~ warning #5e5515 #c08532
~ danger #7f1c34 #cf2d56
+ bg-soft #fafaf7
+ surface-strong #e6e5e0
+ text-strong #26251e
+ text-body #5a5852
+ text-faint #a09c92
+ brand-active #d04200
+ link #26251e
+ link-hover #f54e00
+ border-translucent rgba(38, 37, 30, 0.1)
+ timeline-thinking #dfa88f
+ timeline-grep #9fc9a2
+ timeline-read #9fbbe0
+ timeline-edit #c0a8dd
+ timeline-done #c08532
+ selection-orange #f54e00
+ diff-add-bg rgba(31, 138, 101, 0.12)
+ diff-remove-bg rgba(207, 45, 86, 0.12)
+ info #9fbbe0
+ shadow-tint rgba(38, 37, 30, 0.08)
bg-dark #e4e4d0
text-darkest #111111
on-surface #ffffeb
brand-ink #1a1a1a
accent-glow #ffa946
accent-fathom #034f46
accent-pulse #7f1c34
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 5 changed
~ display {"family":"EB Garamond","size":120} {"family":"CursorGothic","size":72}
~ h1 {"family":"EB Garamond","size":48} {"family":"CursorGothic","size":48}
~ h2 {"family":"EB Garamond","size":36} {"family":"CursorGothic","size":36}
~ body {"family":"Figtree","size":16} {"family":"CursorGothic","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":11}
radius 1 changed
~ card 12px 20px
spacing 3 changed
~ xs 0px 4px
~ sm 4px 8px
~ md 12px 16px
↻ Swap direction · Cursor → Wispr Flow