Diff

GitHub vs Wikipedia

64 token-level differences between these two design systems.

Role tokens
Background
#0d1117 #ffffff
Text
#f0f6fc #202122
Brand
#5fed83 #3366cc
Border
#353d37 #a2a9b1
Display font
Mona Sans Linux Libertine
Body size
14px 14px
colors 52 changed
~ bg #0d1117 #ffffff
~ bg-soft #0f1511 #f8f9fa
~ surface #0f1511 #ffffff
~ surface-soft #161b22 #f8f9fa
~ surface-strong #21262d #eaecf0
~ text #f0f6fc #202122
~ text-strong #ffffff #101114
~ text-soft #a4aea6 #72777d
~ text-muted #7d8590 #54595d
~ text-faint #484f58 #a2a9b1
~ brand #5fed83 #3366cc
~ on-brand #000000 #ffffff
~ link #79c0ff #3366cc
~ link-hover #a5d6ff #447ff5
~ border #353d37 #a2a9b1
~ border-soft #21262d #eaecf0
~ border-strong #484f58 #54595d
+ bg-warm #fefefe
+ brand-hover #2a4b91
+ brand-pressed #1f3870
+ brand-deep #162d56
+ brand-tint #dde6f0
+ text-on-brand #ffffff
+ link-visited #795cb2
+ link-red #dd3333
+ selected-bg #dde6f0
+ border-brand #3366cc
+ infobox-header #eaecf0
+ citation-needed-orange #cc6633
+ stub-template #cee0f5
+ success #14866d
+ warning #fc3
+ danger #dd3333
+ info #3366cc
bg-elev #191f1b
brand-emphasis #08872b
brand-soft rgba(95, 237, 131, 0.15)
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":"Linux Libertine","size":48}
~ h1 {"family":"Mona Sans","size":48} {"family":"Linux Libertine","size":28}
~ h2 {"family":"Mona Sans","size":40} {"family":"Linux Libertine","size":22}
~ body {"family":"Mona Sans","size":14} {"family":"Linux Libertine","size":14}
~ label {"family":"Mona Sans Mono","size":11} {"family":"Inconsolata","size":12}
radius 2 changed
~ button 8px 4px
~ card 24px 14px
spacing 5 changed
~ xs 4px 0px
~ sm 8px 4px
~ md 16px 12px
~ lg 32px 24px
~ xl 64px 40px
↻ Swap direction · Wikipedia → GitHub