Diff

Cursor vs Tana

54 token-level differences between these two design systems.

Role tokens
Background
#f7f7f4 #000000
Text
#26251e #f0eded
Brand
#f54e00 #e1f0bd
Border
#e6e5e0 #1f1f1f
Display font
CursorGothic tanaClassic
Body size
16px 17px
colors 48 changed
~ bg #f7f7f4 #000000
~ bg-soft #fafaf7 #0a0a0a
~ surface #ffffff #141414
~ text #26251e #f0eded
~ text-strong #26251e #ffffff
~ text-soft rgba(38, 37, 30, 0.6) #7a7775
~ text-muted #807d72 #a8a5a3
~ text-faint #a09c92 #555250
~ brand #f54e00 #e1f0bd
~ brand-active #d04200 #b8cc88
~ on-brand #ffffff #000000
~ link #26251e #e1f0bd
~ link-hover #f54e00 #ffffff
~ border #e6e5e0 #1f1f1f
~ border-soft #efeee8 #161616
~ border-strong #cfcdc4 #2a2a2a
~ success #1f8a65 #a8d896
~ warning #c08532 #e6c07a
~ danger #cf2d56 #e89a8d
~ info #9fbbe0 #9bb8d4
+ bg-deep #050505
+ surface-raised #1a1a1a
+ surface-overlay #1f1f1f
+ surface-inverted #f0eded
+ text-on-brand #000000
+ text-on-inverted #0a0a0a
+ brand-hover #cde0a3
+ brand-soft #1f2516
+ accent-italic #d4caa8
+ accent-italic-soft #a8a08a
+ border-inverted #d8d5d3
+ focus-ring #e1f0bd
+ selection-bg #e1f0bd
+ selection-text #000000
+ shadow rgba(0,0,0,0.6)
surface-soft #f2f1ed
surface-strong #e6e5e0
text-body #5a5852
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":"tanaClassic","size":83}
~ h1 {"family":"CursorGothic","size":48} {"family":"tanaClassic","size":42}
~ h2 {"family":"CursorGothic","size":36} {"family":"tanaClassic","size":32}
~ body {"family":"CursorGothic","size":16} {"family":"SF Pro","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":12}
radius 1 changed
~ card 20px 24px
spacing identical
No differences.
↻ Swap direction · Tana → Cursor