Diff

Wikipedia vs Phantom

47 token-level differences between these two design systems.

Role tokens
Background
#ffffff #0c0c0e
Text
#202122 #ffffff
Brand
#3366cc #ab9ff2
Border
#a2a9b1 rgba(255, 255, 255, 0.08)
Display font
Linux Libertine Phantom Sans
Body size
14px 15px
colors 40 changed
~ bg #ffffff #0c0c0e
~ surface #ffffff #15151a
~ surface-strong #eaecf0 #22222a
~ brand #3366cc #ab9ff2
~ brand-hover #2a4b91 #bdb3f6
~ brand-pressed #1f3870 #9b8ee8
~ brand-deep #162d56 #534bb1
~ brand-tint #dde6f0 rgba(171, 159, 242, 0.15)
~ on-brand #ffffff #0c0c0e
~ text #202122 #ffffff
~ text-strong #101114 #ffffff
~ text-muted #54595d #a8a8b8
~ text-soft #72777d #7a7a8c
~ text-faint #a2a9b1 #5a5a6c
~ text-on-brand #ffffff #0c0c0e
~ link #3366cc #ab9ff2
~ link-hover #447ff5 #ffffff
~ selected-bg #dde6f0 rgba(171, 159, 242, 0.15)
~ border #a2a9b1 rgba(255, 255, 255, 0.08)
~ border-strong #54595d rgba(255, 255, 255, 0.16)
~ border-brand #3366cc #ab9ff2
~ success #14866d #5dd4a8
~ warning #fc3 #f5c842
~ danger #dd3333 #ff6b6b
~ info #3366cc #ab9ff2
+ bg-deep #06060a
+ bg-section #15151a
+ bg-elev #1f1f25
+ surface-translucent rgba(12, 12, 14, 0.85)
+ brand-deeper #3d3686
+ ghost-glow #ab9ff2
bg-soft #f8f9fa
bg-warm #fefefe
surface-soft #f8f9fa
link-visited #795cb2
link-red #dd3333
border-soft #eaecf0
infobox-header #eaecf0
citation-needed-orange #cc6633
stub-template #cee0f5
typography 5 changed
~ display {"family":"Linux Libertine","size":48} {"family":"Phantom Sans","size":88}
~ h1 {"family":"Linux Libertine","size":28} {"family":"Phantom Sans","size":40}
~ h2 {"family":"Linux Libertine","size":22} {"family":"Phantom Sans","size":32}
~ body {"family":"Linux Libertine","size":14} {"family":"Phantom Sans","size":15}
~ label {"family":"Inconsolata","size":12} {"family":"JetBrains Mono","size":12}
radius 2 changed
~ button 4px 8px
~ card 14px 12px
spacing identical
No differences.
↻ Swap direction · Phantom → Wikipedia