Diff

Datadog vs Porsche

60 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#212529 #000000
Brand
#632ca6 #d5001c
Border
#e5e7eb #d8d8d8
Display font
NationalWeb Porsche Next
Body size
16px 16px
colors 48 changed
~ surface #eef1f5 #f4f4f4
~ surface-hover #e2e6eb #ececec
~ surface-strong #dde1e7 #d8d8d8
~ bg-dark #262626 #000000
~ text #212529 #000000
~ text-muted #555555 #626669
~ text-faint #9ca3af #909294
~ text-on-dark #f3f4f6 #fbfcff
~ brand #632ca6 #d5001c
~ brand-hover #52248a #bd0017
~ brand-soft #f0e8fa #fdebec
~ link #632ca6 #000000
~ link-hover #52248a #d5001c
~ border #e5e7eb #d8d8d8
~ border-soft #f0f0f0 #e8e8e8
~ border-strong #cbd5e0 #909294
~ success #16a34a #5cad4a
~ warning #f59f3a #e0801c
~ danger #dc2626 #d5001c
~ info #3b6ec7 #0061ff
+ bg-elevated #fbfcff
+ surface-on-dark #1a1a1a
+ text-body #313639
+ text-disabled #a8aaab
+ brand-active #a00012
+ accent-gold #c9a55c
+ accent-blue #0061ff
+ border-on-dark #313639
+ ring #000000
+ ring-on-dark #ffffff
bg-soft #f7f7f7
bg-cool #f4f5f7
bg-deep #1a1a1a
bg-darker #0c0c0c
text-strong #0c0c0c
text-soft #6b7280
text-on-dark-muted #a1a1aa
brand-deep #411a6e
brand-tint rgba(99, 44, 166, 0.10)
chart-purple #632ca6
chart-blue #3b6ec7
chart-teal #1aa1b6
chart-green #3eb049
chart-yellow #f1c40f
chart-orange #f59f3a
chart-red #e74c3c
chart-pink #d65297
border-dark rgba(255,255,255,0.10)
typography 5 changed
~ display {"family":"NationalWeb","size":68} {"family":"Porsche Next","size":72}
~ h1 {"family":"NationalWeb","size":48} {"family":"Porsche Next","size":40}
~ h2 {"family":"NationalWeb","size":36} {"family":"Porsche Next","size":32}
~ body {"family":"NationalWeb","size":16} {"family":"Porsche Next","size":16}
~ label {"family":"Monaco","size":13} {"family":"Monaco","size":11}
radius 2 changed
~ button 6px 8px
~ card 8px 12px
spacing 5 changed
~ xs 2px 4px
~ sm 4px 8px
~ md 8px 16px
~ lg 20px 40px
~ xl 32px 64px
↻ Swap direction · Porsche → Datadog