taste-skill / Compare styles / Resend vs Railway

Resend vs Railway: design style comparison

Resend is Obsidian Developer Luxury & Editorial Serif-Meets-Mono; 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. 15 of 18 tracked tokens differ.

Side-by-side preview

Resend style · dark

Ship the product, not the pixels.

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

Get started Get started

Card on extracted card recipe

Accent link: #00A3FF · border rgba(212, 234, 255, 0.19)

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

Both are dark-mode designs, but the canvases differ: #000000 vs #13111C.
Accent: #00A3FF (Resend) vs #8B5CF6 (Railway).
Headings: Domaine / ABC Favorit vs IBM Plex Serif.
Display type: Resend H1 is 96px / -0.01em (Domaine); Railway H1 is 54px / -0.036em (w500) — Resend sets 42px larger headlines.
Primary button radius: 16px vs 8px; height 40px vs 32px.
Depth: Resend uses rgb(0, 0, 0) 0px 0px 0px 8px 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	Resend	Railway
Canvas	`#000000`	`#13111C`
Surface	`#141517`	`#1B2132`
Text	`#F0F0F0`	`#FFFFFF`
Muted text	`#A1A4A5`	`#9593A8`
Accent	`#00A3FF`	`#8B5CF6`
Border	`rgba(212, 234, 255, 0.19)`	`rgba(255, 255, 255, 0.1)`
Heading font	`Domaine / ABC Favorit`	`IBM Plex Serif`
Body font same	`Inter`	`Inter`
Mono font	`CommitMono`	`IBM Plex Mono`
H1	`96px / -0.01em (Domaine)`	`54px / -0.036em (w500)`
Button radius	`16px`	`8px`
Button height	`40px`	`32px`
Most-used radius same	`8px`	`8px`
Most-used shadow	`rgb(0, 0, 0) 0px 0px 0px 8px`	`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.2s`	`0.15s`
Container max-width	`1280px`	`1160px`
Mode same	`dark`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	40px	`0px 16px`	`16px`	`transparent` `#FFFFFF`	`2px solid rgba(255, 255, 255, 0.05)`	`14px / 600`
Get started	48px	`0px 20px`	`16px`	`transparent` `#FFFFFF`	`2px solid rgba(255, 255, 255, 0.05)`	`16px / 600`
Get Started	41px	`12px 20px`	`4px`	`#00A3FF` `#FFFFFF`	`none`	`14px / 600`

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

Which style should you pick?

Pick Resend if you want True #000000 obsidian canvas with rgba(212,234,255,0.19) ice-tinted borders, 96px Domaine editorial serif H1, -0.05em ABC Favorit H2, CommitMono code, and blur(25px) glass CTAs — signals: obsidian, pitch-black, developer, email, api, resend, editorial, mono, frosted-glass, ice-slate-border, luxury.

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, railway, ibm-plex-serif.

Shared traits: dark, devtools, serif.

Rules that differ

Resend never:

NEVER use a single generic sans-serif font across the entire page—Resend’s signature tension comes from combining an editorial serif (Domaine for Hero H1), a tight neo-grotesque display sans (ABC Favorit with -0.05em tracking for H2), Inter for body copy, and CommitMono for code.
NEVER use warm or neutral gray borders on #000000—always use cool ice-tinted translucent borders (rgba(212, 234, 255, 0.19) / --slate-a6 or rgba(211, 237, 246, 0.11)).
NEVER use loose letter-spacing on H2 headings—Resend uses an aggressive -0.05em (-2.8px at 56px) tracking on section headings.

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

Resend style guide Railway style guide Resend token spec Railway token spec Resend vs Loops Resend vs Mintlify Resend vs Neon Vercel vs Railway Railway vs Neon

Values extracted from https://resend.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 →