What is Railway's primary brand color?

Railway runs two indigos that play different roles. The canvas primary is '#13111c' — an indigo-midnight set as the page background, the body of every section, and the fill of every dark surface (the extraction tags it with '--background' and '--osano-dialog-background-color'). The CTA primary is '#553f83' — a muted violet that fills the Deploy pill at 8px radius and renders nowhere else as a fill. The brand never softens either tone toward gray; both stay slightly violet so the page reads as one indigo theatre.

What typography does Railway use, and what should I use if IBM Plex Serif isn't right?

Display runs IBM Plex Serif at weight 500 only — 54px / '-1.96px' tracking at the hero, 40px / '-0.8px' at section H2, 36px / '-0.72px' at H3. Body, nav, and button labels run Inter at 14px / 16px / 18px / 20px across weights 400, 500, 600, 700, with a single 18px / weight 500 lede at '-0.09px' tracking under the hero. Inter Tight handles a 40px / weight 600 stat eyebrow ('-0.6px' tracking). Code blocks would run JetBrains Mono (the '--font-jetbrains-mono' variable is declared on :root). IBM Plex Serif is open-source via Google Fonts — substitutes are unnecessary; if you must, Source Serif 4 at weight 500 is the closest match.

Why does '#33323e' appear so frequently in the extraction?

'#33323e' is the universal hairline — a barely-tinted violet-gray with 1049 border occurrences (the single highest-frequency color on the page, ahead of even the text near-white). Railway uses it as the 1px divider on every card, nav, surface, input, table row, and footer column. The hairline is faint enough on the '#13111c' canvas that it reads as structure rather than decoration, but tinted just enough toward violet that it harmonizes with the indigo background. Don't swap to a neutral gray here — the violet tilt is what keeps the page reading as one continuous indigo surface.

How is the hero gradient used on the page?

The hero band carries a layered atmospheric gradient — violet '#3d2259', pink '#291839', and a far blue '#180d43' fused into one multi-stop backdrop sitting behind the IBM Plex Serif hero headline. The gradient is declared as '--heroGradient' on :root and applied only at hero scale; it never miniaturizes to a swatch, never crops to a single hue, never repeats as a button fill or chip color. Treat it as theatre lighting: one decorative object, applied as a backdrop, swapped for the lower-key '--kickbackHeroGradient' on secondary hero surfaces.

Why is there only one filled button on the page?

Railway runs a single-CTA discipline. The 'Deploy →' button — '#553f83' background, '#ffffff' text, '#ffffff' border, 8px radius, 12px / 24px padding, 58px tall, set in Inter at 20px / weight 500 / '-0.2px' tracking — is the only filled conversion target on the marketing surface. Every secondary action is a ghost button: transparent fill, 1px '#33323e' border, white text on the indigo canvas. The brand never escalates the violet pill into a duo with a second saturated color; the muted '#553f83' carries every primary CTA on the page by itself.

Can I use this DESIGN.md to build my own React project?

Yes — the file is structured for direct ingestion by Claude, Cursor, or any AI tool that reads token-based design specs. The agent reproduces Railway's constraints (indigo '#13111c' canvas only, IBM Plex Serif at weight 500 only for display, single '#553f83' violet CTA, '#33323e' hairlines everywhere, hero gradient as theatre lighting not fill) rather than inventing a generic shadcn theme. Every hex, font size, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or a component library.

Railway Design System

Railway's design language as a DESIGN.md file.

About Railway DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source railway.com

Web Infrastructure & Hosting
Developer Tools & IDEs

Railway's marketing page is what happens when a developer-cloud brand decides the right reference is not a dashboard mockup and not a launchpad illustration but a calm, mostly-empty stage. The canvas is "#13111c", an indigo-midnight so dark it reads as black until you put it next to actual black and watch it tilt violet. The hero headline is set in IBM Plex Serif at 54px / weight 500 / "-1.96px" tracking and reads "Ship software peacefully" — a serif on a dark page on a developer cloud, three decisions that almost no infrastructure brand makes together. Behind the headline sits a layered hero gradient (violet "#3d2259" / pink "#291839" / a far blue) that operates as theatre lighting rather than decoration. Everything else on the page — body paragraphs, nav links, button labels, footer rows — runs Inter at modest weights on the same indigo canvas.

This DESIGN.md packages the system into one machine-readable file following the Google Labs spec. Inside: 22 color tokens (the "#13111c" canvas, the "#f7f7f8" near-white text with 1165 occurrences, the "#33323e" hairline border with 1049 occurrences, the single muted-violet "#553f83" CTA, the brand green "#42946e" reserved for status indicators, plus the layered hero gradient stops "#3d2259" / "#291839" / "#180d43"), 11 typography tokens across IBM Plex Serif, Inter, Inter Tight, and JetBrains Mono, 5 radii from 4px to 9999px built around a 4px base (the 4px corner counts 439 times on the page), 9 spacing values from 2px to 64px, and 17 components covering the violet pill, the white-on-dark ghost button, the framed deploy mockup, the nav row, and the surface-elevated card.

Feed the file to Claude, Cursor, or Copilot when you want a React surface that reads as Railway — indigo canvas, serif headlines on dark, "#33323e" hairlines everywhere, a single muted-violet conversion target. Where most developer-cloud brands signal velocity with weight 600 sans, pure black canvases, and saturated electric accents, Railway signals it by lowering the voltage: a serif at weight 500, an indigo-not-black canvas, a violet CTA dialed two steps toward gray, and a hairline that lets the page read as one continuous surface rather than a stack of cards.

What makes it distinct

Indigo-midnight canvas'#13111c' carries the entire page; no light surfaces, no polarity flips, no marketing white bands
Serif hero on darkIBM Plex Serif at weight 500 with '-1.96px' tracking is the voice; Inter handles everything else
Single muted-violet CTA'#553f83' fills one pill at 8px radius and never repeats as a fill anywhere else on the page
Hairline as the entire structure'#33323e' draws 1049 of the page's borders, the highest-frequency color on the surface
Hero gradient as theatre lightingviolet '#3d2259' / pink '#291839' layered behind the serif headline, never repeated as swatches

Live at railway.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

railway.com

Explore Railway

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Railway design system FAQ

Common questions about Railway's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Railway — official site

Deploy web apps, servers, databases, and AI agents on the all-in-one Railway cloud.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Railway in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→