Diff

Semafor vs Zoom

90 token-level differences between these two design systems.

Role tokens
Background
#f8f5d7 #ffffff
Text
#1f1d1a #000000
Brand
#3a6d78 #0b5cff
Border
#d8d0a8 #d6d8df
Display font
FeatureFlatHeadline Almaden Sans
Body size
18px 16px
colors 80 changed
~ bg #f8f5d7 #ffffff
~ surface #f8f5d7 #ffffff
~ text #1f1d1a #000000
~ text-muted #5a5651 #67677e
~ text-soft #7a756f #3d3d50
~ text-faint #a39e96 #9595a8
~ brand #3a6d78 #0b5cff
~ brand-soft #cce0e4 #eef4ff
~ brand-deep #1a3a44 #0846cc
~ link #3a6d78 #0b5cff
~ link-hover #2d5a64 #0846cc
~ border #d8d0a8 #d6d8df
~ border-strong #7a756f #a8acb8
+ bg-soft #f8f9fa
+ bg-blue-soft #eef4ff
+ bg-blue-deep #0b1739
+ surface-elev #fafbfc
+ text-medium #232333
+ text-disabled #c4c4cf
+ text-on-deep #ffffff
+ brand-bright #2872ff
+ brand-tint #b3ccff
+ accent-violet #7b61ff
+ accent-violet-soft #f0ecff
+ accent-cyan #00b6f0
+ accent-cyan-soft #e0f6fd
+ accent-orange #ff7a59
+ accent-orange-soft #fff0eb
+ accent-green #3ec78f
+ selected-bg #eef4ff
+ disabled #c4c4cf
+ border-subtle #eceef2
+ border-brand rgba(11, 92, 255, 0.30)
+ success-bg #e3f6ed
+ success-text #16794e
+ warning-bg #fff4e0
+ warning-text #7a5400
+ danger-bg #fde6ea
+ danger-text #a51c30
+ info-bg #eef4ff
+ info-text #0846cc
bg-section #f8f5d7
bg-section-flagship #f8f5d7
bg-section-africa #f8f5d7
bg-dark #1f1d1a
bg-darkest #0d0c0a
surface-paper #ffffff
surface-soft #f5f1c9
surface-strong #e8e3b5
surface-quote #fefbe8
surface-card-elevated #fcfae0
text-on-teal #ffffff
text-on-dark #f8f5d7
brand-hover #2d5a64
brand-active #1f4750
link-visited #7a756f
on-dark #f8f5d7
border-soft #e8e2c2
border-rule #1f1d1a
border-teal #3a6d78
shadow-card rgba(31,29,26,0.06)
shadow-elev rgba(31,29,26,0.1)
shadow-modal rgba(31,29,26,0.3)
scrim rgba(31,29,26,0.6)
success #2a8a4f
success-soft #dff0e7
warning #cc7a00
warning-soft #fde9cc
danger #a62d2d
danger-soft #f0d4d4
info #3a6d78
info-soft #cce0e4
flag-flagship #3a6d78
flag-africa #c46b3a
flag-principals #3a6d78
flag-net-zero #2a8a4f
flag-tech #5a4a8a
flag-business #3a6d78
flag-media #a62d2d
flag-gulf #c46b3a
typography 5 changed
~ display {"family":"FeatureFlatHeadline","size":72} {"family":"Almaden Sans","size":80}
~ h1 {"family":"FeatureFlatHeadline","size":28} {"family":"Almaden Sans","size":40}
~ h2 {"family":"FeatureFlatHeadline","size":22} {"family":"Almaden Sans","size":32}
~ body {"family":"FeatureFlatText","size":18} {"family":"Almaden Sans","size":16}
~ label {"family":"Courier New","size":11} {"family":"SFMono-Regular","size":13}
radius 2 changed
~ button 4px 8px
~ card 6px 12px
spacing 3 changed
~ xs 2px 0px
~ lg 24px 32px
~ xl 40px 64px
↻ Swap direction · Zoom → Semafor