Diff

Cursor vs Turbo

67 token-level differences between these two design systems.

Role tokens
Background
#f7f7f4 #000000
Text
#26251e #ffffff
Brand
#f54e00 #ff1e56
Border
#e6e5e0 rgba(255, 255, 255, 0.08)
Display font
CursorGothic Geist
Body size
16px 16px
colors 56 changed
~ bg #f7f7f4 #000000
~ bg-soft #fafaf7 #0a0a0a
~ surface #ffffff #111111
~ surface-strong #e6e5e0 #1a1a1a
~ text #26251e #ffffff
~ text-strong #26251e #ffffff
~ text-soft rgba(38, 37, 30, 0.6) #666666
~ text-muted #807d72 #a1a1a1
~ text-faint #a09c92 #444444
~ brand #f54e00 #ff1e56
~ border #e6e5e0 rgba(255, 255, 255, 0.08)
~ border-strong #cfcdc4 rgba(255, 255, 255, 0.15)
~ success #1f8a65 #0cce6b
~ warning #c08532 #f5a623
~ danger #cf2d56 #ff4d4f
~ info #9fbbe0 #0096ff
+ surface-elevated #202020
+ bg-overlay rgba(0, 0, 0, 0.72)
+ text-on-brand #ffffff
+ brand-strong #e6164a
+ brand-soft rgba(255, 30, 86, 0.12)
+ accent #0096ff
+ accent-strong #0078cc
+ accent-soft rgba(0, 150, 255, 0.12)
+ gradient-from #ff1e56
+ gradient-via #9b56b3
+ gradient-to #0096ff
+ glow-magenta rgba(255, 30, 86, 0.4)
+ glow-blue rgba(0, 150, 255, 0.35)
+ glow-soft rgba(255, 30, 86, 0.2)
+ border-subtle rgba(255, 255, 255, 0.05)
+ border-brand rgba(255, 30, 86, 0.4)
+ border-focus #ff1e56
+ success-bg rgba(12, 206, 107, 0.1)
+ warning-bg rgba(245, 166, 35, 0.1)
+ danger-bg rgba(255, 77, 79, 0.1)
+ info-bg rgba(0, 150, 255, 0.1)
+ on-accent #ffffff
+ on-surface #ffffff
+ on-bg #ffffff
surface-soft #f2f1ed
text-body #5a5852
brand-active #d04200
link #26251e
link-hover #f54e00
border-soft #efeee8
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":"Geist","size":96}
~ h1 {"family":"CursorGothic","size":48} {"family":"Geist","size":64}
~ h2 {"family":"CursorGothic","size":36} {"family":"Geist","size":48}
~ body {"family":"CursorGothic","size":16} {"family":"Geist","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"Geist Mono","size":12}
radius 1 changed
~ card 20px 12px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 2px
~ md 16px 8px
~ lg 32px 20px
~ xl 64px 32px
↻ Swap direction · Turbo → Cursor