---
name: Railway
description: "Worth including for its successful blend of elegant serif typography with a modern, dark developer tool aesthetic."
version: alpha

colors:
  background: "#0b0b0f"
  primary: "#f7f7f8"
  secondary: "#6b7280"
  tertiary: "#6b1dbd"
  neutral: "#a1a0ab"
  bg-soft: "#13111c"
  bg-quiet: "#33323e"
  muted-soft: "#545260"
  line: "rgba(255, 255, 255, 0.086)"

typography:
  display:
    fontFamily: humanist-serif
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-0.5px"
  h2:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.25px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.625
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A dark-themed developer tool for deploying cloud infrastructure with calm confidence.

*The calm, dark cockpit of a modern jetliner*

## Colors

Deep, inky backgrounds create a serene canvas, allowing vibrant data visualizations and subtle purple accents to command attention.

- **Background (`#0b0b0f`)** — uses `bg` token
- **Primary text (`#f7f7f8`)** — uses `ink` token
- **Secondary text (`#6b7280`)** — uses `ink-soft` token
- **Accent (`#6b1dbd`)** — uses `accent` token
- **Muted (`#a1a0ab`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.086)`)** — uses `line` token

## Typography

- **Display:** humanist-serif
- **Body:** geometric-sans
- **Mono:** monospace

- Use humanist serif for display headlines to convey elegance and calm
- Use geometric sans for body text and UI elements for clarity
- Maintain generous negative letter-spacing for display headlines

## Layout

Centered single-column hero flowing into a 12-column grid for data visualizations and feature blocks.

*Rhythm:* 4px base unit with a standard 1.5 scale ratio, scaled up for generous whitespace

## Elevation & Depth

- 0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset
- 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset
- 0px 100px 191px rgba(62, 45, 45, 0.24)
- Borders: 1px solid rgba(255, 255, 255, 0.086)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary buttons are solid purple (#6b1dbd) with white text and rounded corners (4px). Secondary buttons are transparent with a subtle white border.
- **card:** Dark panels with a very subtle 1px border and no shadow, using the #13111c background.
- **chip:** Used for category labels, appearing as small, rounded rectangular pills with subtle borders.
- **input:** Dark background fields with a 1px border, maintaining the overall dark mode aesthetic.
- **hero:** Full-width dark section featuring a large serif headline, a sans-serif subtitle, and two primary action buttons centered over a subtle, dark atmospheric background.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated neon backgrounds — screenshot shows a deep, inky (#0b0b0f) background.
- Don't use playful, rounded sans-serif fonts for headlines — screenshot shows an elegant humanist serif.
- Don't use white as the primary background color — screenshot shows a dark mode interface.
- Don't use heavy drop shadows on cards — screenshot shows flat cards with subtle 1px borders.
- Don't use excessive primary colors — screenshot uses a restrained palette dominated by dark grays and a single purple accent.
- Don't use cluttered, dense grids — screenshot shows generous whitespace and clear separation between sections.

---

## System Prompt (paste into AI agent)

```
This is a dark-themed SaaS developer tool for cloud deployment. The design prioritizes a calm, refined aesthetic using deep inky backgrounds (#0b0b0f, #13111c) and a single high-chroma purple accent (#6b1dbd). Typography features a humanist serif for display headlines (IBM Plex Serif) and a geometric sans for body text (Inter). Critical design rules: Never use bright white backgrounds; maintain generous negative letter-spacing on serif headlines; keep card surfaces flat with subtle 1px borders rather than heavy shadows. The layout is centered and spacious, with a strict 4px spacing grid.
```