Diff

Ferrari vs Polar

61 token-level differences between these two design systems.

Role tokens
Background
#181818 #171719
Text
#ffffff #d7d8da
Brand
#da291c #5b3eea
Border
#303030 #1d1e20
Display font
FerrariSans InterDisplay
Body size
14px 16px
colors 52 changed
~ bg #181818 #171719
~ surface #303030 #101011
~ text #ffffff #d7d8da
~ text-muted #666666 #828387
~ brand #da291c #5b3eea
~ brand-active #b01e0a #4a30c8
~ brand-hover #9d2211 #6e54f0
~ border #303030 #1d1e20
~ border-soft #ebebeb #171719
~ link #ffffff #9c87f5
~ link-hover #da291c #ffffff
~ success #03904a #3ddc97
~ warning #f13a2c #e8b94f
~ info #4c98b9 #5ec4ee
~ danger #f13a2c #ee5a5a
+ 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
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
typography 5 changed
~ display {"family":"FerrariSans","size":72} {"family":"InterDisplay","size":128}
~ h1 {"family":"FerrariSans","size":40} {"family":"InterDisplay","size":60}
~ h2 {"family":"FerrariSans","size":32} {"family":"InterDisplay","size":48}
~ body {"family":"FerrariSans","size":14} {"family":"Inter","size":16}
~ label {"family":"JetBrains Mono","size":11} {"family":"GeistMono","size":11}
radius 1 changed
~ card 8px 24px
spacing 3 changed
~ md 24px 16px
~ lg 64px 32px
~ xl 128px 64px
↻ Swap direction · Polar → Ferrari