Diff

Discord vs The New York Times

75 token-level differences between these two design systems.

Role tokens
Background
#5865f2 #ffffff
Text
#ffffff #121212
Brand
#5865f2 #121212
Border
rgba(255,255,255,0.10) #dfdfdf
Display font
ABC Ginto Nord Discord NYT Cheltenham
Body size
16px 18px
colors 68 changed
~ bg #5865f2 #ffffff
~ surface-soft #f6f6f6 #f7f7f7
~ text #ffffff #121212
~ text-strong #ffffff #000000
~ text-soft rgba(255,255,255,0.72) #727272
~ text-faint rgba(255,255,255,0.40) #999999
~ brand #5865f2 #121212
~ link #00b0f4 #326891
~ link-hover #33c2f7 #1a4972
~ border rgba(255,255,255,0.10) #dfdfdf
~ border-soft rgba(255,255,255,0.06) #ebebeb
~ border-strong rgba(255,255,255,0.18) #9a9a9a
~ shadow-card rgba(0,0,0,0.15) rgba(0,0,0,0.04)
~ shadow-modal rgba(0,0,0,0.40) rgba(0,0,0,0.18)
+ bg-section #f7f7f5
+ bg-dark #121212
+ surface-strong #ededed
+ surface-quote #fbf6e9
+ text-muted #5a5a5a
+ brand-red #d0021b
+ brand-red-hover #a8001a
+ brand-red-soft #ffe5e8
+ link-visited #5a5a5a
+ on-brand-red #ffffff
+ on-ink #ffffff
+ border-rule #121212
+ shadow-elev rgba(0,0,0,0.08)
+ scrim rgba(0,0,0,0.5)
+ success #1a7f37
+ success-soft #e7f4ec
+ warning #b27c00
+ warning-soft #fbf3e0
+ danger #d0021b
+ danger-soft #ffe5e8
+ info #326891
+ info-soft #e7eef5
+ live-red #d0021b
+ live-pulse #ff334b
+ cooking-orange #cc4b00
+ games-blue #6493b0
+ wirecutter-yellow #ffd400
bg-deep #1a2081
bg-pink #ed7395
bg-aubergine #1a1b3a
surface-card #fafafa
surface-elev #23272a
text-on-light #23272a
text-on-light-muted #4f5660
text-disabled rgba(255,255,255,0.24)
brand-100 #e7e9fd
brand-200 #c8ccfa
brand-300 #a4abf7
brand-400 #7983f5
brand-500 #5865f2
brand-600 #404eed
brand-700 #3641cc
brand-800 #28339e
brand-900 #1a2081
on-brand #ffffff
focus #00b0f4
green-bright #23a55a
yellow-bright #f0b232
red-bright #f23f43
border-light rgba(0,0,0,0.08)
semantic-success #23a55a
semantic-warning #f0b232
semantic-danger #f23f43
semantic-info #00b0f4
typography 5 changed
~ display {"family":"ABC Ginto Nord Discord","size":88} {"family":"NYT Cheltenham","size":72}
~ h1 {"family":"ABC Ginto Nord Discord","size":44} {"family":"NYT Cheltenham","size":30}
~ h2 {"family":"ABC Ginto Nord Discord","size":32} {"family":"NYT Cheltenham","size":24}
~ body {"family":"gg sans","size":16} {"family":"NYT Imperial","size":18}
~ label {"family":"JetBrains Mono","size":11} {"family":"NYT Karnak Condensed","size":11}
radius 2 changed
~ button 12px 4px
~ card 16px 14px
spacing identical
No differences.
↻ Swap direction · The New York Times → Discord