Diff

Cursor vs Target

55 token-level differences between these two design systems.

Role tokens
Background
#f7f7f4 #ffffff
Text
#26251e #333333
Brand
#f54e00 #cc0000
Border
#e6e5e0 #dddddd
Display font
CursorGothic Liberation Sans
Body size
16px 16px
colors 48 changed
~ bg #f7f7f4 #ffffff
~ surface-soft #f2f1ed #f7f7f7
~ surface-strong #e6e5e0 #e8e8e8
~ text #26251e #333333
~ text-strong #26251e #000000
~ text-soft rgba(38, 37, 30, 0.6) #888888
~ text-muted #807d72 #666666
~ brand #f54e00 #cc0000
~ brand-active #d04200 #880000
~ link #26251e #366cd9
~ link-hover #f54e00 #244a96
~ border #e6e5e0 #dddddd
~ border-soft #efeee8 #eeeeee
~ border-strong #cfcdc4 #cccccc
~ success #1f8a65 #377e36
~ warning #c08532 #cc6600
~ danger #cf2d56 #cc0000
~ info #9fbbe0 #366cd9
+ bg-page #f7f7f7
+ surface-red-soft #ffeeee
+ brand-hover #aa0000
+ brand-pale #ffd6d6
+ text-on-red #ffffff
+ text-on-dark #ffffff
+ border-input #bbbbbb
+ circle-gold #fcc111
+ shipt-green #5d3eb8
+ rating-red #cc0000
+ rating-empty #dddddd
+ freshness-green #377e36
+ scrim rgba(0,0,0,0.5)
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.12)
+ warning-soft #fff7e6
bg-soft #fafaf7
text-body #5a5852
text-faint #a09c92
on-brand #ffffff
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)
shadow-tint rgba(38, 37, 30, 0.08)
typography 5 changed
~ display {"family":"CursorGothic","size":72} {"family":"Liberation Sans","size":72}
~ h1 {"family":"CursorGothic","size":48} {"family":"Liberation Sans","size":40}
~ h2 {"family":"CursorGothic","size":36} {"family":"Liberation Sans","size":32}
~ body {"family":"CursorGothic","size":16} {"family":"Liberation Sans","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"Monaco","size":11}
radius 1 changed
~ card 20px 16px
spacing 1 changed
~ xl 64px 48px
↻ Swap direction · Target → Cursor