Diff

Intercom vs Zoom

92 token-level differences between these two design systems.

Role tokens
Background
#faf9f6 #ffffff
Text
#17100e #000000
Brand
#000ce1 #0b5cff
Border
#17100e1a #d6d8df
Display font
Saans Almaden Sans
Body size
16px 16px
colors 86 changed
~ bg #faf9f6 #ffffff
~ text #17100e #000000
~ text-muted #4a443f #67677e
~ text-soft #6b645e #3d3d50
~ text-faint #9a938c #9595a8
~ brand #000ce1 #0b5cff
~ accent-orange #ff5600 #ff7a59
~ accent-green #00da00 #3ec78f
~ border #17100e1a #d6d8df
~ border-strong #17100e #a8acb8
~ success-bg #d7efdc #e3f6ed
~ warning-bg #feedaf #fff4e0
~ danger-bg #fed9db #fde6ea
+ bg-soft #f8f9fa
+ bg-blue-soft #eef4ff
+ bg-blue-deep #0b1739
+ surface-elev #fafbfc
+ text-strong #000000
+ text-medium #232333
+ text-disabled #c4c4cf
+ text-on-deep #ffffff
+ brand-deep #0846cc
+ brand-bright #2872ff
+ brand-soft #eef4ff
+ brand-tint #b3ccff
+ accent-violet #7b61ff
+ accent-violet-soft #f0ecff
+ accent-cyan #00b6f0
+ accent-cyan-soft #e0f6fd
+ accent-orange-soft #fff0eb
+ link #0b5cff
+ link-hover #0846cc
+ selected-bg #eef4ff
+ disabled #c4c4cf
+ border-subtle #eceef2
+ border-brand rgba(11, 92, 255, 0.30)
+ success-text #16794e
+ warning-text #7a5400
+ danger-text #a51c30
+ info-bg #eef4ff
+ info-text #0846cc
bg-cream #f4f3ec
bg-cream-light #fbfaf7
bg-chalk #f1eee9
bg-canvas #e7e3db
bg-linen #dedbd6
bg-clay #d3cec6
bg-navy #020917
bg-dark #080e1c
surface-cream #f4f3ec
text-off-black #111111
text-on-dark #faf9f6
text-on-dark-muted #cbc7bf
brand-light #7a7eef
brand-lightest #cccef8
brand-active #0009a8
cta-black #000000
cta-near-black #17100e
accent-pink #ff00af
accent-pink-light #ff7ad5
accent-pink-lightest #ffcbef
accent-orange-light #ffa77a
accent-orange-lightest #ffdccc
accent-yellow #f6f431
accent-yellow-light #faf994
accent-yellow-lightest #fdfdd6
accent-teal #00edc8
accent-teal-light #79f6e2
accent-green-light #7aec7a
product-fin #ff5600
product-helpdesk #0007cb
product-operator #441572
product-sales #055895
product-sales-accent #a3b3ff
product-ecom #2f6a5e
product-ecom-accent #e2f947
product-voice #5de071
product-voice-green #37b54a
border-soft #17100e0d
border-on-dark #ffffff33
success #1bb157
success-dark #128a40
warning #fbc916
warning-dark #6f5502
danger #fd3a57
danger-dark #b41d34
typography 4 changed
~ display {"family":"Saans","size":80} {"family":"Almaden Sans","size":80}
~ h1 {"family":"Saans","size":54} {"family":"Almaden Sans","size":40}
~ h2 {"family":"Saans","size":40} {"family":"Almaden Sans","size":32}
~ body {"family":"Saans","size":16} {"family":"Almaden Sans","size":16}
radius 2 changed
~ button 6px 8px
~ card 24px 12px
spacing identical
No differences.
↻ Swap direction · Zoom → Intercom