Diff

Porsche vs GitHub Copilot

57 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #1f2328
Brand
#d5001c #000000
Border
#d8d8d8 #d0d7de
Display font
Porsche Next Mona Sans
Body size
16px 18px
colors 52 changed
~ surface #f4f4f4 #f6f8fa
~ surface-strong #d8d8d8 #eaeef2
~ surface-on-dark #1a1a1a #161b22
~ text #000000 #1f2328
~ text-on-dark #fbfcff #f0f6fc
~ text-muted #626669 #59636e
~ brand #d5001c #000000
~ brand-hover #bd0017 #1f2328
~ brand-active #a00012 #3d444d
~ border #d8d8d8 #d0d7de
~ border-strong #909294 #afb8c1
~ border-on-dark #313639 #3d444d
~ success #5cad4a #1a7f37
~ warning #e0801c #9a6700
~ danger #d5001c #cf222e
+ bg-inverse #0d1117
+ bg-overlay #ffffffee
+ surface-strong-on-dark #21262d
+ text-strong #000000
+ text-subtle #6e7781
+ text-on-dark-muted #9198a1
+ 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-muted #d8dee4
+ scrim rgba(140,149,159,0.15)
+ shadow-small rgba(31,35,40,0.04)
+ shadow-medium rgba(31,35,40,0.08)
+ shadow-large rgba(31,35,40,0.12)
bg-dark #000000
bg-elevated #fbfcff
surface-hover #ececec
text-body #313639
text-faint #909294
text-disabled #a8aaab
brand-soft #fdebec
accent-gold #c9a55c
accent-blue #0061ff
border-soft #e8e8e8
link #000000
link-hover #d5001c
ring #000000
ring-on-dark #ffffff
info #0061ff
typography 5 changed
~ display {"family":"Porsche Next","size":72} {"family":"Mona Sans","size":96}
~ h1 {"family":"Porsche Next","size":40} {"family":"Mona Sans","size":64}
~ h2 {"family":"Porsche Next","size":32} {"family":"Mona Sans","size":56}
~ body {"family":"Porsche Next","size":16} {"family":"Mona Sans","size":18}
~ label {"family":"Monaco","size":11} {"family":"MonaspiceNe","size":12}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · GitHub Copilot → Porsche