Diff

GitHub vs Amplitude

62 token-level differences between these two design systems.

Role tokens
Background
#0d1117 #ffffff
Text
#f0f6fc #565656
Brand
#5fed83 #1e61f0
Border
#353d37 #e3e6ea
Display font
Mona Sans IBM Plex Sans
Body size
14px 16px
colors 52 changed
~ bg #0d1117 #ffffff
~ bg-soft #0f1511 #f7f8f9
~ surface #0f1511 #ffffff
~ text #f0f6fc #565656
~ text-strong #ffffff #000000
~ text-soft #a4aea6 #8a8a8a
~ text-muted #7d8590 #6e6e6e
~ text-faint #484f58 #a8a8a8
~ brand #5fed83 #1e61f0
~ brand-soft rgba(95, 237, 131, 0.15) #eaf0fe
~ on-brand #000000 #ffffff
~ link #79c0ff #1e61f0
~ link-hover #a5d6ff #1850cf
~ border #353d37 #e3e6ea
~ border-soft #21262d #eef0f3
~ border-strong #484f58 #cfd4da
+ bg-cool #f2f4f7
+ surface-hover #f7f8f9
+ bg-dark #1a1f23
+ bg-deep #0c0e10
+ text-on-dark #ffffff
+ text-on-dark-muted #b4b8bc
+ brand-hover #1850cf
+ brand-deep #1543ad
+ brand-tint rgba(30, 97, 240, 0.10)
+ cta-black #000000
+ cta-black-hover #1a1f23
+ on-cta-black #ffffff
+ border-dark rgba(255,255,255,0.12)
+ success #1f9d57
+ warning #c77700
+ danger #d33b3b
+ info #1e61f0
bg-elev #191f1b
surface-soft #161b22
surface-strong #21262d
brand-emphasis #08872b
primary-cta-bg #ffffff
primary-cta-text #000000
primary-cta-hover #f0f6fc
bento-coral #ff6b6b
bento-lemon #ffd43b
bento-indigo #7c5cff
bento-pink #ff7eb6
bento-cyan #56d4dd
diff-add-bg rgba(46, 160, 67, 0.15)
diff-remove-bg rgba(248, 81, 73, 0.15)
semantic-success #3fb950
semantic-warning #d29922
semantic-danger #f85149
semantic-info #58a6ff
shadow-tint rgba(0, 0, 0, 0.5)
typography 5 changed
~ display {"family":"Mona Sans","size":64} {"family":"IBM Plex Sans","size":72}
~ h1 {"family":"Mona Sans","size":48} {"family":"IBM Plex Sans","size":60}
~ h2 {"family":"Mona Sans","size":40} {"family":"IBM Plex Sans","size":44}
~ body {"family":"Mona Sans","size":14} {"family":"IBM Plex Sans","size":16}
~ label {"family":"Mona Sans Mono","size":11} {"family":"IBM Plex Mono","size":13}
radius 2 changed
~ button 8px 6px
~ card 24px 8px
spacing 3 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
↻ Swap direction · Amplitude → GitHub