Diff

Affirm vs HubSpot

70 token-level differences between these two design systems.

Role tokens
Background
#13131f #fcfcfa
Text
#101820 #33475b
Brand
#4a4af4 #FF7A59
Border
rgba(255,255,255,0.12) #cbd6e2
Display font
Axiforma for Affirm HubSpot Serif Page Header Human
Body size
16px 17px
colors 61 changed
~ bg #13131f #fcfcfa
~ bg-deep #0c0c14 #213343
~ surface #1c1c2b #ffffff
~ text #101820 #33475b
~ text-on-dark #ffffff #f5f8fa
~ text-on-dark-muted rgba(255,255,255,0.72) #cbd6e2
~ text-soft #4a4a57 #7c98b6
~ brand #4a4af4 #FF7A59
~ brand-deep #2e2eb0 #ff5c35
~ border rgba(255,255,255,0.12) #cbd6e2
~ border-strong rgba(255,255,255,0.24) #516f90
~ success #1f9d55 #00bda5
~ success-bg rgba(31,157,85,0.16) #d4f1ec
~ warning #b06a00 #f5c26b
~ warning-bg rgba(176,106,0,0.14) #fdf3df
~ danger #d92d2d #f2545b
~ danger-bg rgba(217,45,45,0.14) #fde2e2
+ bg-white #ffffff
+ bg-warm #f8f7f4
+ bg-cream #fef8f3
+ bg-dark #2e3338
+ surface-2 #f5f8fa
+ surface-3 #eaf0f6
+ surface-orange-soft #fff1ec
+ surface-orange-deep #ffe2d6
+ text-strong #1f2d3d
+ text-darker #0a1f2f
+ text-muted #516f90
+ text-faint #cbd6e2
+ text-on-orange #ffffff
+ text-on-brand #ffffff
+ brand-pressed #e54c2a
+ brand-soft #ffa18c
+ accent #33475b
+ accent-teal #00bda5
+ accent-yellow #f5c26b
+ accent-purple #6a78d1
+ border-soft #dfe3eb
+ border-on-orange #ffffff66
+ info #00a4bd
+ info-bg #d4f1f7
surface-elev #23233a
surface-light #ffffff
surface-light-quiet #f6f6fb
text-on-dark-subtle rgba(255,255,255,0.55)
text-subdued #6b6b78
brand-hover #3a3ad6
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 5 changed
~ display {"family":"Axiforma for Affirm","size":80} {"family":"HubSpot Serif Page Header Human","size":88}
~ h1 {"family":"Axiforma for Affirm","size":40} {"family":"HubSpot Serif Page Header Human","size":44}
~ h2 {"family":"Axiforma for Affirm","size":32} {"family":"HubSpot Serif Page Header Human","size":34}
~ body {"family":"Calibre","size":16} {"family":"HubSpot Sans","size":17}
~ label {"family":"SFMono-Regular","size":13} {"family":"JetBrains Mono","size":14}
radius 2 changed
~ button 8px 6px
~ pill 96px 9999px
spacing 2 changed
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · HubSpot → Affirm