Diff

BBC News vs Suno

81 token-level differences between these two design systems.

Role tokens
Background
#ffffff #101012
Text
#202224 #f7f4ef
Brand
#bb1919 #fd429c
Border
#dcdcdc rgba(255, 255, 255, 0.10)
Display font
BBC Reith Sans Neue Montreal
Body size
18px 16px
colors 69 changed
~ bg #ffffff #101012
~ surface #ffffff #1c1c1f
~ surface-soft #f6f6f6 rgba(255, 255, 255, 0.05)
~ surface-strong #e8e8e8 rgba(255, 255, 255, 0.08)
~ text #202224 #f7f4ef
~ text-strong #000000 #ffffff
~ text-muted #5a5d61 #c2c2c1
~ text-soft #7a7d81 #a3a3a3
~ text-faint #a3a6aa #737373
~ brand #bb1919 #fd429c
~ brand-soft #fadcdc rgba(253, 66, 156, 0.15)
~ brand-deep #5a0d0d #e02f8a
~ link #bb1919 #f7f4ef
~ link-hover #a31515 #fd429c
~ border #dcdcdc rgba(255, 255, 255, 0.10)
~ border-strong #999999 rgba(255, 255, 255, 0.18)
+ bg-alt #1c1c1f
+ surface-translucent rgba(28, 28, 31, 0.60)
+ surface-iced #fcfbf9
+ surface-paper #f7f4ef
+ text-medium #e0ddd6
+ text-paper #101012
+ accent-cobalt #3860be
+ accent-deep #27455c
+ accent-amber #f5a623
+ selected-bg rgba(253, 66, 156, 0.15)
+ disabled #737373
+ border-subtle rgba(255, 255, 255, 0.05)
+ border-pink rgba(253, 66, 156, 0.40)
+ success-bg rgba(34, 197, 94, 0.12)
+ success-text #86efac
+ warning-bg rgba(245, 166, 35, 0.12)
+ warning-text #fcd34d
+ danger-bg rgba(239, 68, 68, 0.12)
+ danger-text #fca5a5
+ info-bg rgba(56, 96, 190, 0.15)
+ info-text #93b8ee
bg-section #ffffff
bg-dark #202224
bg-darkest #0d0d0d
surface-quote #fbe6e6
surface-red-tint #fce8e8
text-on-red #ffffff
text-on-dark #ffffff
brand-hover #a31515
brand-active #8b1212
brand-block #bb1919
link-visited #5a5d61
on-dark #ffffff
border-soft #f0f0f0
border-rule #202224
border-red #bb1919
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 #2ea44f
success-soft #dff0e7
warning #cc7a00
warning-soft #fde9cc
danger #bb1919
danger-soft #fadcdc
info #0066b8
info-soft #cfe7f5
breaking-red #bb1919
live-red #bb1919
bbc-iplayer #ffd000
bbc-sounds #ff4f00
bbc-sport #ffd000
typography 5 changed
~ display {"family":"BBC Reith Sans","size":72} {"family":"Neue Montreal","size":96}
~ h1 {"family":"BBC Reith Sans","size":28} {"family":"Neue Montreal","size":56}
~ h2 {"family":"BBC Reith Sans","size":22} {"family":"Neue Montreal","size":48}
~ body {"family":"BBC Reith Sans","size":18} {"family":"Neue Montreal","size":16}
~ label {"family":"BBC Reith Mono","size":11} {"family":"SFMono-Regular","size":12}
radius 2 changed
~ button 4px 8px
~ card 8px 20px
spacing 5 changed
~ xs 2px 1px
~ sm 4px 2px
~ md 12px 6px
~ lg 24px 12px
~ xl 40px 20px
↻ Swap direction · Suno → BBC News