Diff

OpenSea vs Honda

61 token-level differences between these two design systems.

Role tokens

Background

#04111d → #ffffff

Text

#ffffff → #35363b

Brand

#2081e2 → #cc0000

Border

#1f2937 → #d8d8d8

Display font

Inter → HondaGlobalFontEN-Regular

Body size

14px → 14px

colors 53 changed

~ bg #04111d → #ffffff

~ text #ffffff → #35363b

~ text-body #c5cdd6 → #35363b

~ text-muted #8a939b → #666666

~ brand #2081e2 → #cc0000

~ brand-hover #1868b7 → #b30000

~ brand-active #1259a0 → #990000

~ brand-soft #2081e21a → #fceaea

~ border #1f2937 → #d8d8d8

~ border-soft #151b25 → #ebebeb

~ border-strong #2c3a4d → #999999

~ link #2081e2 → #cc0000

~ link-hover #5fa3eb → #990000

+ 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

− 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)

typography 4 changed

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

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

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

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

radius 3 changed

~ button 8px → 6px

~ card 10px → 8px

~ pill 999px → 9999px

spacing 1 changed

~ xl 64px → 48px

↻ Swap direction · Honda → OpenSea