---
site: "Railway | The all-in-one intelligent cloud provider"
url: "https://railway.app"
generated_at: "2026-06-25T08:29:38.256Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: shadcn/ui
tokens:
  colors:
    primary: "#59497a"
    secondary: "#291839"
    accent: "#1f132a"
    background: "#13111c"
    foreground: "#ffffff"
  typography:
    sans: Inter
    mono: JetBrains Mono
    base: 14
  spacing:
    base: 2
    scale: "[4, 60, 80, 96, 128, 159, 235, 262]"
  radii:
    sm: 4
    md: 8
    lg: 16
    full: 9999
  shadows:
    sm: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset"
    xs: "rgb(204, 204, 204) 0px 0px 2px 2px"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **material-you** material (0.45).

Component library appears to be **shadcn/ui** (0.65).

> "Ship software peacefully"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `nav → hero → testimonials → content → content → testimonial → testimonials → testimonial → pricing-table → nav → footer`.

Source: <https://railway.app>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#59497a` | 4 |
| secondary | `#291839` | 1 |
| accent | `#1f132a` | 1 |
| background | `#13111c` | — |
| foreground | `#ffffff` | — |

**Neutrals:** `#33323e` · `#f7f7f8` · `#545260` · `#a1a0ab` · `#609f89`

**Total unique colors detected:** 23.

# Typography

**Families**
- `Inter` · 4769 uses
- `JetBrains Mono` · 186 uses
- `Helvetica` · 38 uses
- `IBM Plex Serif` · 7 uses

**Body size:** `14px` / line-height `20px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `54px` | `500` | `60.48px` |
| h2 | `36px` | `400` | `48px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `4px` · `60px` · `80px` · `96px` · `128px` · `159px` · `235px` · `262px`

**Layout primitives:** 9 grid containers · 101 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset`
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(62, 45, 45, 0.24) 0px 100px 191px 0px, rgba(62, 45, 45, 0.165) 0px 36.5016px 69.7181px 0px, rgba(62, 45, 45, 0.133) 0px 17.7209px 33.8469px 0px, rgba(62, 45, 45, 0.106) 0px 8.6871px 16.5924px 0px, rgba(62, 45, 45, 0.075) 0px 3.43489px 6.56065px 0px`
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset`
- `xs` — `rgb(204, 204, 204) 0px 0px 2px 2px`
- `xl` — `rgba(65, 78, 166, 0.1) 0px -12px 127px 0px, rgba(65, 78, 166, 0.07) 0px -4.38px 46.357px 0px, rgba(65, 78, 166, 0.06) 0px -2.127px 22.506px 0px, rgba(65, 78, 166, 0.04) 0px -1.042px 11.033px 0px, rgba(65, 78, 166, 0.03) 0px -0.412px 4.362px 0px`

**Z-index layers:** 9 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `16px`
- `full` — `50px`
- `full` — `9999px`

# Components

**Detected patterns:** `buttons` · `cards` · `links` · `navigation` · `modals` · `tabs` · `progressBars`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | outline | md, lg, sm | 18 |

# Do's and Don'ts

**Do's**
- Use `close`, `manage`, `accept` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't 4 font families — consider limiting to 2 (heading + body).
- Don't 232 !important rules — prefer specificity over overrides.
- Don't 88% of css is unused — consider purging.
- Don't 3694 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://railway.app>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._