Diff

Railway vs Glean

58 token-level differences between these two design systems.

Role tokens

Background

#13111c → #ffffff

Text

#f7f7f8 → #333333

Brand

#553f83 → #343ced

Border

#33323e → #e6e6ea

Display font

IBM Plex Serif → PolySans Neutral

Body size

16px → 16px

colors 49 changed

~ bg #13111c → #ffffff

~ surface #291839 → #f5f5f7

~ brand #553f83 → #343ced

~ brand-hover #6b4fa3 → #2a31cc

~ brand-deep #3a2b5d → #29246a

~ text #f7f7f8 → #333333

~ text-heading #ffffff → #0a0227

~ text-muted #a1a0ab → #6b6b73

~ text-faint #5a5969 → #9a9aa2

~ border #33323e → #e6e6ea

~ border-strong #ffffff26 → #d2d2d8

~ success #22c55e → #058a5e

~ success-bg #0f3a1f → #e6f5ee

~ warning #f59e0b → #9a6b00

~ warning-bg #3a2710 → #fbf2dc

~ danger #ef4444 → #b42318

~ danger-bg #3a1818 → #fdeceb

~ info #9d7ad4 → #343ced

~ info-bg #291839 → #ebecff

+ surface-soft #fafafa

+ brand-sampled #343bed

+ brand-soft #ebecff

− bg-deep #0c0a14

− bg-elev-1 #1c1a26

− bg-elev-2 #291839

− bg-elev-3 #322046

− surface-alt #1c1a26

− surface-deep #322046

− surface-pink #2a1f3f

− brand-pressed #46336e

− brand-glow #553f8333

− accent #9d7ad4

− accent-hover #b39de2

− accent-soft #2a1f3f

− accent-mid #7d63b8

− link #9d7ad4

− link-hover #b39de2

− link-visited #8462c4

− selected #553f8326

− disabled #33323e

− disabled-text #7a798a

− text-soft #7a798a

− text-disabled #7a798a

− border-soft #ffffff14

− border-brand #553f8366

− shadow-ambient rgba(0,0,0,0.3)

− 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":"PolySans Neutral","size":72}

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

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

~ body {"family":"Inter","size":16} → {"family":"PolySans Neutral","size":16}

~ label {"family":"IBM Plex Mono","size":13} → {"family":"SFMono-Regular","size":13}

radius 1 changed

~ card 20px → 12px

spacing 3 changed

~ xs 2px → 0px

~ lg 24px → 32px

~ xl 40px → 64px

↻ Swap direction · Glean → Railway