Diff

Are.na vs Zed

63 token-level differences between these two design systems.

Role tokens
Background
#fafafa #f5f5f3
Text
#000000 #393d45
Brand
#ff6600 #004edb
Border
#dddddd #e2e2de
Display font
Inter IBM Plex Serif
Body size
14px 16px
colors 50 changed
~ bg #fafafa #f5f5f3
~ text #000000 #393d45
~ text-strong #000000 #16181d
~ brand #ff6600 #004edb
~ brand-hover #e85a00 #003fb5
~ brand-soft #fff1e6 rgba(0,78,219,0.08)
~ link #ff6600 #004edb
~ border #dddddd #e2e2de
~ border-strong #999999 #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
+ cta-secondary-bg #ffffff
+ cta-secondary-text #16181d
+ link-hover #003fb5
+ border-focus #004edb
+ code-bg #1a1b1e
+ code-text #e6e6e3
+ semantic-success #2e7d32
+ semantic-warning #b54708
+ semantic-danger #c01919
+ semantic-info #004edb
bg-alt #ffffff
bg-warm #f6f5f3
surface #f1f1f1
surface-hover #e8e8e8
surface-deep #e0e0e0
surface-block #ffffff
text-display #000000
text-muted #666666
text-soft #999999
text-faint #bbbbbb
text-on-brand #ffffff
brand-active #cc4f00
brand-faint #fff8f1
link-visited #cc4f00
border-soft #eeeeee
success #2d6a4f
success-bg #e8f0eb
warning #7a5300
warning-bg #f5ebd6
danger #8b1a1a
danger-bg #f3e0e0
info #666666
info-bg #f1f1f1
typography 5 changed
~ display {"family":"Inter","size":40} {"family":"IBM Plex Serif","size":72}
~ h1 {"family":"Inter","size":32} {"family":"IBM Plex Serif","size":48}
~ h2 {"family":"Inter","size":24} {"family":"IBM Plex Serif","size":36}
~ body {"family":"Inter","size":14} {"family":"writer","size":16}
~ label {"family":"JetBrains Mono","size":12} {"family":"writer-mono","size":13}
radius 3 changed
~ button 0px 6px
~ card 0px 8px
~ pill 0px 9999px
spacing 5 changed
~ xs 1px 0px
~ sm 2px 4px
~ md 6px 12px
~ lg 12px 32px
~ xl 20px 64px
↻ Swap direction · Zed → Are.na