Diff

Polar vs Ferrari

61 token-level differences between these two design systems.

Role tokens
Background
#171719 #181818
Text
#d7d8da #ffffff
Brand
#5b3eea #da291c
Border
#1d1e20 #303030
Display font
InterDisplay FerrariSans
Body size
16px 14px
colors 52 changed
~ bg #171719 #181818
~ surface #101011 #303030
~ text #d7d8da #ffffff
~ text-muted #828387 #666666
~ brand #5b3eea #da291c
~ brand-hover #6e54f0 #9d2211
~ brand-active #4a30c8 #b01e0a
~ link #9c87f5 #ffffff
~ link-hover #ffffff #da291c
~ border #1d1e20 #303030
~ border-soft #171719 #ebebeb
~ success #3ddc97 #03904a
~ warning #e8b94f #f13a2c
~ danger #ee5a5a #f13a2c
~ info #5ec4ee #4c98b9
+ bg-campaign #000000
+ surface-card #303030
+ surface-soft-light #f7f7f7
+ surface-strong-light #ebebeb
+ surface-light #ffffff
+ text-body #969696
+ text-on-light #181818
+ text-muted-soft #8f8f8f
+ brand-gradient-top #a00c01
+ accent-yellow-hypersail #fff200
+ accent-yellow #f6e500
+ on-light #181818
+ on-photo #ffffff
+ border-on-light #d2d2d2
+ ring #f6e500
+ promo-red #da291c
+ gradient-dark-top #3c3c3c
+ gradient-dark-bottom #030303
bg-deep #0a0a0a
surface-alt #090909
surface-raised #1d1d20
surface-overlay #202024
text-soft #71727a
text-faint #4a4b50
text-on-brand #ffffff
brand-soft #1a1432
brand-deep #3a268f
accent-stroke #ffffff
accent-dim #282828
accent-serif #d7d8da
border-strong #2a2c30
focus-ring #5b3eea
selection-bg #5b3eea
selection-text #ffffff
shadow #00000080
card #171719
popover #101011
typography 5 changed
~ display {"family":"InterDisplay","size":128} {"family":"FerrariSans","size":72}
~ h1 {"family":"InterDisplay","size":60} {"family":"FerrariSans","size":40}
~ h2 {"family":"InterDisplay","size":48} {"family":"FerrariSans","size":32}
~ body {"family":"Inter","size":16} {"family":"FerrariSans","size":14}
~ label {"family":"GeistMono","size":11} {"family":"JetBrains Mono","size":11}
radius 1 changed
~ card 24px 8px
spacing 3 changed
~ md 16px 24px
~ lg 32px 64px
~ xl 64px 128px
↻ Swap direction · Ferrari → Polar