Diff

Coinbase vs Cursor

51 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f7f7f4
Text
#0a0b0d #26251e
Brand
#0052ff #f54e00
Border
#dee1e6 #e6e5e0
Display font
Coinbase Display CursorGothic
Body size
16px 16px
colors 43 changed
~ bg #ffffff #f7f7f4
~ surface-soft #f7f7f7 #f2f1ed
~ surface-strong #eef0f3 #e6e5e0
~ text #0a0b0d #26251e
~ text-body #5b616e #5a5852
~ text-muted #7c828a #807d72
~ brand #0052ff #f54e00
~ brand-active #003ecc #d04200
~ border #dee1e6 #e6e5e0
~ border-soft #eef0f3 #efeee8
+ bg-soft #fafaf7
+ surface #ffffff
+ text-strong #26251e
+ text-soft rgba(38, 37, 30, 0.6)
+ text-faint #a09c92
+ link #26251e
+ link-hover #f54e00
+ border-strong #cfcdc4
+ 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)
bg-dark #0a0b0d
surface-card #ffffff
surface-dark-elevated #16181c
text-subtle #a8acb3
brand-disabled #a8b8cc
on-dark #ffffff
on-dark-soft #a8acb3
semantic-up #05b169
semantic-down #cf202f
accent-yellow #f4b000
focus-ring rgba(0,82,255,0.30)
typography 5 changed
~ display {"family":"Coinbase Display","size":72} {"family":"CursorGothic","size":72}
~ h1 {"family":"Coinbase Display","size":40} {"family":"CursorGothic","size":48}
~ h2 {"family":"Coinbase Display","size":32} {"family":"CursorGothic","size":36}
~ body {"family":"Coinbase Sans","size":16} {"family":"CursorGothic","size":16}
~ label {"family":"Coinbase Mono","size":11} {"family":"JetBrains Mono","size":11}
radius 3 changed
~ button 12px 8px
~ card 16px 20px
~ pill 100px 9999px
spacing identical
No differences.
↻ Swap direction · Cursor → Coinbase