Diff

Honda vs OpenSea

61 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #04111d

Text

#35363b → #ffffff

Brand

#cc0000 → #2081e2

Border

#d8d8d8 → #1f2937

Display font

HondaGlobalFontEN-Regular → Inter

Body size

14px → 14px

colors 53 changed

~ bg #ffffff → #04111d

~ text #35363b → #ffffff

~ text-body #35363b → #c5cdd6

~ text-muted #666666 → #8a939b

~ brand #cc0000 → #2081e2

~ brand-hover #b30000 → #1868b7

~ brand-active #990000 → #1259a0

~ brand-soft #fceaea → #2081e21a

~ border #d8d8d8 → #1f2937

~ border-soft #ebebeb → #151b25

~ border-strong #999999 → #2c3a4d

~ link #cc0000 → #2081e2

~ link-hover #990000 → #5fa3eb

+ bg-elev-1 #0d1721

+ bg-elev-2 #1b2730

+ bg-elev-3 #252f3e

+ surface-card #0d1721

+ surface-card-hover #1b2730

+ text-subtle #707a83

+ text-on-light #04111d

+ brand-glow rgba(32,129,226,0.40)

+ semantic-up #34c77b

+ semantic-up-soft #34c77b1a

+ semantic-down #eb5757

+ semantic-down-soft #eb57571a

+ semantic-warning #f5a623

+ semantic-info #2081e2

+ verified-blue #2081e2

+ category-art #bf60d5

+ category-gaming #34c77b

+ category-music #f5a623

+ rare-gold #fbbf24

+ focus-ring rgba(32,129,226,0.40)

+ scrim rgba(4,17,29,0.70)

− bg-elevated #f7f7f7

− bg-dark #000000

− surface #f7f7f7

− surface-hover #ededed

− surface-strong #e0e0e0

− surface-on-dark #1a1a1a

− text-strong #1a1a1a

− text-display #000000

− text-faint #999999

− text-on-dark #ffffff

− brand-deep #7a0000

− accent-blue #0066cc

− accent-yellow #ffd200

− border-on-dark #2a2a2a

− ring #cc0000

− success #00854a

− warning #ff8c00

− danger #cc0000

− info #0066cc

typography 4 changed

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

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

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

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

radius 3 changed

~ button 6px → 8px

~ card 8px → 10px

~ pill 9999px → 999px

spacing 1 changed

~ xl 48px → 64px

↻ Swap direction · OpenSea → Honda