Diff

Anytype vs Wispr Flow

51 token-level differences between these two design systems.

Role tokens
Background
#000000 #ffffeb
Text
#ffffff #1a1a1a
Brand
#3cd9b3 #f0d7ff
Border
#262626 #1a1a1a4d
Display font
Riccione EB Garamond
Body size
16px 16px
colors 47 changed
~ bg #000000 #ffffeb
~ surface #0d0d0d #034f46
~ text #ffffff #1a1a1a
~ text-muted #8a8a8a #666666
~ brand #3cd9b3 #f0d7ff
~ on-brand #000000 #1a1a1a
~ border #262626 #1a1a1a4d
~ border-soft #1a1a1a #1a1a1a1a
~ border-strong #3a3a3a #1a1a1a80
~ shadow-card rgba(0,0,0,0.65) rgba(26,26,15,0.05)
~ scrim rgba(0,0,0,0.70) rgba(17,17,10,0.50)
~ success #4cad00 #114e0b
~ success-soft #0f2200 #cef5ca
~ warning #ffb522 #5e5515
~ warning-soft #2a1d00 #fcf8d8
~ danger #ff6a7b #7f1c34
~ danger-soft #2e1115 #f8e4e4
+ bg-dark #e4e4d0
+ surface-soft #e4e4d0
+ text-darkest #111111
+ text-soft #888888
+ on-surface #ffffeb
+ brand-ink #1a1a1a
+ accent-glow #ffa946
+ accent-fathom #034f46
+ accent-pulse #7f1c34
+ white #ffffff
+ shadow-elev rgba(26,26,15,0.10)
+ focus-state #2d62ff
bg-deep #000000
surface-elev #1a1a1a
surface-hover #242424
text-strong #ffffff
text-secondary #b8b8b8
text-faint #5c5c5c
brand-hover #2fc4a0
brand-active #27a98a
brand-text #3cd9b3
brand-soft #0e2b25
any-teal #3cd9b3
any-blue #18a3f1
any-green #4cad00
any-amber #ffb522
border-brand #3cd9b3
shadow-ambient rgba(0,0,0,0.50)
shadow-modal rgba(0,0,0,0.80)
info #18a3f1
typography 4 changed
~ display {"family":"Riccione","size":88} {"family":"EB Garamond","size":120}
~ h1 {"family":"Riccione","size":48} {"family":"EB Garamond","size":48}
~ h2 {"family":"Riccione","size":36} {"family":"EB Garamond","size":36}
~ body {"family":"Inter","size":16} {"family":"Figtree","size":16}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Wispr Flow → Anytype