Diff

Mux vs Honda

41 token-level differences between these two design systems.

Role tokens

Background

#e2e4dd → #ffffff

Text

#000000 → #35363b

Brand

#ff5d00 → #cc0000

Border

#000000 → #d8d8d8

Display font

Rotonto → HondaGlobalFontEN-Regular

Body size

16px → 14px

colors 33 changed

~ bg #e2e4dd → #ffffff

~ surface #d4d6cf → #f7f7f7

~ surface-strong #c8caBF → #e0e0e0

~ text #000000 → #35363b

~ text-strong #000000 → #1a1a1a

~ text-body #1a1a1a → #35363b

~ text-muted #5a5a5a → #666666

~ text-faint #8a8a8a → #999999

~ text-on-dark #e2e4dd → #ffffff

~ brand #ff5d00 → #cc0000

~ brand-hover #e54e00 → #b30000

~ brand-active #c54100 → #990000

~ brand-soft #ffe5d4 → #fceaea

~ on-brand #000000 → #ffffff

~ accent-blue #0066ff → #0066cc

~ border #000000 → #d8d8d8

~ border-soft #a0a29a → #ebebeb

~ link #000000 → #cc0000

~ link-hover #ff5d00 → #990000

~ ring #ff5d00 → #cc0000

~ success #00b364 → #00854a

~ danger #e6483d → #cc0000

~ info #0066ff → #0066cc

+ bg-elevated #f7f7f7

+ surface-hover #ededed

+ text-display #000000

+ brand-deep #7a0000

+ accent-yellow #ffd200

+ border-strong #999999

− bg-paper #ffffff

− bg-dark-soft #1a1a1a

− surface-soft #ecebe7

− accent-green #00b364

typography 5 changed

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

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

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

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

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

radius identical

No differences.

spacing 3 changed

~ md 24px → 16px

~ lg 64px → 32px

~ xl 128px → 48px

↻ Swap direction · Honda → Mux