Railway

## Overview

Railway's design exudes a sophisticated, cosmic developer experience with deep space aesthetics. The interface feels premium and technical, balancing dark themes with clean typography to create a sense of advanced cloud infrastructure. The design density is moderate, allowing for focused work while maintaining visual interest through subtle gradients and carefully chosen accent colors.

Railway employs a centered max-width container approach with generous whitespace. The layout uses a 24px base grid system with consistent 16px and 24px spacing between major sections. Navigation follows a standard top-bar pattern, while the main content uses a single-column layout with strategic use of cards and panels.

Uses a 4px base grid with scale: 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 32.

## Colors

### Dark Theme
- **Cosmic Slate** (#33323e): Main background color for dark surfaces and containers
- **Starlight Gray** (#f7f7f8): Light background areas and content surfaces
- **Text Primary** (#ffffff): Primary text color on dark backgrounds
- **Deep Space** (#0b0b0f): Primary text color on light backgrounds
- **Asteroid Gray** (#a1a0ab): Secondary and muted text content
- **Nebula Purple** (#853bce): Primary brand color for buttons and accents
- **Border Default** (#545260): Default border color for components
- **Surface Dark** (#13111c): Darker surface areas and overlays

### Light Theme
- **Background Primary** (#ffffff): Main background color for light surfaces
- **Starlight Gray** (#f7f7f8): Secondary background areas
- **Deep Space** (#0b0b0f): Primary text color on light backgrounds
- **Cosmic Slate** (#33323e): Secondary text content
- **Asteroid Gray** (#a1a0ab): Muted and tertiary text
- **Nebula Purple** (#853bce): Primary brand color for interactive elements
- **Border Default** (#dcdce0): Default border color for light theme
- **Surface Elevated** (#ffffff): Elevated surfaces and cards

## Typography
- **Headline Font**: Inter
- **Body Font**: Inter
- **Label Font**: Inter
- **Code Font**: JetBrains Mono

Railway's typography hierarchy is built on Inter as the primary typeface, creating a clean and modern developer-focused aesthetic. The system uses a restrained weight palette, primarily 400 and 500 weights, with 600 reserved for emphasis. Font sizes follow a logical scale from 11px captions to 24px headings, with consistent 1.625 line-height ratios. JetBrains Mono serves as the monospace font for code content. Letter-spacing is minimal, with slight negative tracking (-0.22px) only on the smallest caption text to improve readability.

## Elevation

The design uses subtle shadows and layered surfaces to create depth without overwhelming the cosmic theme. Primary elevation is achieved through color contrast between dark backgrounds (#33323e) and lighter surfaces (#f7f7f8), with minimal shadow usage. The interface relies more on border contrast and color differentiation than heavy drop shadows.

## Components
- **Hero Section**: Large cosmic background with centered content, featuring main heading, subtitle, and primary action buttons
- **Navigation Bar**: Top navigation with logo, menu items, and authentication actions using consistent spacing and typography
- **Dashboard Interface**: Dark-themed dashboard with sidebar navigation, main content area, and status indicators
- **Button Components**: Primary and secondary buttons with purple accent colors, consistent border radius, and hover states
- **Card Components**: Content cards with subtle borders, consistent padding, and dark/light theme variations
- **Status Indicators**: Deployment status and system health indicators with color-coded states and clear typography

## Do's and Don'ts
- Do use the purple primary color (#853bce) sparingly for key interactive elements and brand moments
- Don't mix warm and cool grays - stick to the established neutral palette
- Do maintain consistent 4px border radius across all components for visual harmony
- Don't use font weights heavier than 600 to preserve the clean, technical aesthetic
- Do ensure sufficient contrast between text and backgrounds, especially in dark theme
- Don't break the 4px-based spacing system - always use multiples of the base unit
- Do use JetBrains Mono exclusively for code content to maintain consistency
- Don't add unnecessary shadows or effects that compete with the cosmic background imagery