Diff

OpenSea vs Runway

91 token-level differences between these two design systems.

Role tokens

Background

#04111d → #0c0c0c

Text

#ffffff → #ffffff

Brand

#2081e2 → #0c0c0c

Border

#1f2937 → #ffffff0d

Display font

Inter → abcNormal

Body size

14px → 16px

colors 79 changed

~ bg #04111d → #0c0c0c

~ text-muted #8a939b → #666e7a

~ brand #2081e2 → #0c0c0c

~ border #1f2937 → #ffffff0d

~ border-strong #2c3a4d → #ffffff1f

~ link #2081e2 → #ffffff

~ link-hover #5fa3eb → #dddddd

+ bg-alt #1a1a1a

+ text-strong #ffffff

+ text-paper #404040

+ text-soft #999999

+ text-faint #4a4a4a

+ brand-paper #efeee6

+ accent-iced #eef1f5

+ accent-cream #efeee6

+ accent-bone #e8e6dc

+ accent-graphite #262626

+ accent-charcoal #1a1a1a

+ link-underline #666e7a

+ link-visited #999999

+ selected #262626

+ disabled #404040

+ neutral-50 #fafafa

+ neutral-100 #efeee6

+ neutral-200 #eef1f5

+ neutral-300 #cccccc

+ neutral-500 #999999

+ neutral-600 #666e7a

+ neutral-700 #404040

+ neutral-800 #262626

+ neutral-900 #1a1a1a

+ neutral-950 #0c0c0c

+ surface #262626

+ surface-paper #efeee6

+ surface-iced #eef1f5

+ surface-bone #e8e6dc

+ border-subtle #f7f7f70d

+ border-paper #404040

+ shadow-ambient rgba(0,0,0,0.4)

+ shadow-paper rgba(0,0,0,0.08)

+ shadow-deep rgba(0,0,0,0.6)

+ success #7cb342

+ success-bg #1a2410

+ success-text #a8d978

+ warning #e6a23c

+ warning-bg #2a1f10

+ warning-text #f5c878

+ danger #e74c3c

+ danger-bg #2a1010

+ danger-text #f08a80

+ info #5a9ed3

+ info-bg #0e1a26

+ info-text #90c4ec

− bg-elev-1 #0d1721

− bg-elev-2 #1b2730

− bg-elev-3 #252f3e

− surface-card #0d1721

− surface-card-hover #1b2730

− text-body #c5cdd6

− text-subtle #707a83

− text-on-light #04111d

− brand-hover #1868b7

− brand-active #1259a0

− brand-soft #2081e21a

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

− border-soft #151b25

− 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 5 changed

~ display {"family":"Inter","size":72} → {"family":"abcNormal","size":80}

~ h1 {"family":"Inter","size":40} → {"family":"abcNormal","size":56}

~ h2 {"family":"Inter","size":32} → {"family":"abcNormal","size":40}

~ body {"family":"Inter","size":14} → {"family":"abcNormal","size":16}

~ label {"family":"JetBrains Mono","size":11} → {"family":"SFMono-Regular","size":12}

radius 2 changed

~ card 10px → 12px

~ pill 999px → 9999px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 8px

~ lg 32px → 20px

~ xl 64px → 32px

↻ Swap direction · Runway → OpenSea