Diff

Affirm vs MiniMax

76 token-level differences between these two design systems.

Role tokens
Background
#13131f #ffffff
Text
#101820 #0a0a0a
Brand
#4a4af4 #0a0a0a
Border
rgba(255,255,255,0.12) #e5e7eb
Display font
Axiforma for Affirm DM Sans
Body size
16px 16px
colors 64 changed
~ bg #13131f #ffffff
~ surface #1c1c2b #ffffff
~ text #101820 #0a0a0a
~ brand #4a4af4 #0a0a0a
~ border rgba(255,255,255,0.12) #e5e7eb
+ bg-surface #f7f8fa
+ bg-surface-soft #f2f3f5
+ bg-footer #0a0a0a
+ surface-card #ffffff
+ surface-feature #f7f8fa
+ text-strong #000000
+ text-body #222222
+ text-secondary #45515e
+ text-tertiary #5f5f5f
+ text-muted #8e8e93
+ 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
+ border-soft #eaecf0
+ on-dark #ffffff
+ on-coral #ffffff
+ semantic-success-bg #e8ffea
+ semantic-success-text #1ba673
+ semantic-error #d45656
bg-deep #0c0c14
surface-elev #23233a
surface-light #ffffff
surface-light-quiet #f6f6fb
text-on-dark #ffffff
text-on-dark-muted rgba(255,255,255,0.72)
text-on-dark-subtle rgba(255,255,255,0.55)
text-soft #4a4a57
text-subdued #6b6b78
brand-hover #3a3ad6
brand-deep #2e2eb0
brand-light #7a7af7
brand-tint #e6e6fe
brand-bg-hover rgba(74,74,244,0.08)
brand-on-dark-tint rgba(74,74,244,0.18)
accent-mint #7affc1
accent-sky #9fd8ff
border-strong rgba(255,255,255,0.24)
border-light #e2e2ec
border-brand #4a4af4
link #9fa0ff
link-on-light #4a4af4
success #1f9d55
success-text #0f7a3e
success-bg rgba(31,157,85,0.16)
warning #b06a00
warning-bg rgba(176,106,0,0.14)
danger #d92d2d
danger-bg rgba(217,45,45,0.14)
shadow-deep rgba(0,0,0,0.45)
shadow-soft rgba(0,0,0,0.28)
shadow-light rgba(16,24,32,0.10)
typography 5 changed
~ display {"family":"Axiforma for Affirm","size":80} {"family":"DM Sans","size":72}
~ h1 {"family":"Axiforma for Affirm","size":40} {"family":"DM Sans","size":40}
~ h2 {"family":"Axiforma for Affirm","size":32} {"family":"DM Sans","size":32}
~ body {"family":"Calibre","size":16} {"family":"DM Sans","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ card 24px 12px
~ pill 96px 9999px
spacing 5 changed
~ xs 0px 8px
~ sm 4px 12px
~ md 12px 16px
~ lg 32px 20px
~ xl 64px 24px
↻ Swap direction · MiniMax → Affirm