Fly.io
A developer deployment platform with a distinctive dark canvas (#1A1A2E deep navy-dark) and Fly's signature brand palette that moves through electric purple (#7C3AED), hot pink, and neon green — a bold, playful combination that positions Fly as the anti-corporate cloud. The marketing site uses expressive illustrations of servers and global networks with a graphic novel aesthetic. The dashboard is more functional — dark surfaces, CLI-first philosophy, and a global deployment map showing where your machines are running. Typography uses Inter at developer-comfortable sizes. The brand communicates: we're nerds who love Elixir and distributed systems, and so are you.
Color Tokens
version: alpha name: Fly.io description: "A developer deployment platform with a distinctive dark canvas (#1A1A2E deep navy-dark) and Fly's signature brand palette that moves through electric purple (#7C3AED), hot pink, and neon green — a bold, playful combination that positions Fly as the anti-corporate cloud. The marketing site uses expressive illustrations of servers and global networks with a graphic novel aesthetic. The dashboard is more functional — dark surfaces, CLI-first philosophy, and a global deployment map showing where your machines are running. Typography uses Inter at developer-comfortable sizes. The brand communicates: we're nerds who love Elixir and distributed systems, and so are you."
colors: primary: "#7C3AED" on-primary: "#ffffff" primary-hover: "#6D28D9" secondary: "#F0047F" accent-green: "#00FF85" ink: "#E4E4E7" ink-muted: "#71717A" canvas: "#1A1A2E" surface-1: "#212140" surface-2: "#292950" border: "#383860" machine-running: "#00FF85" machine-stopped: "#EF4444" machine-starting: "#F59E0B" region-active: "#7C3AED"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.05 letterSpacing: -0.03em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 2px 8px rgba(0,0,0,0.4)" elevated: "0 4px 24px rgba(0,0,0,0.5)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.16, 1, 0.3, 1)
1. Visual Theme & Atmosphere
Fly.io is the platform for developers who've outgrown Heroku and don't want AWS complexity. The brand identity is unusual for infrastructure: playful, nerdy, opinionated. The purple/pink/green palette is vibrant in marketing contexts and used more subtly in the product dashboard. The world map showing your deployed machines is the signature product visual — green dots across global regions, each one a running machine. The philosophy is fly.toml and a CLI first, dashboard second.
2. Color System
Dark marketing:
- Canvas: #1A1A2E — deep navy, darker and warmer than pure black
- Purple: #7C3AED — primary brand, buttons, active states
- Hot pink: #F0047F — secondary accent, gradient partner, highlights
- Neon green: #00FF85 — machine running status, healthy indicators, success
Dashboard:
- Same dark canvas, surface layers shift navy-dark
- Machine status: green (running), red (stopped), amber (starting/stopping)
- Region dots: purple for your regions, gray for available regions
3. Typography
Inter at 800 for display marketing copy — aggressive weight matching the brand energy. Dashboard uses 400/14px for functional density. CLI output is always monospaced. Documentation favors code examples prominently.
4. Components & Patterns
- World map: SVG global projection, dots for available regions, colored for your deployments
- Machine list: Machine name, region flag, status dot, CPU/memory bar, age
- App card: App name, machine count, volume, last deployed
- Logs panel: Real-time streaming terminal output, dark with colored log levels
- Deployment status: Purple progress bar with stage labels (building / deploying / healthy)
- flyctl commands: Prominently shown on empty states — "fly launch" to start
5. Spacing & Layout
Dashboard: 220px sidebar, content max 1200px. World map: full-width panel at 300px height. Machine list: table layout with 8px row padding. Marketing: 1280px max, sections use generous 96px+ vertical padding.
6. Motion & Interaction
World map dots pulse on region with active deployment. Machine status changes animate the status dot color. Deployment log streams in real-time. The map can zoom to a specific region on click. Active machine count increments with a number animation.