---
version: alpha
name: Railway — night-sky deployment hero
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

An isolated scenic hero pairs IBM Plex Serif display copy with two deployment actions, a simulated infrastructure canvas and a customer-logo grid over a painted night landscape.

Source: https://railway.com/. Captured 2026-10-10T06:08:13.349010+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

Keep the centered heading and short subtitle above a filled violet action and an outlined secondary action. Anchor a wide, dark deployment canvas within the scenic frame. A train and landscape transition into two rows of customer marks at the bottom.

The isolated element is measured at 1432.00×1716.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `main > section:first-of-type`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The measured section contracts from 1432×1716 at desktop to 382×577 at a 390px viewport. The heading shrinks from 54px to 40px. Most of the interactive canvas is hidden or clipped while a compact two-column logo area remains; this is observed source behavior, not a recommendation to obscure product details.

## Elevation & Depth

A large dark canvas forms the foreground against layered clouds, mountains and stars. Thin borders around logos remain subdued.

## Shapes

Use a broad rounded scenic container and small-radius filled/outlined actions; keep the actual illustration proportions.

## Components

The infrastructure demo changes automatically; screenshot shows one state. Deploy was followed only to the logged-out entry. No projects were created.

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