Railway — GitHub-first authentication dialog

---
version: alpha
name: Railway — GitHub-first authentication dialog
colors:
  surface: '#13111c'
  ink: '#ffffff'
  primary: '#853bce'
typography:
  primary:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 27px
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
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 compact dark authentication chooser centers the Railway symbol, welcome copy and a glowing violet GitHub action, with a quiet email alternative below. This is the site-owned entry shared by login and the new-project flow.

Source: https://railway.com/. Captured 2026-10-10T06:09:08.346459+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 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 18px/27px, 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 16px/24px, weight 400. These are measured samples for this reference, not an inferred site-wide type scale.

## Layout

Center a 380px-wide dialog with a large logo, short welcome line, muted subtitle and a full-width provider action. Keep dismissal in the upper-right and the email alternative below the rounded main card. The selected dialog includes that transparent lower area; the dimmed page may be visible behind it.

The isolated element is measured at 380.00×454.00px within a 1440px desktop viewport. Mobile evidence captures the same complete element at 390px viewport width. The selector is `div[role="dialog"][data-ismodal="true"]`. Bounds were measured after a full-page warm-up render and checked again after the image used for cropping.

The dialog measures 380×454 at 1440px and 350×454 at 390px. Content remains vertically arranged, while the action and text shrink to the available interior width. The underlying page remains dimmed behind the transparent email-link area.

## Elevation & Depth

A purple glow emphasizes the GitHub action; the rest of the card uses a dark surface and thin edge rather than elevated white panels.

## Shapes

The dialog has rounded outer corners, a small close icon and a rounded rectangular provider action.

## Components

Opened Sign in, then inspected the email alternate without entering data. That alternate displayed a human-verification challenge and was not published. The Deploy entry at /new opens this same chooser via Login. No provider sign-in, account creation or credential submission was attempted.

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