Skip to content
railway.com logo

Railway

railway.com

“Railway projects a vibe of 'calm competence' and 'developer serenity,' stripping away the traditional chaos of cloud infrastructure to offer a peaceful, reliable, and intelligent experience. It balances technical authority with approachable simplicity, using a dark, immersive aesthetic that feels both premium and focused.”

developer-first
serene
minimalist
intelligent
reliable
immersive
modern

Color Palette

Colors

Light Mode

#1c1a28

primary

#181622

secondary

#13111c

background

#ffffff

text

#878593

secondaryText

#a667e4

link

#878593

muted

#183367

accent

#c4c4ca

border

Dark Mode

#13111c

background

#13111c

surface

#ffffff

text

#a1a0ab

secondaryText

#a1a0ab

muted

Typography

Fonts

Inter

body
400
500
google-fonts

-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

IBM Plex Serif

heading
400
500
google-fonts

Georgia, Cambria, Times New Roman, serif, ui-serif, Georgia, Cambria, Times New Roman, Times, serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

Components

Design System

outline
outline
6px
#ffffff
Deploy →
primary
8px
#553f83#ffffff
Read customer stories →
secondary
6px
#ffffff#ffffff
element
box-shadow

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

element
box-shadow

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

element
box-shadow

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

element
box-shadow

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

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(180, 40, 180, 0.25) 0px 0px 6px 0px, rgba(102, 43, 223, 0.25) 0px 0px 16px 0px

gradient

linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05))...

gradient

linear-gradient(to top, rgb(49, 60, 60), rgba(40, 52, 52, 0))...

gradient

radial-gradient(73.46% 138.39% at 50.21% 0%, rgb(170, 10, 170) 50%, rgb(109, 29,...

Voice & Tone

Personality

Visual Energy

4/10

Design Era

contemporary-minimal

Emotional Tone

calm-confident

Target Audience

Software engineers, CTOs, and technical founders who value efficiency, reliability, and a frictionless deployment experience over flashy marketing.

Comparable Brands

Vercel
Linear
Stripe
Notion

Brand Rules

Dos & Don'ts

Do

  • Use Inter (weights 400, 500) for all body copy and IBM Plex Serif (weights 400, 500) for headings; strictly maintain sentence-case for all headings.
  • Apply a dark-mode-first aesthetic using Background #13111c and Text #ffffff; reserve Primary #1c1a28 for surface elements and Secondary #181622 for subtle layering.
  • Style primary CTA buttons with #553f83 background, #ffffff text, 8px border-radius, and a white border; use padding of 12px 24px.
  • Style secondary/outline buttons with transparent background, #ffffff text, 6px border-radius, and #33323e border; use padding of 10px 16px.
  • Implement subtle, multi-layered shadows on cards and interactive elements using rgba(65, 78, 166, 0.1) for a 127px spread glow effect to create depth without clutter.
  • Utilize linear gradients sparingly for background overlays or hero sections, specifically using linear-gradient(to top, rgb(49, 60, 60), rgba(40, 52, 52, 0)) for fade effects.
  • Maintain a base spacing unit of 2px; use small (6px), medium (12px), and large (28px) border radii consistently across UI components.
  • Use action-oriented imperative verbs in CTAs (e.g., 'Deploy →', 'Read customer stories →') with an arrow symbol for forward momentum.

Don't

  • Do not use title case or all-caps for headings; the brand strictly uses sentence-case to maintain a conversational yet professional tone.
  • Do not use emoji or exclamation marks in marketing copy; the brand relies on clarity and matter-of-fact language.
  • Do not use bright, high-saturation primary colors for backgrounds; avoid anything other than the deep purples (#1c1a28, #553f83) and near-blacks (#13111c).
  • Do not use serif fonts for body text; IBM Plex Serif is reserved exclusively for headings to create a distinct typographic hierarchy.
  • Do not use sharp, 0px corners; the brand uses rounded corners (min 6px) to soften the technical interface.
  • Do not use heavy, opaque drop shadows; shadows must be diffuse and colored (blue/purple tints) to blend with the dark theme.
  • Do not use light mode as the default or primary presentation; the brand identity is rooted in the dark, immersive aesthetic.

Design Assets

Visual Elements

TripAdvisor
svg300×46
Mercado Libre
svg120×49
G2X
svg300×109
Reducto
svg925×164
hud
svg738×332
Bilt
svg300×81
MGM Resorts
svg300×57
Switzerland Tourism
svg300×43
Design asset
webp2048×2048
Design asset
webp1440×1440

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/railway.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free