Diff

Polar vs OpenRouter

62 token-level differences between these two design systems.

Role tokens
Background
#171719 #000000
Text
#d7d8da #ffffff
Brand
#5b3eea #ffffff
Border
#1d1e20 #1f1f1f
Display font
InterDisplay OR Display
Body size
16px 15px
colors 53 changed
~ bg #171719 #000000
~ bg-deep #0a0a0a #000000
~ surface #101011 #111111
~ text #d7d8da #ffffff
~ text-strong #ffffff #ededed
~ text-muted #828387 #9ca3af
~ text-faint #4a4b50 #6b7280
~ brand #5b3eea #ffffff
~ brand-active #4a30c8 #d4d4d4
~ link #9c87f5 #9ca3af
~ border #1d1e20 #1f1f1f
~ border-soft #171719 #0f0f0f
~ border-strong #2a2c30 #2a2a2a
~ success #3ddc97 #22c55e
~ warning #e8b94f #fbbf24
~ danger #ee5a5a #ef4444
~ info #5ec4ee #3b82f6
~ on-brand #ffffff #000000
+ surface-soft #0a0a0a
+ surface-elevated #1a1a1a
+ surface-row-alt #080808
+ text-body #d4d4d4
+ text-mono-data #ededed
+ brand-disabled #525252
+ on-dark #ffffff
+ border-table #1a1a1a
+ shadow-color rgba(0,0,0,0)
+ accent-emerald #22c55e
+ accent-rose #ef4444
+ accent-amber #fbbf24
+ accent-blue #3b82f6
+ code-keyword #ededed
+ code-string #9ca3af
+ code-comment #6b7280
+ table-stripe-odd #000000
+ table-stripe-even #080808
surface-alt #090909
surface-raised #1d1d20
surface-overlay #202024
text-soft #71727a
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":"OR Display","size":72}
~ h1 {"family":"InterDisplay","size":60} {"family":"OR Display","size":40}
~ h2 {"family":"InterDisplay","size":48} {"family":"OR Display","size":32}
~ body {"family":"Inter","size":16} {"family":"Inter","size":15}
~ label {"family":"GeistMono","size":11} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ button 6px 8px
~ card 24px 10px
spacing 2 changed
~ lg 32px 48px
~ xl 64px 80px
↻ Swap direction · OpenRouter → Polar