Diff

GitHub Copilot vs WIRED

61 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#1f2328 #1a1a1a
Brand
#000000 #000000
Border
#d0d7de rgba(0,0,0,0.08)
Display font
Mona Sans WiredDisplay
Body size
18px 16px
colors 49 changed
~ surface #f6f8fa #ffffff
~ text #1f2328 #1a1a1a
~ text-muted #59636e #757575
~ text-on-dark #f0f6fc #ffffff
~ success #1a7f37 #0e7c5b
~ warning #9a6700 #a35316
~ danger #cf222e #e53e3e
~ border-strong #afb8c1 #000000
~ border-on-dark #3d444d #4a5568
~ scrim rgba(140,149,159,0.15) rgba(0,0,0,0.6)
+ bg-dark #1a1a1a
+ surface-dark #1a1a1a
+ brand-deep #000000
+ brand-accent #057dbc
+ text-headline #1a1a1a
+ text-disabled #999999
+ link #1a1a1a
+ link-hover #057dbc
+ link-visited #5e2a8c
+ border-hairline #e2e8f0
+ border-rule #000000
+ shadow-token transparent
+ info #057dbc
+ cookie-red #e53e3e
bg-inverse #0d1117
bg-overlay #ffffffee
surface-strong #eaeef2
surface-on-dark #161b22
surface-strong-on-dark #21262d
text-subtle #6e7781
text-on-dark-muted #9198a1
brand-hover #1f2328
brand-active #3d444d
brand-on-dark #ffffff
brand-on-dark-hover #f0f6fc
accent #0969da
accent-hover #0550ae
accent-soft #ddf4ff
accent-emphasis #0969da
accent-on-dark #4493f8
success-soft #dafbe1
warning-soft #fff8c5
danger-soft #ffebe9
done #8250df
border #d0d7de
border-muted #d8dee4
shadow-small rgba(31,35,40,0.04)
shadow-medium rgba(31,35,40,0.08)
shadow-large rgba(31,35,40,0.12)
typography 5 changed
~ display {"family":"Mona Sans","size":96} {"family":"WiredDisplay","size":64}
~ h1 {"family":"Mona Sans","size":64} {"family":"WiredDisplay","size":40}
~ h2 {"family":"Mona Sans","size":56} {"family":"WiredDisplay","size":32}
~ body {"family":"Mona Sans","size":18} {"family":"BreveText","size":16}
~ label {"family":"MonaspiceNe","size":12} {"family":"WiredMono","size":11}
radius 2 changed
~ button 8px 0px
~ card 12px 0px
spacing 5 changed
~ xs 4px 1px
~ sm 8px 4px
~ md 16px 12px
~ lg 40px 32px
~ xl 64px 48px
↻ Swap direction · WIRED → GitHub Copilot