Diff

Wikipedia vs Duolingo

56 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#202122 #4b4b4b
Brand
#3366cc #58cc02
Border
#a2a9b1 #e5e5e5
Display font
Linux Libertine din-round
Body size
14px 16px
colors 49 changed
~ bg-soft #f8f9fa #f7f7f7
~ bg-warm #fefefe #fff4dd
~ surface-soft #f8f9fa #fafafa
~ brand #3366cc #58cc02
~ brand-hover #2a4b91 #61e002
~ brand-pressed #1f3870 #46a302
~ brand-deep #162d56 #3a8c00
~ brand-tint #dde6f0 #d7ffb8
~ text #202122 #4b4b4b
~ text-strong #101114 #3c3c3c
~ text-muted #54595d #777777
~ text-soft #72777d #afafaf
~ text-faint #a2a9b1 #d4d4d4
~ border #a2a9b1 #e5e5e5
~ border-strong #54595d #d4d4d4
~ border-soft #eaecf0 #f0f0f0
~ border-brand #3366cc #58cc02
~ success #14866d #58cc02
~ warning #fc3 #ff9600
~ danger #dd3333 #ff4b4b
~ info #3366cc #1cb0f6
+ surface-tinted #f0fff0
+ text-link #1cb0f6
+ streak-orange #ff9600
+ streak-orange-deep #cc7700
+ heart-red #ff4b4b
+ heart-red-deep #e02e2e
+ xp-gold #ffc800
+ xp-gold-deep #cc9f00
+ super-purple #ce82ff
+ super-purple-deep #a560d4
+ macaw-blue #1cb0f6
+ macaw-blue-deep #0a8acf
+ shadow-button #46a302
+ shadow-card rgba(0, 0, 0, 0.08)
+ shadow-modal rgba(0, 0, 0, 0.16)
+ success-bg #d7ffb8
+ warning-bg #fff4dd
+ danger-bg #ffe5e5
+ info-bg #ddf4ff
surface-strong #eaecf0
link #3366cc
link-visited #795cb2
link-hover #447ff5
link-red #dd3333
selected-bg #dde6f0
infobox-header #eaecf0
citation-needed-orange #cc6633
stub-template #cee0f5
typography 5 changed
~ display {"family":"Linux Libertine","size":48} {"family":"din-round","size":88}
~ h1 {"family":"Linux Libertine","size":28} {"family":"din-round","size":40}
~ h2 {"family":"Linux Libertine","size":22} {"family":"din-round","size":32}
~ body {"family":"Linux Libertine","size":14} {"family":"Lexend Deca","size":16}
~ label {"family":"Inconsolata","size":12} {"family":"SFMono-Regular","size":14}
radius 2 changed
~ button 4px 12px
~ card 14px 24px
spacing identical
No differences.
↻ Swap direction · Duolingo → Wikipedia