Diff

Honda vs Mux

41 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #e2e4dd

Text

#35363b → #000000

Brand

#cc0000 → #ff5d00

Border

#d8d8d8 → #000000

Display font

HondaGlobalFontEN-Regular → Rotonto

Body size

14px → 16px

colors 33 changed

~ bg #ffffff → #e2e4dd

~ surface #f7f7f7 → #d4d6cf

~ surface-strong #e0e0e0 → #c8caBF

~ text #35363b → #000000

~ text-strong #1a1a1a → #000000

~ text-body #35363b → #1a1a1a

~ text-muted #666666 → #5a5a5a

~ text-faint #999999 → #8a8a8a

~ text-on-dark #ffffff → #e2e4dd

~ brand #cc0000 → #ff5d00

~ brand-hover #b30000 → #e54e00

~ brand-active #990000 → #c54100

~ brand-soft #fceaea → #ffe5d4

~ on-brand #ffffff → #000000

~ accent-blue #0066cc → #0066ff

~ border #d8d8d8 → #000000

~ border-soft #ebebeb → #a0a29a

~ link #cc0000 → #000000

~ link-hover #990000 → #ff5d00

~ ring #cc0000 → #ff5d00

~ success #00854a → #00b364

~ danger #cc0000 → #e6483d

~ info #0066cc → #0066ff

+ bg-paper #ffffff

+ bg-dark-soft #1a1a1a

+ surface-soft #ecebe7

+ accent-green #00b364

− bg-elevated #f7f7f7

− surface-hover #ededed

− text-display #000000

− brand-deep #7a0000

− accent-yellow #ffd200

− border-strong #999999

typography 5 changed

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

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

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

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

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

radius identical

No differences.

spacing 3 changed

~ md 16px → 24px

~ lg 32px → 64px

~ xl 48px → 128px

↻ Swap direction · Mux → Honda