Diff

dYdX vs Semafor

77 token-level differences between these two design systems.

Role tokens

Background

#000000 → #f8f5d7

Text

#fafafd → #1f1d1a

Brand

#7774ff → #3a6d78

Border

#1f1f24 → #d8d0a8

Display font

Satoshi → FeatureFlatHeadline

Body size

16px → 18px

colors 67 changed

~ bg #000000 → #f8f5d7

~ surface #0a0a0a → #f8f5d7

~ surface-strong #131316 → #e8e3b5

~ text #fafafd → #1f1d1a

~ text-muted #8a8a96 → #5a5651

~ brand #7774ff → #3a6d78

~ brand-hover #8e8bff → #2d5a64

~ brand-active #605df0 → #1f4750

~ brand-soft #7774ff1a → #cce0e4

~ border #1f1f24 → #d8d0a8

~ border-soft #131316 → #e8e2c2

~ border-strong #33333c → #7a756f

~ scrim rgba(0,0,0,0.80) → rgba(31,29,26,0.6)

~ link #7774ff → #3a6d78

~ link-hover #8e8bff → #2d5a64

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface-paper #ffffff

+ surface-soft #f5f1c9

+ 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 #0a0a0a

− bg-elev-2 #131316

− bg-elev-3 #1c1c20

− text-body #c8c8d2

− text-subtle #5a5a64

− brand-glow rgba(119,116,255,0.40)

− border-brand #7774ff

− semantic-up #26c486

− semantic-up-soft #26c4861a

− semantic-down #ff5a5a

− semantic-down-soft #ff5a5a1a

− semantic-warning #f5b945

− semantic-info #7774ff

− focus-ring rgba(119,116,255,0.55)

typography 5 changed

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

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

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

~ body {"family":"Satoshi","size":16} → {"family":"FeatureFlatText","size":18}

~ label {"family":"SFMono-Regular","size":13} → {"family":"Courier New","size":11}

radius 2 changed

~ button 8px → 4px

~ card 12px → 6px

spacing 3 changed

~ xs 0px → 2px

~ lg 32px → 24px

~ xl 64px → 40px

↻ Swap direction · Semafor → dYdX