# Railway design system: colors, fonts and tokens

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

Source: https://railway.app, captured 25 June 2026. Page: https://designlang.app/design-system/railway

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#59497a` | 4 |
| Secondary | `#291839` | 1 |
| Accent | `#1f132a` | 1 |

Neutrals: `#33323e`, `#f7f7f8`, `#545260`, `#a1a0ab`, `#609f89`, `#878593`, `#dcdce0`, `#000000`

Backgrounds: `#13111c`, `#000000`, `#180d43`, `#1f132a`, `#0d0c14`, `#1b2132`, `#1f2b2e`

## Fonts

- Inter (sans), 4769 elements
- JetBrains Mono (mono), 186 elements
- IBM Plex Serif (serif), 7 elements

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

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

## Radii

4px, 8px, 16px, 50px, pill

## Motion

Feel: mixed. Durations: 50ms, 100ms, 200ms, 400ms, 700ms.

## Audit

Overall 81/100 (grade B).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/railway-app/railway-app-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/railway-app/railway-app-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/railway-app/railway-app-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/railway-app/railway-app-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/railway-app/railway-app-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/railway-app/railway-app-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/railway-app/railway-app-DESIGN.md)

Regenerate: `npx designlang railway.app`