taste-skill / Compare styles / Vercel vs Railway

Vercel vs Railway: design style comparison

Vercel is Geist Architectural Grid & Swiss Precision Monochrome; Railway is Deep Cosmic Violet Infrastructure & IBM Plex Serif Editorial. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 17 of 18 tracked tokens differ.

Side-by-side preview

Vercel style · light

Ship the product, not the pixels.

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

Card on extracted card recipe

Accent link: #0070F3 · border #EBEBEB

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)

Key differences

Vercel is a light design (canvas #FAFAFA) while Railway is dark (canvas #13111C).
Accent: #0070F3 (Vercel) vs #8B5CF6 (Railway).
Headings: GeistSans vs IBM Plex Serif.
Display type: Vercel H1 is 64px / -0.06em (w400); Railway H1 is 54px / -0.036em (w500) — Vercel sets 10px larger headlines.
Primary button radius: 6px vs 8px; height 32px vs 32px.
Depth: Vercel 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px most; 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.
Motion: cubic-bezier(0.4, 0, 0.2, 1) vs cubic-bezier(0.4, 0, 1, 1).

Token table

Token	Vercel	Railway
Canvas	`#FAFAFA`	`#13111C`
Surface	`#FFFFFF`	`#1B2132`
Text	`#171717`	`#FFFFFF`
Muted text	`#4D4D4D`	`#9593A8`
Accent	`#0070F3`	`#8B5CF6`
Border	`#EBEBEB`	`rgba(255, 255, 255, 0.1)`
Heading font	`GeistSans`	`IBM Plex Serif`
Body font	`GeistSans`	`Inter`
Mono font	`GeistMono`	`IBM Plex Mono`
H1	`64px / -0.06em (w400)`	`54px / -0.036em (w500)`
Button radius	`6px`	`8px`
Button height same	`32px`	`32px`
Most-used radius	`6px`	`8px`
Most-used shadow	`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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 235) 0px 0px 0px 1px`	`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`
Easing	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 1, 1)`
Duration	`0.1s`	`0.15s`
Container max-width	`1448px`	`1160px`
Mode	`light`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign Up	32px	`0px 6px`	`6px`	`#171717` `#FFFFFF`	`none`	`14px / 500`
Deploy now	40px	`0px 12px`	`9999px`	`#171717` `#FFFFFF`	`none`	`16px / 500`
Log In	32px	`0px 6px`	`6px`	`#FFFFFF` `#171717`	`none`	`14px / 500`

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

Which style should you pick?

Pick Vercel if you want Architectural #FAFAFA / #FFFFFF daylight grid with exposed 1px #EBEBEB structural hairlines, corner crosshair markers, ultra-tight -0.06em GeistSans display type, and #171717 monochrome CTAs — signals: light, monochrome, grid, crosshairs, geist, vercel, developer, minimal, swiss, high-contrast, 1px-grid.

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: dark, deployment, violet, purple, serif, railway, ibm-plex-serif, devtools.

Shared traits: cloud, infra.

Rules that differ

Vercel never:

NEVER substitute generic uncalibrated gray backgrounds for Vercel’s exact #FAFAFA canvas and #FFFFFF surface pairing.
NEVER replace GeistSans display typography or ignore its signature scale (64px / -0.06em (w400)).
NEVER use thick opaque borders that clash with #EBEBEB (1px solid #EBEBEB).

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)).

Go deeper

Vercel style guide Railway style guide Vercel token spec Railway token spec Linear vs Vercel Vercel vs Framer Vercel vs Supabase Vercel vs Upstash Vercel vs Clerk Resend vs Railway

Values extracted from https://vercel.com and https://railway.com. 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 →