Diff

Polar vs Capacities

59 token-level differences between these two design systems.

Role tokens
Background
#171719 #ffffff
Text
#d7d8da #1a1a1f
Brand
#5b3eea #c6f432
Border
#1d1e20 #0000001a
Display font
InterDisplay Inter
Body size
16px 17px
colors 53 changed
~ bg #171719 #ffffff
~ surface #101011 #faf3df
~ surface-raised #1d1d20 #f5edd0
~ surface-overlay #202024 #ffffff
~ text #d7d8da #1a1a1f
~ text-strong #ffffff #0e0f12
~ text-soft #71727a #9a969f
~ text-muted #828387 #6b6770
~ text-faint #4a4b50 #c4c0c8
~ link #9c87f5 #1a1a1f
~ link-hover #ffffff #0e0f12
~ border #1d1e20 #0000001a
~ border-soft #171719 #00000010
~ border-strong #2a2c30 #00000033
~ focus-ring #5b3eea #1a1a1f
~ selection-bg #5b3eea #fce98c
~ selection-text #ffffff #1a1a1f
~ shadow #00000080 rgba(0,0,0,0.06)
~ success #3ddc97 #5b9a4f
~ warning #e8b94f #e6b430
~ danger #ee5a5a #c4554d
~ info #5ec4ee #5a8eb5
~ on-brand #ffffff #1a1a1f
+ bg-cream #fff4d6
+ bg-cream-soft #fff9e8
+ bg-soft #fef9e8
+ bg-tinted #fdf6e3
+ text-on-cta #ffffff
+ text-on-yellow #1a1a1f
+ brand-yellow #f5c842
+ brand-yellow-deep #e6b430
+ brand-yellow-soft #fce98c
+ brand-yellow-pale #fef4c2
+ cta-bg #1a1a1f
+ cta-text #ffffff
+ cta-hover #0e0f12
+ cta-active #000000
+ link-underline #f5c842
+ border-cream #e8dfb8
+ shadow-warm rgba(180,140,40,0.10)
bg-deep #0a0a0a
surface-alt #090909
text-on-brand #ffffff
brand #5b3eea
brand-hover #6e54f0
brand-active #4a30c8
brand-soft #1a1432
brand-deep #3a268f
accent-stroke #ffffff
accent-dim #282828
accent-serif #d7d8da
card #171719
popover #101011
typography 5 changed
~ display {"family":"InterDisplay","size":128} {"family":"Inter","size":72}
~ h1 {"family":"InterDisplay","size":60} {"family":"Inter","size":64}
~ h2 {"family":"InterDisplay","size":48} {"family":"Inter","size":48}
~ body {"family":"Inter","size":16} {"family":"Inter","size":17}
~ label {"family":"GeistMono","size":11} {"family":"JetBrains Mono","size":13}
radius 1 changed
~ button 6px 8px
spacing identical
No differences.
↻ Swap direction · Capacities → Polar