---
version: alpha
name: Railway — editorial multi-column footer
colors:
  surface: '#13111c'
  ink: '#ffffff'
  primary: '#ffffff'
typography:
  primary:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    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 footer puts two editorial announcement cards beside six compact link groups, followed by compliance marks and a separated system-status and copyright row.

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

## Colors

surface: #13111c; ink: #ffffff; primary: #ffffff. 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 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 14px/20px, weight 500, tracking normal. 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 14px/20px, weight 500. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

At desktop use a wide featured-content column on the left and three columns containing two link groups each on the right. Give each group a modest white label and a vertical list of muted links. Place compliance badges low in the left column and separate the status row with a hairline.

The isolated element is measured at 1280.00×833.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `footer`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The 1280×833 desktop footer becomes approximately 382×1249 at mobile. Featured cards and compliance badges are not shown in the mobile capture; navigation becomes two columns across three rows. The bottom brand, status and copyright stack centrally.

## Elevation & Depth

Editorial cards use a subtly lighter fill and a thin border. Navigation lists remain flat on the dark page.

## Shapes

Rounded announcement cards contrast with plain text lists; retain the small circular brand mark and restrained status indicator.

## Components

Links and operational status are observed content, not verified external destinations or a service-health audit. Mobile bottom-edge pixel rounding was limited to at most one pixel and visually reviewed.

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