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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for