Diff

Affirm vs Apple

71 token-level differences between these two design systems.

Role tokens
Background
#13131f #ffffff
Text
#101820 #1d1d1f
Brand
#4a4af4 #0071e3
Border
rgba(255,255,255,0.12) rgba(0,0,0,0.16)
Display font
Axiforma for Affirm SF Pro Icons
Body size
16px 17px
colors 61 changed
~ bg #13131f #ffffff
~ bg-deep #0c0c14 #1d1d1f
~ surface #1c1c2b #fafafc
~ surface-elev #23233a #ffffff
~ text #101820 #1d1d1f
~ text-on-dark #ffffff #f5f5f7
~ text-soft #4a4a57 #6e6e73
~ brand #4a4af4 #0071e3
~ brand-hover #3a3ad6 #0077ed
~ border rgba(255,255,255,0.12) rgba(0,0,0,0.16)
~ border-strong rgba(255,255,255,0.24) rgba(0,0,0,0.32)
~ link #9fa0ff #0066cc
~ success #1f9d55 #1d8649
~ warning #b06a00 #bf4800
~ danger #d92d2d #d32f2f
+ surface-2 #f5f5f7
+ surface-soft rgba(0,0,0,0.04)
+ text-strong #1d1d1f
+ text-muted #86868b
+ text-faint #a1a1a6
+ text-soft-on-dark #a1a1a6
+ brand-pressed #006edb
+ link-hover #004999
+ border-soft rgba(0,0,0,0.08)
+ border-on-dark rgba(255,255,255,0.16)
+ divider #d2d2d7
+ scrim rgba(0,0,0,0.48)
+ shadow-card rgba(0,0,0,0.04)
+ shadow-elev rgba(0,0,0,0.10)
+ shadow-modal rgba(0,0,0,0.18)
+ success-soft #e8f5ee
+ warning-soft #fff5ee
+ danger-soft #fdecec
+ info #0071e3
+ info-soft #e8f2fc
+ accent-product-tv #0071e3
+ accent-product-watch #fa4c5a
+ accent-product-vision #a16eff
+ bg-dark #000000
surface-light #ffffff
surface-light-quiet #f6f6fb
text-on-dark-muted rgba(255,255,255,0.72)
text-on-dark-subtle rgba(255,255,255,0.55)
text-subdued #6b6b78
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-light #e2e2ec
border-brand #4a4af4
link-on-light #4a4af4
success-text #0f7a3e
success-bg rgba(31,157,85,0.16)
warning-bg rgba(176,106,0,0.14)
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":"SF Pro Icons","size":96}
~ h1 {"family":"Axiforma for Affirm","size":40} {"family":"SF Pro Icons","size":40}
~ h2 {"family":"Axiforma for Affirm","size":32} {"family":"SF Pro Icons","size":34}
~ body {"family":"Calibre","size":16} {"family":"SF Pro Icons","size":17}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":11}
radius 2 changed
~ card 24px 12px
~ pill 96px 9999px
spacing 3 changed
~ xs 0px 2px
~ lg 32px 24px
~ xl 64px 44px
↻ Swap direction · Apple → Affirm