Diff

Railway vs Midjourney

80 token-level differences between these two design systems.

Role tokens

Background

#13111c → #06051d

Text

#f7f7f8 → #ffffff

Brand

#553f83 → #9061f9

Border

#33323e → #00000099

Display font

IBM Plex Serif → JetBrains Mono

Body size

16px → 14px

colors 71 changed

~ bg #13111c → #06051d

~ surface #291839 → #2d0e36

~ surface-deep #322046 → #28172e

~ brand #553f83 → #9061f9

~ brand-deep #3a2b5d → #5b21b6

~ link #9d7ad4 → #9061f9

~ link-hover #b39de2 → #a78bfa

~ link-visited #8462c4 → #7c3aed

~ selected #553f8326 → #3b2566

~ disabled #33323e → #3a3d4a

~ text #f7f7f8 → #ffffff

~ text-muted #a1a0ab → #9ca0ad

~ text-soft #7a798a → #ebf8ff

~ text-faint #5a5969 → #5a5d6c

~ border #33323e → #00000099

~ border-strong #ffffff26 → #ffffff1f

~ shadow-ambient rgba(0,0,0,0.3) → rgba(6,5,29,0.4)

~ success #22c55e → #16a394

~ success-bg #0f3a1f → #0e2a26

~ warning #f59e0b → #f5a524

~ warning-bg #3a2710 → #2e2010

~ danger #ef4444 → #fc2c83

~ danger-bg #3a1818 → #2c0a1a

~ info #9d7ad4 → #63b3ed

~ info-bg #291839 → #0f1f33

+ bg-alt #0f1c36

+ text-strong #ffffff

+ text-body #ebf8ff

+ brand-soft #3b2566

+ accent-rose #fc2c83

+ accent-amber #f5a524

+ accent-emerald #16a394

+ accent-sky #63b3ed

+ accent-magenta #d946ef

+ accent-cyan #22d3ee

+ neutral-50 #f8f8fb

+ neutral-100 #ebecf0

+ neutral-300 #9ca0ad

+ neutral-500 #5a5d6c

+ neutral-700 #2e3038

+ neutral-900 #161827

+ surface-soft #314062

+ surface-raised #3a1c44

+ border-subtle #ffffff0a

+ shadow-violet rgba(144,97,249,0.25)

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

+ success-text #5eead4

+ warning-text #fcd34d

+ danger-text #fda4af

+ info-text #93c5fd

− bg-deep #0c0a14

− bg-elev-1 #1c1a26

− bg-elev-2 #291839

− bg-elev-3 #322046

− surface-alt #1c1a26

− surface-pink #2a1f3f

− brand-hover #6b4fa3

− brand-pressed #46336e

− brand-glow #553f8333

− accent #9d7ad4

− accent-hover #b39de2

− accent-soft #2a1f3f

− accent-mid #7d63b8

− disabled-text #7a798a

− text-heading #ffffff

− text-disabled #7a798a

− border-soft #ffffff14

− border-brand #553f8366

− shadow-standard rgba(0,0,0,0.5)

− shadow-elevated rgba(0,0,0,0.65)

− shadow-glow rgba(85,63,131,0.35)

typography 5 changed

~ display {"family":"IBM Plex Serif","size":72} → {"family":"JetBrains Mono","size":48}

~ h1 {"family":"IBM Plex Serif","size":48} → {"family":"JetBrains Mono","size":30}

~ h2 {"family":"IBM Plex Serif","size":40} → {"family":"JetBrains Mono","size":24}

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

~ label {"family":"IBM Plex Mono","size":13} → {"family":"JetBrains Mono","size":11}

radius 1 changed

~ card 20px → 16px

spacing 3 changed

~ md 12px → 8px

~ lg 24px → 20px

~ xl 40px → 32px

↻ Swap direction · Midjourney → Railway