Diff

Mercury vs Reuters

82 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#101011 #1a1a1a
Brand
#5f6ad2 #ff8000
Border
#0000000f #e0e0e0
Display font
Tiempos Headline knowledge-medium
Body size
16px 18px
colors 75 changed
~ surface #f4f4f2 #ffffff
~ surface-soft #f8f8f6 #f5f5f5
~ text #101011 #1a1a1a
~ text-muted #5b5d5c #404040
~ text-soft #8a8c8b #666666
~ text-faint #b5b6b5 #999999
~ brand #5f6ad2 #ff8000
~ brand-hover #4a55b8 #e67000
~ brand-deep #3a4598 #a35200
~ brand-soft #e8eaff #ffe5cc
~ border #0000000f #e0e0e0
~ border-soft #0000000a #f0f0f0
~ border-strong #0000001f #999999
~ link #5f6ad2 #ff8000
~ link-hover #4a55b8 #e67000
~ on-brand #ffffff #000000
~ success #5e9678 #2ea44f
~ warning #c08a3a #cc7a00
~ danger #c4564f #cc1a1a
+ bg-section #ffffff
+ bg-section-business #ffffff
+ bg-section-markets #ffffff
+ bg-section-tech #ffffff
+ bg-dark #1a1a1a
+ bg-darkest #0d0d0d
+ surface-strong #e8e8e8
+ surface-quote #fff5e6
+ surface-orange-tint #fff2e0
+ text-on-orange #000000
+ text-on-dark #ffffff
+ brand-active #cc6300
+ brand-square #ff8000
+ link-visited #666666
+ link-on-dark #ff8000
+ on-dark #ffffff
+ border-rule #1a1a1a
+ border-orange #ff8000
+ shadow-card rgba(0,0,0,0.06)
+ shadow-elev rgba(0,0,0,0.1)
+ shadow-modal rgba(0,0,0,0.3)
+ scrim rgba(0,0,0,0.6)
+ success-soft #e1f1e7
+ warning-soft #fde9cc
+ danger-soft #fbe1e2
+ info #0066b8
+ info-soft #cfe7f5
+ market-up #2ea44f
+ market-down #cc1a1a
+ market-neutral #666666
+ breaking-red #cc1a1a
+ live-red #cc1a1a
bg-soft #fafafa
bg-mint #d3e8e0
bg-mint-soft #eef6f1
bg-ink #101011
bg-ink-soft #1a1a1c
surface-warm #f0f0ed
surface-on-ink #1a1a1c
surface-on-ink-elev #26262a
text-on-ink #fafafa
text-on-ink-muted #9a9a9a
text-on-mint #101011
brand-tint #f3f4ff
accent #d3e8e0
accent-strong #9bc5b3
accent-soft #eef6f1
accent-deep #76a692
border-on-ink #ffffff14
on-mint #101011
success-bg #e8f1ec
warning-bg #f7eed8
danger-bg #f7e3e0
shadow-soft rgba(0,0,0,0.03)
shadow-standard rgba(0,0,0,0.06)
shadow-elevated rgba(0,0,0,0.10)
typography 5 changed
~ display {"family":"Tiempos Headline","size":96} {"family":"knowledge-medium","size":72}
~ h1 {"family":"Tiempos Headline","size":72} {"family":"knowledge-medium","size":24}
~ h2 {"family":"Tiempos Headline","size":48} {"family":"knowledge-medium","size":20}
~ body {"family":"GT America","size":16} {"family":"knowledge-regular","size":18}
~ label {"family":"GT America Mono","size":12} {"family":"knowledge-mono","size":11}
radius 2 changed
~ button 6px 4px
~ card 10px 14px
spacing identical
No differences.
↻ Swap direction · Reuters → Mercury