Diff

Affirm vs Coda

57 token-level differences between these two design systems.

Role tokens
Background
#13131f #ffffff
Text
#101820 #212121
Brand
#4a4af4 #0066ff
Border
rgba(255,255,255,0.12) #e3e3e3
Display font
Axiforma for Affirm Calibre-R
Body size
16px 16px
colors 51 changed
~ bg #13131f #ffffff
~ surface #1c1c2b #ffffff
~ text #101820 #212121
~ brand #4a4af4 #0066ff
~ brand-hover #3a3ad6 #0052cc
~ border rgba(255,255,255,0.12) #e3e3e3
~ border-strong rgba(255,255,255,0.24) #cccccc
~ success #1f9d55 #1a7f4b
~ success-bg rgba(31,157,85,0.16) #e7f4ec
~ warning #b06a00 #9a6400
~ warning-bg rgba(176,106,0,0.14) #fff3df
~ danger #d92d2d #c0392b
~ danger-bg rgba(217,45,45,0.14) #fbeae8
+ surface-soft #fafafa
+ surface-muted #f0f0f0
+ text-muted #444444
+ text-faint #717171
+ brand-soft #e6efff
+ cta-primary #000000
+ accent #f8ad40
+ accent-cream #fff6ec
+ accent-callout #ffe6c9
+ accent-warm #f0e5dc
+ block-green #006838
+ border-soft #ededed
+ info #0066ff
+ info-bg #e6efff
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-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 #9fa0ff
link-on-light #4a4af4
success-text #0f7a3e
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 4 changed
~ display {"family":"Axiforma for Affirm","size":80} {"family":"Calibre-R","size":72}
~ h1 {"family":"Axiforma for Affirm","size":40} {"family":"Calibre-R","size":48}
~ h2 {"family":"Axiforma for Affirm","size":32} {"family":"Calibre-R","size":38}
~ body {"family":"Calibre","size":16} {"family":"Inter","size":16}
radius 2 changed
~ card 24px 12px
~ pill 96px 9999px
spacing identical
No differences.
↻ Swap direction · Coda → Affirm