Railway — illustrated cloud-platform landing page

---
version: alpha
name: Railway — illustrated cloud-platform landing page
colors:
  surface: '#13111c'
  ink: '#ffffff'
  primary: '#553f83'
typography:
  primary:
    fontFamily: IBM Plex Serif
    fontSize: 54px
    fontWeight: 500
    lineHeight: 60.48px
  body:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
components:
  primary-text:
    typography: '{typography.primary}'
    textColor: '{colors.ink}'
  body-copy:
    typography: '{typography.body}'
    textColor: '{colors.ink}'
  surface:
    backgroundColor: '{colors.surface}'
  accent:
    backgroundColor: '{colors.primary}'
---

## Overview

Atmospheric night-sky artwork frames editorial serif headlines and a dark infrastructure canvas. A long-form marketing page alternates deployment, networking, scaling and observability demonstrations with customer stories and a structured footer.

Source: https://railway.com/. Captured 2026-10-10T06:17:52.442749+00:00. This is an observational reference, not an official brand specification.

## Colors

surface: #13111c; ink: #ffffff; primary: #553f83. Tokens describe the observed core surfaces and text, not every color within illustrations or embedded product screenshots. Computed parent styles can differ from painted child text; white action labels were checked visually.

## Typography

Primary visible text uses "IBM Plex Serif", Georgia, Cambria, "Times New Roman", serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif at 54px/60.48px, weight 500, tracking -1.96px. The body sample uses Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" at 20px/28px, weight 400. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Capture method: the full-page image is stitched from sequential native-resolution viewport screenshots at measured document coordinates. Overlap excludes repeated sticky navigation; content pixels are retained without source DOM edits. Animated illustrations may show different moments across viewport tiles. This is a layout reference, not one simultaneous animation frame.

Use a compact navigation above an inset, rounded scenic hero. Center the promise and paired actions over a large animated product canvas. Continue with spacious bordered feature panels whose subdued green, blue and brown fields distinguish infrastructure topics. Customer cards precede an odometer-like usage section and the final invitation.

The full-page reference was captured at 1440px width with a measured document height of 12212px. Mobile evidence covers the opening 390×844px viewport; it is not a complete mobile-page audit.

At 390px the navigation reduces to a brand and menu control, the headline wraps to two lines, and the product demonstration is heavily cropped behind the two-column customer-mark grid. Feature headings and descriptions stack. Only the opening mobile viewport was visually audited; do not infer every lower-page breakpoint.

## Elevation & Depth

The dark canvas floats over a painted landscape; hairline borders and restrained tonal surfaces separate technical diagrams. The landscape is image artwork, not a measured CSS gradient.

## Shapes

Rounded outer scenes contrast with small-radius interface nodes and rectangular diagram frames.

## Components

The product canvas and counters change autonomously. Sequential source viewports record changing demo states, not a functioning dashboard or verified business metrics. Consent was rejected; missing-image flags were diagnosed as nonpainted clipped or hidden assets.

## Do's and Don'ts

- Do preserve the grouping, hierarchy, spacing and responsive arrangement described above.
- Do use the screenshot and measured element evidence together; decorative dimensions not explicitly measured are estimates.
- Don't invent hover, error, loading or completion states from the static capture.
- Don't reuse source customer quotations, logos or numeric claims as endorsements for another product.