Diff

Polar vs Warp

69 token-level differences between these two design systems.

Role tokens
Background
#171719 #121212
Text
#d7d8da #ffffff
Brand
#5b3eea #c2ff00
Border
#1d1e20 #2a2a2a
Display font
InterDisplay Inter
Body size
16px 16px
colors 61 changed
~ bg #171719 #121212
~ text #d7d8da #ffffff
~ brand #5b3eea #c2ff00
~ brand-soft #1a1432 #7a9e1f
~ link #9c87f5 #7eb8ff
~ link-hover #ffffff #a3cdff
~ border #1d1e20 #2a2a2a
~ border-soft #171719 rgba(255,255,255,0.06)
~ border-strong #2a2c30 rgba(255,255,255,0.12)
~ on-brand #ffffff #121212
+ bg-100 #1a1a1a
+ bg-200 #222222
+ bg-300 #2c2c2c
+ bg-400 #363636
+ surface-terminal #0e0e0e
+ surface-card #1a1a1a
+ surface-banner #f5f5f5
+ text-200 #cccccc
+ text-300 #999999
+ text-400 #666666
+ text-500 #444444
+ text-banner #0a0a0a
+ brand-glow rgba(194,255,0,0.20)
+ cta-bg #ffffff
+ cta-text #000000
+ cta-bg-hover #f5f5f5
+ terminal-cursor #c2ff00
+ terminal-prompt #a78bfa
+ terminal-success #86efac
+ terminal-error #fca5a5
+ terminal-warning #fde047
+ semantic-success #86efac
+ semantic-warning #fde047
+ semantic-danger #fca5a5
+ semantic-info #7eb8ff
bg-deep #0a0a0a
surface #101011
surface-alt #090909
surface-raised #1d1d20
surface-overlay #202024
text-strong #ffffff
text-soft #71727a
text-muted #828387
text-faint #4a4b50
text-on-brand #ffffff
brand-hover #6e54f0
brand-active #4a30c8
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
success #3ddc97
warning #e8b94f
danger #ee5a5a
info #5ec4ee
typography 4 changed
~ display {"family":"InterDisplay","size":128} {"family":"Inter","size":96}
~ h1 {"family":"InterDisplay","size":60} {"family":"Inter","size":56}
~ h2 {"family":"InterDisplay","size":48} {"family":"Inter","size":40}
~ label {"family":"GeistMono","size":11} {"family":"Hack","size":12}
radius 2 changed
~ button 6px 8px
~ card 24px 12px
spacing 2 changed
~ lg 32px 48px
~ xl 64px 96px
↻ Swap direction · Warp → Polar