Skip to content
DesignMunkDesignMunk Submit a site

Railway

railway.com
Software Technology Homepage IBM Plex Serif Inter
Share Visit site
railway.com DESKTOP · 1440
Railway

AI Breakdown

Design export

---
version: alpha
name: Railway
description: Deploy anything without the complexity—Railway handles the rest.
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#553f83"
  neutral: "#13111c"
  border: "#374151"
  brand-black-metal: "#070707"
  brand-gainsboro: "#dcdcdc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: IBM Plex Serif
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.036em
  headline-md:
    fontFamily: IBM Plex Serif
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.019em
  headline-sm:
    fontFamily: IBM Plex Serif
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.022em
  headline-xs:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
spacing:
  xs: 4px
  sm: 12px
  md: 24px
  lg: 32px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 58px
  button-secondary:
    backgroundColor: "#000000"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 58px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Railway

## Overview

Railway is a developer-facing cloud infrastructure product; the brand voice is calm and unhurried ('ship software peacefully') set against technically dense subject matter (networking, scaling, logs). The UI should read as spacious and confident rather than cluttered, using a dark, near-black surface with one accent color reserved for primary actions. Dense technical detail (IPs, service names, config) is presented inside contained, low-noise cards so it doesn't compete with the calmer marketing copy around it.

## Colors

- **Primary (#ffffff):** Headlines, body copy, and icon strokes on the dark surface.
- **Secondary (#7c7c7c):** Muted supporting text and de-emphasized labels.
- **Tertiary (#553f83):** The single saturated accent — primary button fill, used sparingly so it reads as the one actionable color on the page.
- **Neutral (#13111c):** Base page and card surface, the near-black backdrop for the entire experience.
- **Border (#374151):** Subtle divider and outline color separating cards and panels without shadow.
- **Brand Black Metal (#070707):** Deepest black, used for the secondary button fill.
- **Brand Gainsboro (#dcdcdc):** Off-white utility tone for secondary text on dark surfaces.
- **Surface / On-surface:** Aliases of neutral and primary — the base panel color and the text that sits on it.

## Typography

IBM Plex Serif carries every headline (headline-lg 54px/500, headline-md 42px/400, headline-sm 33px/400), giving the page its literary, unhurried tone against an otherwise technical subject. It is freely available via Google Fonts; if unavailable, substitute Source Serif 4, Lora, or PT Serif for a similarly warm, medium-contrast serif. Inter handles everything else — headline-xs at 26px for smaller section labels and body-md at 20px/400 for supporting paragraphs — and is also Google-hosted, with Roboto or Helvetica Neue as safe substitutes if load time matters more than exact match.

## Layout

Spacing runs on a compact scale (4px, 12px, 24px, 32px) for component-level padding and gaps, jumping to a wide 96px unit for section-level separation. This creates a rhythm of tight, dense card interiors set inside generously separated page sections — the copy blocks breathe, but the product screenshots and cards inside them stay information-dense.

## Elevation & Depth

No shadows are used anywhere (all shadow tokens resolve to none). Hierarchy comes from flat tonal contrast instead: the near-black neutral surface, a 1px border in #374151 to separate panels, and brightness/color shifts (white text, muted grey secondary text, the purple accent) rather than any cast shadow or blur.

## Shapes

A single small radius (8px) is applied consistently to buttons and cards. It's just enough to soften rectangular panels without looking rounded or playful — appropriate for infrastructure tooling where sharp, legible edges support scanning dense information.

## Components

**Button primary** — #553f83 fill, white text, 8px radius, 58px height, 12px/24px padding; reserved for the main conversion action ('Deploy'). **Button secondary** — solid black (#000000) fill, white text, same 8px radius and 58px height; used for lower-priority actions ('Agents') placed directly beside the primary. **Button link** — text-only, white, no radius, used for inline 'Learn more →' actions within feature sections. **Card** — neutral (#13111c) background, white text, 8px radius, 16px padding; the base container for feature call-outs and dashboard-style panels.

### Deploy Canvas Screenshot
The hero product visual: a dark panel showing a visual service graph (GitHub-linked 'backend' service, a Postgres node, connection lines to `postgres.railway` and an IP address) rendered with 8px-radius cards on the neutral surface and no shadows — depth comes purely from border lines and layering.

### Feature Row Pattern
Each major section (Build and deploy, Network and connect, Scale and grow, Monitor and observe, Evolve and collaborate) repeats the same structure: a small eyebrow label, a headline-md serif statement, one line of Inter body copy, a 'Learn more →' link, followed by two or three sub-feature blurbs in headline-xs/body-md pairs.

### Testimonial Cards
Quote cards in the 'Trusted by the best in business' section use the neutral card surface with white quote text and grey (#7c7c7c) attribution lines — no imagery, no shadow, relying entirely on typographic contrast to separate quote from name.

### Tweet Grid
A scrolling grid of developer tweets styled as minimal cards — handle in secondary grey, body in white — reused six times to simulate social proof density without custom illustration.

### Live Counter Strip
'0+ deploys per month' section renders large numeric counters (users, services, deployments, requests, logs) in a single dense row, contrasting with the airy 96px spacing used elsewhere on the page.

## Do's and Don'ts

- Do reserve the #553f83 accent for the single most important action per view; do not apply it to secondary buttons or decorative elements.
- Do keep the 8px radius consistent across every button and card — don't introduce a second radius scale.
- Do rely on the #374151 border and neutral tonal shifts for separation; don't add drop shadows, since none exist in this system.
- Do pair serif headlines with Inter body copy in every section — don't let Inter creep into headline roles or the serif into body copy.
- Don't crowd the 96px section rhythm; large vertical gaps are what let dense technical screenshots feel calm rather than cluttered.

## Agent Prompt Guide

Quick reference — Text: #ffffff (primary), #7c7c7c (secondary); Background: #13111c (neutral/surface); Border: #374151; Accent: #553f83 (tertiary).
1. "Build a hero section on a #13111c background with a headline-lg IBM Plex Serif statement at 54px/500 in #ffffff, a body-md Inter subhead at 20px in #7c7c7c, and two buttons side by side: primary filled #553f83 with white text, secondary filled #000000 with white text, both 8px radius and 58px height."
2. "Create a feature row with a small Inter eyebrow label, a headline-md IBM Plex Serif title at 42px, one line of body-md Inter copy at 20px in #7c7c7c, and a text-only 'Learn more →' link in #ffffff with no border-radius."
3. "Design a testimonial card using the card component: #13111c background, 8px radius, 16px padding, white quote text, and a #7c7c7c attribution line beneath — no shadow, separated from adjacent cards only by a 1px #374151 border."
4. "Lay out three sub-feature blocks under a section headline using headline-xs Inter at 26px for each mini-title and body-md Inter at 20px for the description, spaced with the 24px/32px scale."
5. "Render a dashboard-style product screenshot panel: dark #13111c surface, 8px-radius nested cards for services, no shadows, thin #374151 borders between panels, and small status text in #7c7c7c."

## Similar Brands

- **Vercel:** same dark-mode developer-tool register and flat card language, but leans monospace/geometric sans throughout rather than mixing in a serif.
- **Fly.io:** comparable infrastructure-canvas screenshots and technical tone, though its palette runs brighter and more saturated.
- **Render:** nearly identical audience and feature set (deploy, scale, monitor), with a flatter, more corporate sans-only type system.
- **Linear:** shares the restrained single-accent-color discipline and 8px-radius component language, applied to project management rather than infra.

More like this

Browse Software →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 18 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 19 hours ago
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 1 day ago