---
name: Fly.io
description: "The site is a strong example of balancing technical infrastructure messaging with a warm, playful, and human-centric visual language."
version: alpha

colors:
  background: "#f1f2f9"
  primary: "#202237"
  secondary: "#281950"
  tertiary: "#7c3aed"
  neutral: "#a39ac1"
  line: "rgba(231,230,244,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"

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

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

---

## Overview

A playful, developer-first cloud platform that makes infrastructure feel approachable and fast.

*A friendly neighborhood workshop for building and deploying code.*

## Colors

Soft, muted backgrounds with dark, high-contrast text and a single vibrant purple accent for primary actions.

- **Background (`#f1f2f9`)** — uses `bg` token
- **Primary text (`#202237`)** — uses `ink` token
- **Secondary text (`#281950`)** — uses `ink-soft` token
- **Accent (`#7c3aed`)** — uses `accent` token
- **Muted (`#a39ac1`)** — uses `muted` token
- **Borders (`rgba(231,230,244,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Display text uses a bold, slightly irregular grotesque for character.
- Body text is a clean, readable humanist sans-serif.
- Italic accents (like 'fearlessly') use a serif typeface for emphasis.
- Letter spacing is tight for large headlines, slightly loose for smaller text.

## Layout

Centered, single-column hero layout transitioning to a multi-column feature grid.

*Rhythm:* Generous vertical spacing between sections, with tight internal spacing for grouped elements.

## Elevation & Depth

- rgba(32,34,55,0.075) 0px 0px 0px 1px
- rgba(32,34,55,0.05) 0px 10px 15px -3px
- rgba(91,33,182,0.1) 0px 5px 5px -2px
- Borders: 1px solid rgba(231,230,244,1)

## Shapes

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

## Components

- **button:** Pill-shaped primary buttons with solid purple background and white text; secondary buttons are transparent with subtle borders.
- **card:** Subtle, borderless cards with soft shadows or grouped by proximity.
- **chip:** Not prominently featured; framework logos appear as icon badges.
- **input:** Not visible in screenshots; inferred to be clean, rounded inputs.
- **hero:** Large, centered headline with a prominent, whimsical illustration above it.

## Do's and Don'ts

**Don't:**
- Don't use a dark theme — screenshot shows a predominantly light, soft-purple tinted background.
- Don't use rigid, geometric illustrations — screenshot shows hand-drawn, whimsical, and organic line art.
- Don't use a single, stark accent color — screenshot shows a dominant purple but relies on a palette of muted pastels in illustrations.
- Don't use tightly packed, dense layouts — screenshot shows generous whitespace and clear visual separation.
- Don't use purely sans-serif typography — screenshot shows a serif face used for italic emphasis in headlines.
- Don't use sharp, hard-cornered UI elements — screenshot shows consistently rounded corners, often pill-shaped.

---

## System Prompt (paste into AI agent)

```
Fly.io is a developer-first cloud platform with a playful, approachable identity. Its design DNA is built on a soft, light-purple tinted background (#f1f2f9) with high-contrast dark ink text (#202237). A vibrant purple (#7c3aed) serves as the primary accent for calls to action. Typography mixes a bold, characterful grotesque sans for headlines with a clean humanist sans for body text, and a serif italic for emphasis. The aesthetic is defined by whimsical, hand-drawn illustrations and generous spacing. Key donts: avoid dark mode, avoid sharp corners, and avoid cold, corporate language. The layout is centered and spacious, prioritizing clarity and a friendly tone.
```