Diff

Cursor vs Ideogram

63 token-level differences between these two design systems.

Role tokens
Background
#f7f7f4 #ffffff
Text
#26251e #0e0e10
Brand
#f54e00 #8864e4
Border
#e6e5e0 rgba(15, 15, 15, 0.05)
Display font
CursorGothic Inter
Body size
16px 16px
colors 51 changed
~ bg #f7f7f4 #ffffff
~ surface #ffffff #f7f7f8
~ surface-soft #f2f1ed #ececee
~ text #26251e #0e0e10
~ text-strong #26251e #000000
~ text-soft rgba(38, 37, 30, 0.6) #585964
~ text-muted #807d72 #606066
~ text-faint #a09c92 #9b9ba0
~ brand #f54e00 #8864e4
~ link #26251e #7e4dda
~ link-hover #f54e00 #8864e4
~ border #e6e5e0 rgba(15, 15, 15, 0.05)
~ border-strong #cfcdc4 rgba(15, 15, 15, 0.12)
+ bg-alt #fafafc
+ surface-violet #f6f4fe
+ surface-violet-deep #ede7fc
+ text-medium #2b2b2f
+ brand-deep #7e4dda
+ brand-tint #f6f4fe
+ brand-tint-strong #ede7fc
+ selected-bg #f6f4fe
+ disabled #cfcfd4
+ border-subtle rgba(15, 15, 15, 0.03)
+ border-violet rgba(136, 100, 228, 0.30)
+ success-bg #e7f5ec
+ success-text #1f6b3e
+ warning-bg #fef6e4
+ warning-text #7a5a14
+ danger-bg #fbebec
+ danger-text #9a2c34
+ info-bg #f6f4fe
+ info-text #5b3eb8
bg-soft #fafaf7
surface-strong #e6e5e0
text-body #5a5852
brand-active #d04200
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)
success #1f8a65
warning #c08532
danger #cf2d56
info #9fbbe0
shadow-tint rgba(38, 37, 30, 0.08)
typography 5 changed
~ display {"family":"CursorGothic","size":72} {"family":"Inter","size":72}
~ h1 {"family":"CursorGothic","size":48} {"family":"Inter","size":48}
~ h2 {"family":"CursorGothic","size":36} {"family":"Inter","size":36}
~ body {"family":"CursorGothic","size":16} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"SFMono-Regular","size":12}
radius 2 changed
~ button 8px 6px
~ card 20px 12px
spacing 5 changed
~ xs 4px 1px
~ sm 8px 2px
~ md 16px 6px
~ lg 32px 12px
~ xl 64px 20px
↻ Swap direction · Ideogram → Cursor