Diff

Figma vs Cursor

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f7f7f4
Text
#000000 #26251e
Brand
#000000 #f54e00
Border
#e6e6e6 #e6e5e0
Display font
figmaSans CursorGothic
Body size
18px 16px
colors 51 changed
~ bg #ffffff #f7f7f4
~ bg-soft #f7f7f5 #fafaf7
~ surface-soft #f7f7f5 #f2f1ed
~ text #000000 #26251e
~ text-strong #000000 #26251e
~ text-soft #1e1e1e rgba(38, 37, 30, 0.6)
~ text-muted #666666 #807d72
~ text-faint #999999 #a09c92
~ brand #000000 #f54e00
~ link #000000 #26251e
~ link-hover #1e1e1e #f54e00
~ border #e6e6e6 #e6e5e0
~ border-soft #f1f1f1 #efeee8
~ border-strong #cccccc #cfcdc4
+ surface-strong #e6e5e0
+ text-body #5a5852
+ brand-active #d04200
+ 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)
+ success #1f8a65
+ warning #c08532
+ danger #cf2d56
+ info #9fbbe0
+ shadow-tint rgba(38, 37, 30, 0.08)
brand-pressed #1e1e1e
inverse-bg #000000
inverse-text #ffffff
block-lime #dceeb1
block-lilac #c5b0f4
block-cream #f4ecd6
block-pink #efd4d4
block-mint #c8e6cd
block-coral #f3c9b6
block-navy #1f1d3d
accent-magenta #ff3d8b
accent-blue #0d99ff
accent-green #0fa958
accent-red #f24822
accent-purple #9747ff
accent-yellow #ffcd29
semantic-success #1ea64a
semantic-warning #ff9800
semantic-error #f24822
overlay-scrim rgba(0, 0, 0, 0.6)
typography 5 changed
~ display {"family":"figmaSans","size":86} {"family":"CursorGothic","size":72}
~ h1 {"family":"figmaSans","size":48} {"family":"CursorGothic","size":48}
~ h2 {"family":"figmaSans","size":36} {"family":"CursorGothic","size":36}
~ body {"family":"figmaSans","size":18} {"family":"CursorGothic","size":16}
~ label {"family":"figmaMono","size":18} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ card 48px 20px
~ pill 50px 9999px
spacing 3 changed
~ xs 1px 4px
~ sm 4px 8px
~ md 12px 16px
↻ Swap direction · Cursor → Figma