Diff

Capacities vs Polar

59 token-level differences between these two design systems.

Role tokens
Background
#ffffff #171719
Text
#1a1a1f #d7d8da
Brand
#c6f432 #5b3eea
Border
#0000001a #1d1e20
Display font
Inter InterDisplay
Body size
17px 16px
colors 53 changed
~ bg #ffffff #171719
~ surface #faf3df #101011
~ surface-raised #f5edd0 #1d1d20
~ surface-overlay #ffffff #202024
~ text #1a1a1f #d7d8da
~ text-strong #0e0f12 #ffffff
~ text-muted #6b6770 #828387
~ text-soft #9a969f #71727a
~ text-faint #c4c0c8 #4a4b50
~ link #1a1a1f #9c87f5
~ link-hover #0e0f12 #ffffff
~ border #0000001a #1d1e20
~ border-soft #00000010 #171719
~ border-strong #00000033 #2a2c30
~ focus-ring #1a1a1f #5b3eea
~ selection-bg #fce98c #5b3eea
~ selection-text #1a1a1f #ffffff
~ shadow rgba(0,0,0,0.06) #00000080
~ success #5b9a4f #3ddc97
~ warning #e6b430 #e8b94f
~ danger #c4554d #ee5a5a
~ info #5a8eb5 #5ec4ee
~ on-brand #1a1a1f #ffffff
+ 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
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)
typography 5 changed
~ display {"family":"Inter","size":72} {"family":"InterDisplay","size":128}
~ h1 {"family":"Inter","size":64} {"family":"InterDisplay","size":60}
~ h2 {"family":"Inter","size":48} {"family":"InterDisplay","size":48}
~ body {"family":"Inter","size":17} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":13} {"family":"GeistMono","size":11}
radius 1 changed
~ button 8px 6px
spacing identical
No differences.
↻ Swap direction · Polar → Capacities