taste-skill / Compare styles / Railway vs Neon

Railway vs Neon: design style comparison

Railway is Deep Cosmic Violet Infrastructure & IBM Plex Serif Editorial; Neon is Serverless Pitch-Black & Luminous Cyber-Mint Postgres. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 15 of 18 tracked tokens differ.

Side-by-side preview

Railway style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Railway canvas, text, muted and accent tokens.

Deploy

Card on surface + border tokens

Accent link: #8B5CF6 · border rgba(255, 255, 255, 0.1)

Neon style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Neon canvas, text, muted and accent tokens.

Card on surface + border tokens

Accent link: #34D59A · border #242628

Key differences

Both are dark-mode designs, but the canvases differ: #13111C vs #000000.
Accent: #8B5CF6 (Railway) vs #34D59A (Neon).
Headings: IBM Plex Serif vs Inter.
Display type: Railway H1 is 54px / -0.036em (w500); Neon H1 is 56px / -0.04em (w400) — Neon sets 2px larger headlines.
Primary button radius: 8px vs 9999px; height 32px vs 36px.
Depth: Railway uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset most; Neon uses rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px most.
Motion: cubic-bezier(0.4, 0, 1, 1) vs cubic-bezier(0.4, 0, 0.2, 1).

Token table

Token	Railway	Neon
Canvas	`#13111C`	`#000000`
Surface	`#1B2132`	`#131415`
Text same	`#FFFFFF`	`#FFFFFF`
Muted text	`#9593A8`	`#94979E`
Accent	`#8B5CF6`	`#34D59A`
Border	`rgba(255, 255, 255, 0.1)`	`#242628`
Heading font	`IBM Plex Serif`	`Inter`
Body font same	`Inter`	`Inter`
Mono font	`IBM Plex Mono`	`JetBrains Mono`
H1	`54px / -0.036em (w500)`	`56px / -0.04em (w400)`
Button radius	`8px`	`9999px`
Button height	`32px`	`36px`
Most-used radius	`8px`	`4px`
Most-used shadow	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
Easing	`cubic-bezier(0.4, 0, 1, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.15s`	`0.2s`
Container max-width	`1160px`	`1600px`
Mode same	`dark`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Deploy	32px	`0px 0px`	`8px`	`#291839` `#F7F7F8`	`none`	`16px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	36px	`0px 18px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 500`
Get started	44px	`0px 28px`	`9999px`	`#FFFFFF` `#1A1A1A`	`none`	`16px / 500`
Log in	36px	`0px 18px`	`9999px`	`transparent` `#FFFFFF`	`1px solid #61646B`	`14px / 500`

Which style should you pick?

Pick Railway if you want Atmospheric #13111C cosmic violet-black canvas with #1B2132 / #291839 elevated deployment cards, rgba(255,255,255,0.1) hairlines, and 54px IBM Plex Serif display headings (-0.036em tracking) — signals: cloud, infra, deployment, violet, purple, serif, railway, ibm-plex-serif.

Pick Neon if you want Pitch-black #000000 canvas with #242628 / #303236 dark structural borders, 56px tight -0.04em Inter display headings, and #34D59A / #00E599 luminous cyber-mint accents — signals: postgres, serverless, database, mint, neon-green, pitch-black, neon.

Shared traits: dark, devtools.

Rules that differ

Railway never:

NEVER substitute generic uncalibrated gray backgrounds for Railway’s exact #13111C canvas and #1B2132 surface pairing.
NEVER replace IBM Plex Serif display typography or ignore its signature scale (54px / -0.036em (w500)).
NEVER use thick opaque borders that clash with rgba(255, 255, 255, 0.1) (1px rgba(255,255,255,0.1)).

Neon never:

NEVER substitute generic uncalibrated gray backgrounds for Neon’s exact #000000 canvas and #131415 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #242628 (1px solid #242628).

Go deeper

Railway style guide Neon style guide Railway token spec Neon token spec Vercel vs Railway Resend vs Railway Supabase vs Neon Neon vs Upstash Resend vs Neon Trigger.dev vs Neon

Values extracted from https://railway.com and https://neon.tech. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →