Diff

OpenSea vs Semafor

87 token-level differences between these two design systems.

Role tokens

Background

#04111d → #f8f5d7

Text

#ffffff → #1f1d1a

Brand

#2081e2 → #3a6d78

Border

#1f2937 → #d8d0a8

Display font

Inter → FeatureFlatHeadline

Body size

14px → 18px

colors 74 changed

~ bg #04111d → #f8f5d7

~ text #ffffff → #1f1d1a

~ text-muted #8a939b → #5a5651

~ brand #2081e2 → #3a6d78

~ brand-hover #1868b7 → #2d5a64

~ brand-active #1259a0 → #1f4750

~ brand-soft #2081e21a → #cce0e4

~ border #1f2937 → #d8d0a8

~ border-soft #151b25 → #e8e2c2

~ border-strong #2c3a4d → #7a756f

~ scrim rgba(4,17,29,0.70) → rgba(31,29,26,0.6)

~ link #2081e2 → #3a6d78

~ link-hover #5fa3eb → #2d5a64

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface #f8f5d7

+ surface-paper #ffffff

+ surface-soft #f5f1c9

+ surface-strong #e8e3b5

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-strong #000000

+ text-soft #7a756f

+ text-faint #a39e96

+ text-on-teal #ffffff

+ text-on-dark #f8f5d7

+ brand-deep #1a3a44

+ link-visited #7a756f

+ on-dark #f8f5d7

+ border-rule #1f1d1a

+ border-teal #3a6d78

+ shadow-card rgba(31,29,26,0.06)

+ shadow-elev rgba(31,29,26,0.1)

+ shadow-modal rgba(31,29,26,0.3)

+ success #2a8a4f

+ success-soft #dff0e7

+ warning #cc7a00

+ warning-soft #fde9cc

+ danger #a62d2d

+ danger-soft #f0d4d4

+ info #3a6d78

+ info-soft #cce0e4

+ flag-flagship #3a6d78

+ flag-africa #c46b3a

+ flag-principals #3a6d78

+ flag-net-zero #2a8a4f

+ flag-tech #5a4a8a

+ flag-business #3a6d78

+ flag-media #a62d2d

+ flag-gulf #c46b3a

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

typography 5 changed

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

~ h1 {"family":"Inter","size":40} → {"family":"FeatureFlatHeadline","size":28}

~ h2 {"family":"Inter","size":32} → {"family":"FeatureFlatHeadline","size":22}

~ body {"family":"Inter","size":14} → {"family":"FeatureFlatText","size":18}

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

radius 3 changed

~ button 8px → 4px

~ card 10px → 6px

~ pill 999px → 9999px

spacing 5 changed

~ xs 4px → 2px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 32px → 24px

~ xl 64px → 40px

↻ Swap direction · Semafor → OpenSea