Diff

Ferrari vs MiniMax

67 token-level differences between these two design systems.

Role tokens
Background
#181818 #ffffff
Text
#ffffff #0a0a0a
Brand
#da291c #0a0a0a
Border
#303030 #e5e7eb
Display font
FerrariSans DM Sans
Body size
14px 16px
colors 56 changed
~ bg #181818 #ffffff
~ surface #303030 #ffffff
~ surface-card #303030 #ffffff
~ text #ffffff #0a0a0a
~ text-body #969696 #222222
~ text-strong #ffffff #000000
~ text-muted #666666 #8e8e93
~ brand #da291c #0a0a0a
~ border #303030 #e5e7eb
~ border-soft #ebebeb #eaecf0
+ bg-surface #f7f8fa
+ bg-surface-soft #f2f3f5
+ bg-footer #0a0a0a
+ surface-feature #f7f8fa
+ text-secondary #45515e
+ text-tertiary #5f5f5f
+ text-faint #a8aab2
+ brand-pressed #222222
+ brand-coral #ff5530
+ brand-magenta #ea5ec1
+ brand-blue #1456f0
+ brand-blue-deep #1d4ed8
+ brand-blue-mid #3b82f6
+ brand-blue-700 #17437d
+ brand-blue-200 #bfdbfe
+ brand-cyan #3daeff
+ brand-purple #a855f7
+ on-dark #ffffff
+ on-coral #ffffff
+ semantic-success-bg #e8ffea
+ semantic-success-text #1ba673
+ semantic-error #d45656
bg-campaign #000000
surface-soft-light #f7f7f7
surface-strong-light #ebebeb
surface-light #ffffff
text-on-light #181818
text-muted-soft #8f8f8f
brand-active #b01e0a
brand-hover #9d2211
brand-gradient-top #a00c01
accent-yellow-hypersail #fff200
accent-yellow #f6e500
on-light #181818
on-photo #ffffff
border-on-light #d2d2d2
ring #f6e500
link #ffffff
link-hover #da291c
promo-red #da291c
gradient-dark-top #3c3c3c
gradient-dark-bottom #030303
success #03904a
warning #f13a2c
info #4c98b9
danger #f13a2c
typography 4 changed
~ display {"family":"FerrariSans","size":72} {"family":"DM Sans","size":72}
~ h1 {"family":"FerrariSans","size":40} {"family":"DM Sans","size":40}
~ h2 {"family":"FerrariSans","size":32} {"family":"DM Sans","size":32}
~ body {"family":"FerrariSans","size":14} {"family":"DM Sans","size":16}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing 5 changed
~ xs 4px 8px
~ sm 8px 12px
~ md 24px 16px
~ lg 64px 20px
~ xl 128px 24px
↻ Swap direction · MiniMax → Ferrari