Diff

HeyGen vs Zed

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #f5f5f3
Text
#171717 #393d45
Brand
#00c3ff #004edb
Border
#0000001a #e2e2de
Display font
ABC Solar Display IBM Plex Serif
Body size
16px 16px
colors 54 changed
~ bg #ffffff #f5f5f3
~ text #171717 #393d45
~ brand #00c3ff #004edb
~ brand-hover #00abe0 #003fb5
~ brand-soft #cdf2ff rgba(0,78,219,0.08)
~ on-brand #000000 #ffffff
~ link #0094c2 #004edb
~ link-hover #007ba3 #003fb5
~ border #0000001a #e2e2de
~ border-strong #00000026 #d4d4ce
+ bg-100 #ffffff
+ bg-200 #eeede9
+ bg-300 #e7e6e1
+ surface-card #ffffff
+ surface-code #1a1b1e
+ text-200 #5a5e66
+ text-300 #6b6f78
+ text-400 #86888f
+ text-strong #16181d
+ cta-secondary-bg #ffffff
+ cta-secondary-text #16181d
+ border-focus #004edb
+ code-bg #1a1b1e
+ code-text #e6e6e3
+ semantic-success #2e7d32
+ semantic-warning #b54708
+ semantic-danger #c01919
+ semantic-info #004edb
bg-soft #fafafa
bg-tertiary #f4f4f5
surface #ffffff
surface-tint #f0fbff
text-display #333333
text-secondary #3f3f46
text-soft #52525b
text-faint #71717a
text-muted #a1a1aa
brand-active #0094c2
brand-tint #e6f9ff
accent-black #000000
on-accent-black #ffffff
accent-cyan-deep #0094c2
selected-bg #e6f9ff
disabled #a1a1aa
border-subtle #00000010
border-brand rgba(0, 195, 255, 0.40)
success-bg #dcfce7
success-text #166534
warning-bg #fef3c7
warning-text #92400e
danger-bg #fee2e2
danger-text #b91c1c
info-bg #e6f9ff
info-text #0094c2
typography 5 changed
~ display {"family":"ABC Solar Display","size":80} {"family":"IBM Plex Serif","size":72}
~ h1 {"family":"ABC Solar Display","size":80} {"family":"IBM Plex Serif","size":48}
~ h2 {"family":"ABC Solar Display","size":56} {"family":"IBM Plex Serif","size":36}
~ body {"family":"TT Norms Pro","size":16} {"family":"writer","size":16}
~ label {"family":"SFMono-Regular","size":13} {"family":"writer-mono","size":13}
radius 2 changed
~ button 8px 6px
~ card 12px 8px
spacing identical
No differences.
↻ Swap direction · Zed → HeyGen