Diff

Railway vs Neon

51 token-level differences between these two design systems.

Role tokens

Background

#13111c → #0a0a0b

Text

#f7f7f8 → #ffffff

Brand

#553f83 → #34d59a

Border

#33323e → #303236

Display font

IBM Plex Serif → Esbuild

Body size

16px → 16px

colors 47 changed

~ bg #13111c → #0a0a0b

~ bg-deep #0c0a14 → #000000

~ bg-elev-1 #1c1a26 → #0c0d0d

~ bg-elev-2 #291839 → #111215

~ bg-elev-3 #322046 → #151617

~ surface #291839 → #111215

~ surface-alt #1c1a26 → #151617

~ brand #553f83 → #34d59a

~ brand-hover #6b4fa3 → #37c38f

~ brand-pressed #46336e → #2cb583

~ brand-deep #3a2b5d → #1a8d65

~ brand-glow #553f8333 → #34d59a33

~ on-brand #ffffff → #0a0a0b

~ accent #9d7ad4 → #94b5f7

~ accent-hover #b39de2 → #a9c4f9

~ accent-soft #2a1f3f → #94b5f71f

~ link #9d7ad4 → #94b5f7

~ link-hover #b39de2 → #a9c4f9

~ link-visited #8462c4 → #7d9ce0

~ selected #553f8326 → #34d59a26

~ disabled #33323e → #3a3c40

~ disabled-text #7a798a → #5b5e64

~ text #f7f7f8 → #ffffff

~ text-muted #a1a0ab → #94979e

~ text-soft #7a798a → #a3a6b3

~ text-faint #5a5969 → #c2c4cc

~ text-disabled #7a798a → #5b5e64

~ border #33323e → #303236

~ border-strong #ffffff26 → #4a4d52

~ border-brand #553f8366 → #34d59a66

~ shadow-ambient rgba(0,0,0,0.3) → rgba(0,0,0,0.35)

~ shadow-standard rgba(0,0,0,0.5) → rgba(0,0,0,0.55)

~ shadow-elevated rgba(0,0,0,0.65) → rgba(0,0,0,0.7)

~ shadow-glow rgba(85,63,131,0.35) → rgba(52,213,154,0.25)

~ success #22c55e → #34d59a

~ success-bg #0f3a1f → #2c6d4c

~ warning #f59e0b → #f5a623

~ warning-bg #3a2710 → #3a2a10

~ danger #ef4444 → #ff5c5c

~ info #9d7ad4 → #94b5f7

~ info-bg #291839 → #1a2240

+ surface-tinted #285d49

+ surface-tinted-2 #2c6d4c

+ surface-tinted-soft #cae6d9

− surface-deep #322046

− surface-pink #2a1f3f

− accent-mid #7d63b8

typography 4 changed

~ display {"family":"IBM Plex Serif","size":72} → {"family":"Esbuild","size":96}

~ h1 {"family":"IBM Plex Serif","size":48} → {"family":"Esbuild","size":56}

~ h2 {"family":"IBM Plex Serif","size":40} → {"family":"Esbuild","size":40}

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

radius identical

No differences.

spacing identical

No differences.

↻ Swap direction · Neon → Railway