---
version: alpha
name: Railway — usage-based pricing and comparison page
colors:
  surface: '#13111c'
  ink: '#ffffff'
  primary: '#853bce'
typography:
  primary:
    fontFamily: IBM Plex Serif
    fontSize: 56px
    fontWeight: 500
    lineHeight: 70px
  body:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
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

A dark usage-based pricing page combines a large serif value proposition, illustrated consumption graph, Free/Hobby/Pro/Enterprise offers, a detailed comparison table and expandable questions.

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

## Colors

surface: #13111c; ink: #ffffff; primary: #853bce. 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", serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif at 56px/70px, weight 500, tracking -1.4px. The body sample uses ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace at 14px/20px, weight 400. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Lead with a two-column proposition and stepped usage chart. Give the free offer a horizontal strip, then align the paid plans as bordered cards with distinct blue, violet and neutral actions. A long four-column feature matrix, metering explanations and FAQ follow before the footer.

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

At 390px the serif heading becomes 36px/45px, the explanatory copy wraps within a 350px content width and the graph moves beneath it. The first plan begins below the graph. The lower mobile comparison table was not visually audited; do not claim a particular table-scrolling behavior.

## Elevation & Depth

Use purple glows sparingly around consumption and estimator illustrations; card edges and divider lines provide most separation.

## Shapes

Plan cards have rounded corners, compact rectangular actions and checkmark-based feature rows.

## Components

Prices, usage illustrations and limits are source content at capture time. Billing calculations, selectors, purchase paths and expanded FAQ states were not exercised.

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