Diff

Porsche vs Honda

40 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#000000 → #35363b

Brand

#d5001c → #cc0000

Border

#d8d8d8 → #d8d8d8

Display font

Porsche Next → HondaGlobalFontEN-Regular

Body size

16px → 14px

colors 31 changed

~ bg-elevated #fbfcff → #f7f7f7

~ surface #f4f4f4 → #f7f7f7

~ surface-hover #ececec → #ededed

~ surface-strong #d8d8d8 → #e0e0e0

~ text #000000 → #35363b

~ text-on-dark #fbfcff → #ffffff

~ text-body #313639 → #35363b

~ text-muted #626669 → #666666

~ text-faint #909294 → #999999

~ brand #d5001c → #cc0000

~ brand-hover #bd0017 → #b30000

~ brand-active #a00012 → #990000

~ brand-soft #fdebec → #fceaea

~ accent-blue #0061ff → #0066cc

~ border-soft #e8e8e8 → #ebebeb

~ border-strong #909294 → #999999

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

~ link #000000 → #cc0000

~ link-hover #d5001c → #990000

~ ring #000000 → #cc0000

~ success #5cad4a → #00854a

~ warning #e0801c → #ff8c00

~ danger #d5001c → #cc0000

~ info #0061ff → #0066cc

+ text-strong #1a1a1a

+ text-display #000000

+ brand-deep #7a0000

+ accent-yellow #ffd200

− text-disabled #a8aaab

− accent-gold #c9a55c

− ring-on-dark #ffffff

typography 5 changed

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

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

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

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

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

radius 2 changed

~ button 8px → 6px

~ card 12px → 8px

spacing 2 changed

~ lg 40px → 32px

~ xl 64px → 48px

↻ Swap direction · Honda → Porsche