Diff

Together AI vs HubSpot

88 token-level differences between these two design systems.

Role tokens
Background
#fafafa #fcfcfa
Text
#0f1f3d #33475b
Brand
#0f1f3d #FF7A59
Border
#e5e7eb #cbd6e2
Display font
Inter HubSpot Serif Page Header Human
Body size
16px 17px
colors 77 changed
~ bg #fafafa #fcfcfa
~ text #0f1f3d #33475b
~ text-strong #06091a #1f2d3d
~ text-muted #5a627a #516f90
~ text-soft #7d839a #7c98b6
~ brand #0f1f3d #FF7A59
~ brand-soft #27314e #ffa18c
~ brand-deep #080f1f #ff5c35
~ accent-purple #7c3aed #6a78d1
~ border #e5e7eb #cbd6e2
~ border-soft #f0f1f3 #dfe3eb
~ border-strong #cbd0d8 #516f90
~ success #10b981 #00bda5
~ warning #f59e0b #f5c26b
~ danger #ef4444 #f2545b
~ info #0070f3 #00a4bd
+ bg-white #ffffff
+ bg-warm #f8f7f4
+ bg-cream #fef8f3
+ bg-dark #2e3338
+ bg-deep #213343
+ surface-2 #f5f8fa
+ surface-3 #eaf0f6
+ surface-orange-soft #fff1ec
+ surface-orange-deep #ffe2d6
+ text-darker #0a1f2f
+ text-faint #cbd6e2
+ text-on-orange #ffffff
+ text-on-dark #f5f8fa
+ text-on-dark-muted #cbd6e2
+ brand-pressed #e54c2a
+ accent #33475b
+ accent-teal #00bda5
+ accent-yellow #f5c26b
+ border-on-orange #ffffff66
+ success-bg #d4f1ec
+ warning-bg #fdf3df
+ danger-bg #fde2e2
+ info-bg #d4f1f7
bg-pure #ffffff
bg-surface #f4f5f7
bg-promo #e7f0ff
surface-elevated #ffffff
surface-hover #f4f5f7
surface-soft #f9fafb
surface-strong #e5e7eb
text-disabled #a8aebd
text-link #0070f3
text-link-hover #0058c2
brand-hover #1a2d52
accent-blue #0070f3
accent-blue-hover #0058c2
accent-blue-active #003e8c
accent-blue-soft #e7f0ff
accent-cyan #00d4ff
accent-green #10b981
accent-orange #f59e0b
accent-red #ef4444
border-focus #0070f3
code-bg-light #f4f5f7
code-bg-dark #1a1d29
code-text #e5e7eb
code-comment #7d839a
code-keyword #c084fc
code-string #86efac
code-function #60a5fa
code-variable #fcd34d
code-punct #a4adc8
code-number #fb923c
shadow-card rgba(15,31,61,0.06)
shadow-modal rgba(15,31,61,0.2)
shadow-popover rgba(15,31,61,0.12)
shadow-elevated rgba(15,31,61,0.10)
success-soft #d1fae5
warning-soft #fef3c7
danger-soft #fee2e2
info-soft #e7f0ff
typography 5 changed
~ display {"family":"Inter","size":64} {"family":"HubSpot Serif Page Header Human","size":88}
~ h1 {"family":"Inter","size":40} {"family":"HubSpot Serif Page Header Human","size":44}
~ h2 {"family":"Inter","size":32} {"family":"HubSpot Serif Page Header Human","size":34}
~ body {"family":"Inter","size":16} {"family":"HubSpot Sans","size":17}
~ label {"family":"JetBrains Mono","size":11} {"family":"JetBrains Mono","size":14}
radius 1 changed
~ card 8px 24px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 48px 40px
↻ Swap direction · HubSpot → Together AI