Diff

Honda vs Porsche

40 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#35363b → #000000

Brand

#cc0000 → #d5001c

Border

#d8d8d8 → #d8d8d8

Display font

HondaGlobalFontEN-Regular → Porsche Next

Body size

14px → 16px

colors 31 changed

~ bg-elevated #f7f7f7 → #fbfcff

~ surface #f7f7f7 → #f4f4f4

~ surface-hover #ededed → #ececec

~ surface-strong #e0e0e0 → #d8d8d8

~ text #35363b → #000000

~ text-body #35363b → #313639

~ text-muted #666666 → #626669

~ text-faint #999999 → #909294

~ text-on-dark #ffffff → #fbfcff

~ brand #cc0000 → #d5001c

~ brand-hover #b30000 → #bd0017

~ brand-active #990000 → #a00012

~ brand-soft #fceaea → #fdebec

~ accent-blue #0066cc → #0061ff

~ border-soft #ebebeb → #e8e8e8

~ border-strong #999999 → #909294

~ border-on-dark #2a2a2a → #313639

~ link #cc0000 → #000000

~ link-hover #990000 → #d5001c

~ ring #cc0000 → #000000

~ success #00854a → #5cad4a

~ warning #ff8c00 → #e0801c

~ danger #cc0000 → #d5001c

~ info #0066cc → #0061ff

+ text-disabled #a8aaab

+ accent-gold #c9a55c

+ ring-on-dark #ffffff

− text-strong #1a1a1a

− text-display #000000

− brand-deep #7a0000

− accent-yellow #ffd200

typography 5 changed

~ display {"family":"HondaGlobalFontEN-Regular","size":72} → {"family":"Porsche Next","size":72}

~ h1 {"family":"HondaGlobalFontEN-Regular","size":40} → {"family":"Porsche Next","size":40}

~ h2 {"family":"HondaGlobalFontEN-Regular","size":32} → {"family":"Porsche Next","size":32}

~ body {"family":"HondaGlobalFontEN-Regular","size":14} → {"family":"Porsche Next","size":16}

~ label {"family":"JetBrains Mono","size":11} → {"family":"Monaco","size":11}

radius 2 changed

~ button 6px → 8px

~ card 8px → 12px

spacing 2 changed

~ lg 32px → 40px

~ xl 48px → 64px

↻ Swap direction · Porsche → Honda