Railway design system

What font does Railway use?

Railway’s website uses IBM Plex Serif for headings and Inter for body text. IBM Plex Serif is free on Google Fonts; Inter is free on Google Fonts.

Railway colour palette

Railway’s home page is dark (#13111C background, #F7F7F8 text) and uses #553F83 for its main actions. Its palette: #13111C, #FFFFFF, #1F2B2E, #1B2132, #251823, #0B0B0F.

• #13111C
  71.9% · backgrounds
• #FFFFFF
  5.6% · text, drawings
• #1F2B2E
  4.2% · backgrounds
• #1B2132
  4.2% · backgrounds
• #251823
  3.4% · backgrounds
• #0B0B0F
  1.8% · backgrounds
• #0D0C14
  1.8% · backgrounds, drawings
• #F7F7F8
  1% · text
• #868593
  0.6% · drawings
• #42946E
  0.5% · drawings

Type scale

Each size the page sets text in, with its weight and line height. Railway’s largest type is 54px at weight 500.

Spacing and shape

Spacing sits on a 8px grid: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 76px, 80px, 96px.

Corner radii: 4px, 6px, 8px, 10px, 12px, 16px, pill. 5 shadow levels measured.

What makes Railway look like Railway

Almost entirely neutral: 97% of the page is painted in #13111C and #1F2B2E.

#42946E is an accent: 0.5% of the page, used for drawings only. Don't fill large areas with it.

#D2AC53 is an accent: 0.2% of the page, used for drawings only. Don't fill large areas with it.

The largest type (54px IBM Plex Serif) is medium weight, not bold (500), tracked to -0.036em.

Railway DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Railway’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Railway’s product, so use your own name, words and images.

Download Railway DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Railway’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400&display=swap");

:root {
  --color-background: #13111C; /* Background */
  --color-surface: #0D0C14; /* Surface */
  --color-text: #F7F7F8; /* Text */
  --color-text-muted: #6B7280; /* Text muted */
  --color-border: #33323E; /* Border */
  --color-action: #553F83; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-positive: #42946E; /* Positive */
  --color-warning: #C67839; /* Warning */
  --color-1f2b2e: #1F2B2E; /* 4.2% of the page, as fills */
  --color-1b2132: #1B2132; /* 4.2% of the page, as fills */
  --color-251823: #251823; /* 3.4% of the page, as fills */
  --color-0b0b0f: #0B0B0F; /* 1.8% of the page, as fills */
  --color-868593: #868593; /* 0.6% of the page, as drawings */
  --color-262626: #262626; /* 0.3% of the page, as drawings */
  --color-000000: #000000; /* 0.3% of the page, as drawings */
  --font-body: "Inter", sans-serif; /* Inter */
  --font-code: "JetBrains Mono", monospace; /* JetBrains Mono */
  --font-display: "IBM Plex Serif", serif; /* IBM Plex Serif */
  --font-interface: "Helvetica", "Inter Tight", sans-serif; /* Helvetica on the site; Inter Tight renders */
  --type-display-large: 54px; /* Display Large, weight 500 */
  --type-display-large-leading: 60.48px;
  --type-display-large-tracking: -0.036em;
  --type-display-medium: 40px; /* Display Medium, weight 400 */
  --type-display-medium-leading: 48px;
  --type-display-medium-tracking: -0.02em;
  --type-display-small: 36px; /* Display Small, weight 400 */
  --type-display-small-leading: 48px;
  --type-display-small-tracking: -0.02em;
  --type-headline: 32px; /* Headline, weight 400 */
  --type-headline-leading: 44px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 28px;
  --type-title-small: 18px; /* Title Small, weight 500 */
  --type-title-small-leading: 28.8px;
  --type-title-small-tracking: -0.005em;
  --type-body-large: 16px; /* Body Large, weight 400 */
  --type-body-large-leading: 28px;
  --type-body-large-tracking: -0.006em;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 21px;
  --type-label-large: 12px; /* Label Large, weight 400 */
  --type-label-large-leading: 18px;
  --type-label-medium: 11.67px; /* Label Medium, weight 400 */
  --type-label-medium-leading: 18.9584px;
  --type-label-small: 5.83px; /* Label Small, weight 400 */
  --type-label-small-leading: 9.47916px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-26: 104px;
  --space-30: 120px;
  --space-32: 128px;

How this was measured

PikSpec’s scanner read the railway.app home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Railway is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Railway.

Similar dark designs: Aesop · Bolt · Descript · DigitalOcean · Discord · Framer

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.