Diff

Polar vs Cursor

56 token-level differences between these two design systems.

Role tokens
Background
#171719 #f7f7f4
Text
#d7d8da #26251e
Brand
#5b3eea #f54e00
Border
#1d1e20 #e6e5e0
Display font
InterDisplay CursorGothic
Body size
16px 16px
colors 49 changed
~ bg #171719 #f7f7f4
~ surface #101011 #ffffff
~ text #d7d8da #26251e
~ text-strong #ffffff #26251e
~ text-soft #71727a rgba(38, 37, 30, 0.6)
~ text-muted #828387 #807d72
~ text-faint #4a4b50 #a09c92
~ brand #5b3eea #f54e00
~ brand-active #4a30c8 #d04200
~ link #9c87f5 #26251e
~ link-hover #ffffff #f54e00
~ border #1d1e20 #e6e5e0
~ border-soft #171719 #efeee8
~ border-strong #2a2c30 #cfcdc4
~ success #3ddc97 #1f8a65
~ warning #e8b94f #c08532
~ danger #ee5a5a #cf2d56
~ info #5ec4ee #9fbbe0
+ bg-soft #fafaf7
+ 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)
bg-deep #0a0a0a
surface-alt #090909
surface-raised #1d1d20
surface-overlay #202024
text-on-brand #ffffff
brand-hover #6e54f0
brand-soft #1a1432
brand-deep #3a268f
accent-stroke #ffffff
accent-dim #282828
accent-serif #d7d8da
focus-ring #5b3eea
selection-bg #5b3eea
selection-text #ffffff
shadow #00000080
card #171719
popover #101011
typography 5 changed
~ display {"family":"InterDisplay","size":128} {"family":"CursorGothic","size":72}
~ h1 {"family":"InterDisplay","size":60} {"family":"CursorGothic","size":48}
~ h2 {"family":"InterDisplay","size":48} {"family":"CursorGothic","size":36}
~ body {"family":"Inter","size":16} {"family":"CursorGothic","size":16}
~ label {"family":"GeistMono","size":11} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 6px 8px
~ card 24px 20px
spacing identical
No differences.
↻ Swap direction · Cursor → Polar