Railway design system

Railway's website (railway.app) uses a dark interface with #59497a as its primary color and Inter as the main typeface, with JetBrains Mono alongside it. designlang measured 11 font sizes from 11.6667px to 54px, 8 spacing values, 5 corner radii.

Captured 25 June 2026Dark UI5,000 elements read

Download tokens Read it yourself

Railway colors

The brand roles and neutrals railway.app renders, with how many elements use each one.

Brand colors

Primary#59497a4 uses
Secondary#2918391 uses
Accent#1f132a1 uses

Neutrals

#33323e5,004 uses
#f7f7f84,888 uses
#54526047 uses
#a1a0ab12 uses
#609f8912 uses
#8785939 uses
#dcdce05 uses
#0000002 uses

Backgrounds

#13111c
#000000
#180d43
#1f132a
#0d0c14
#1b2132
#1f2b2e

Text colors

#ffffff18.67:1 on #13111c
#13111c1:1 on #13111c
#a667e45.05:1 on #13111c
#f7f7f817.44:1 on #13111c
#dcdce013.65:1 on #13111c
#a1a0ab7.23:1 on #13111c
#5452602.45:1 on #13111c
#8785935.16:1 on #13111c

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 100% of them pass.

Text	Background	Ratio	Result
`#ffffff`	`#59497a`	7.9:1	AAA
`#ffffff`	`#553f83`	8.66:1	AAA

Railway fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Inter: sans, body (4,769 elements)
JetBrains Mono: mono, body (186 elements)
IBM Plex Serif: serif, headings (7 elements)

Body text: 14px at weight 500, line height 20px.

Weights in use: 400, 500, 600, 700, 800.

Type scale

Size	Weight	Line height	Tracking	Used on
54px	500	60.48px	-1.96px	h1
40px	700	65px	-0.8px	text, tspan
36px	400	48px	-0.72px	h3, br
24px	400	32px	normal	div, svg, path, circle
20px	700	30px	normal	span, p, a, text
18px	400	27px	normal	div, svg, path, rect
16px	400	24px	normal	html, head, style, title
14px	500	20px	normal	p, a, button, span
13.3333px	600	21.6666px	normal	text, tspan
12px	400	19.5px	normal	text, tspan
11.6667px	400	18.9584px	normal	text, tspan

Spacing and radii

Spacing scale

4px
60px
80px
96px
128px
159px
235px
262px

Corner radii

4px
8px
16px
50px
pill

Medium radii lead, with a few larger ones. 5 distinct box shadows.

Motion

The motion reads as mixed.

Durations

instant: 50ms
xs: 100ms
sm: 200ms
md: 400ms
lg: 700ms

Easing

ease-in-out (10 uses): ease
linear (1 uses): linear
custom (5 uses): cubic-bezier(0.4, 0, 0.2, 1)
ease-in (4 uses): cubic-bezier(0.4, 0, 1, 1)
ease-out (1 uses): cubic-bezier(0, 0, 0.2, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

81/100, grade B

Components found: buttons (18), cards (5), links (11), navigation (4), modals (10), tabs (5).

By category

Color Discipline	92/100
Typography Consistency	50/100
Spacing System	85/100
Shadow Consistency	100/100
Border Radius Consistency	90/100
Accessibility	100/100
CSS Tokenization	100/100

4 font families — consider limiting to 2 (heading + body)
232 !important rules — prefer specificity over overrides
88% of CSS is unused — consider purging
3694 duplicate CSS declarations

Download the tokens

The files designlang wrote for railway.app. Run it yourself for a fresh read: npx designlang railway.app.

The core values as CSS variables

:root {
  --color-primary: #59497a;
  --color-secondary: #291839;
  --color-accent: #1f132a;
  --color-background: #13111c;
  --color-text: #ffffff;
  --color-neutral-1: #33323e;
  --color-neutral-2: #f7f7f8;
  --color-neutral-3: #545260;
  --color-neutral-4: #a1a0ab;
  --font-primary: "Inter", sans-serif;
  --font-secondary: "JetBrains Mono", monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Read railway.app yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Resend design system

Dark UI, inter, #d6ebfd

Sentry design system

Dark UI, Rubik, #150f23

Framer design system

Dark UI, Inter, #0066ff

GitHub design system

Dark UI, Mona Sans, #f0f6fc

Quick answers

What font does Railway use?

railway.app sets most of its text in Inter (4,769 elements), with JetBrains Mono and IBM Plex Serif alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Railway's brand colors?

The brand roles on railway.app are primary #59497a, secondary #291839 and accent #1f132a, on a #13111c background. The neutrals used most are #33323e, #f7f7f8 and #545260.

How do I use the Railway design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang railway.app for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from railway.app's public pages on 25 June 2026, so it shows what the site renders, not Railway's internal source files. Railway is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of railway.app on 25 June 2026. Railway is a trademark of its owner; designlang is not affiliated with it. More: the full Railway brand kit, the token extraction guide and the markdown version of this page.