Diff

Axios vs BBC News

46 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#333335 #202224
Brand
#0044a5 #bb1919
Border
#e0e0e0 #dcdcdc
Display font
Atiza BBC Reith Sans
Body size
18px 18px
colors 40 changed
~ bg-dark #1a1a1a #202224
~ bg-darkest #000000 #0d0d0d
~ surface-soft #f5f5f5 #f6f6f6
~ surface-quote #f0f4fb #fbe6e6
~ text #333335 #202224
~ text-muted #666668 #5a5d61
~ text-soft #888889 #7a7d81
~ text-faint #aaaab0 #a3a6aa
~ brand #0044a5 #bb1919
~ brand-hover #003a8c #a31515
~ brand-active #002e72 #8b1212
~ brand-soft #cfdaef #fadcdc
~ brand-deep #001f4d #5a0d0d
~ link #0044a5 #bb1919
~ link-hover #003a8c #a31515
~ link-visited #666668 #5a5d61
~ border #e0e0e0 #dcdcdc
~ border-rule #000000 #202224
~ success #2a8a4f #2ea44f
~ danger #d6062b #bb1919
~ danger-soft #fbd6dc #fadcdc
~ info #0044a5 #0066b8
~ info-soft #cfdaef #cfe7f5
+ surface-red-tint #fce8e8
+ text-on-red #ffffff
+ brand-block #bb1919
+ border-red #bb1919
+ breaking-red #bb1919
+ live-red #bb1919
+ bbc-iplayer #ffd000
+ bbc-sounds #ff4f00
+ bbc-sport #ffd000
bg-section-newsletter #fafafa
surface-blue-tint #e6eef9
text-on-blue #ffffff
brand-secondary #d6062b
border-blue #0044a5
time-bar #000000
time-bar-bg #f5f5f5
newsletter-banner #0044a5
typography 5 changed
~ display {"family":"Atiza","size":72} {"family":"BBC Reith Sans","size":72}
~ h1 {"family":"Atiza","size":26} {"family":"BBC Reith Sans","size":28}
~ h2 {"family":"Atiza","size":22} {"family":"BBC Reith Sans","size":22}
~ body {"family":"Atiza","size":18} {"family":"BBC Reith Sans","size":18}
~ label {"family":"NB International Pro Mono","size":11} {"family":"BBC Reith Mono","size":11}
radius 1 changed
~ card 6px 8px
spacing identical
No differences.
↻ Swap direction · BBC News → Axios