# Fly.io — Marketing Site Design Spec

> Source: fly.io (live DOM, computed styles), 2026-07-15 (desktop 1512px).
> Coverage: homepage (floating nav, illustrated hero, section headings, CTAs). Dashboard/console: behind login (`needs-dashboard`). Responsive: breakpoints not captured (desktop only).

## 1. Visual Theme & Atmosphere

Playful, warm and hand-crafted — a developer-platform brand that reads like a storybook rather than a terminal. The canvas is light: white fading into a soft tri-colour wash of sky, indigo and pink at low alpha. The hero is dominated by a big, whimsical **hand-drawn illustration** (a balloon mascot, a whale, boats, plants, little creatures) that flows across the page like a dream sequence. The headline is set in the **Mackinac serif** at a medium 500 weight with tight negative tracking, mixing roman and italic ("Run any code *fearlessly.*") and underlined with a hand-drawn purple squiggle. UI and body run in **Fricolage Grotesque**, a friendly grotesque, at an unusual 450 weight. Ink is a deep indigo `#281950`, and the one functional accent is a confident purple `#7c3aed` on fully-rounded pill buttons and a floating pill nav. It feels approachable and characterful — serious infra with a smile. Feels: playful, warm, illustrated, friendly.

## 2. Color Palette & Roles

### Surfaces (light)
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page background, cards |
| surface | `#f1f2f9` | Section wash / gradient top |
| lavender-line | `#e7e6f4` | Hairline borders, nav ring |
| deep | `#191034` | Deep footer / dark blocks |
| deep-2 | `#202237` | Dark UI text on light chips |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#281950` | Primary text, headings |
| ink-75 | `#281950` @ .75 | Body copy |
| muted | `#676b89` | Secondary / captions |
| faint | `#a39ac1` | Tertiary / placeholder |

### Accent (purple)
| Token | Hex | Role / usage |
|---|---|---|
| purple | `#7c3aed` | Primary accent, CTAs, links, underline |
| purple-500 | `#8b5cf6` | Hover / secondary purple |
| purple-light | `#ca7ff8` | Light accent / highlights |

### Illustration spectrum (hero art only)
| Token | Hex | Role |
|---|---|---|
| sky | `#7dd3fc` | Hero wash + art |
| indigo | `#a5b4fc` | Hero wash + art |
| pink | `#f9a8d4` | Hero wash + art |
| green | `#10b981` | Illustration |
| blue | `#3b82f6` | Illustration |
| amber | `#f59e0b` | Illustration |
| orange | `#f97316` | Illustration |

Rule: chrome is white + deep-indigo ink + one purple `#7c3aed`. The wider spectrum lives inside the hand-drawn illustration and the soft hero wash only.

## 3. Typography Rules

- Display: `Mackinac, Georgia, "Times New Roman", serif` — headlines + section titles, medium (500), roman + italic mix.
- Sans: `"Fricolage Grotesque", ui-sans-serif, system-ui, sans-serif` — body, UI, buttons (weight ~450).

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 74 | 500 | -2.88px (-4.5%) |
| Section (h2) | 36 | 500 | -0.9px |
| Body | 16–18 | 400 | normal |
| Button / UI | 14.5–15.5 | 450 | normal |
| Nav | 14.5 | 450 | normal |

Patterns: display is a SERIF (Mackinac) at 500 with tight negative tracking and an italic accent word; there is no bold-grotesque headline. Fricolage Grotesque handles UI at a soft 450 weight. Italic + hand-drawn underline is a signature emphasis.

## 4. Component Stylings

### Buttons
- **Primary (purple pill)**: bg `#7c3aed`, text `#ffffff`, radius `9999px` (full pill), height `48px`, padding `0 20px`, Fricolage 15.5/450, chevron.
- **Nav pair (joined pill)**: "Sign In" translucent (`#ffffff` @ .4, 1px `#ffffff` @ .9 border, radius `20px 8px 8px 20px`) butted against "Get Started" (purple `#7c3aed`, radius `8px 20px 20px 8px`); together they form one rounded segmented control, height `32px`.

### Inputs
- Not captured on homepage (console behind login) — `not captured`.

### Cards / panels
- White cards, soft radius (~12–16px), `#e7e6f4` hairline borders and gentle shadows; feature sections pair a Mackinac heading with Fricolage body.

### Nav
- A **floating rounded-full pill** container: white, `#e7e6f4` ring, soft shadow, holding the Fly.io balloon logo + wordmark and text links (Products, Docs, Customers, Pricing, Articles, Community, Status); the Sign In / Get Started joined pill sits to the right.

## 5. Layout Principles

- Centered hero: the big illustration spans full width behind/around a centered serif headline + sub + single purple pill CTA.
- Feature sections stack with a Mackinac heading, supporting Fricolage copy and small illustrations/spot art.
- Soft gradient background throughout; generous whitespace; footer on a deep-indigo block.

## 6. Depth & Elevation

- Radii: `9999px` for CTA pills, `~12–16px` for cards, `8/20px` asymmetric on the joined nav pair.
- Control height: 48px CTA / 32px nav.
- Soft, friendly elevation: gentle shadows and `#e7e6f4` hairlines over a light wash; the illustration provides most of the visual interest.

## 7. Motion

- Gentle, characterful: hover lifts/color on pills, and hand-drawn elements may have subtle float/parallax on scroll. Durations short. Animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- Light canvas built from stacked gradients: a vertical `linear-gradient(#f1f2f9,#ffffff,#ffffff)` plus soft angled tri-colour washes `linear-gradient(100deg, rgba(125,211,252,.1), rgba(165,180,252,.1), rgba(249,168,212,.1))` (sky→indigo→pink). Signature effect is the **large hand-drawn illustration** (mascot, whale, boats, plants) rendered as artwork, plus doodle accents (stars, squiggles) and the hand-drawn purple underline under the italic word. No blur/glass. WebGL `not captured`.

## 9. Do's and Don'ts

### Do
- Use a light canvas (white + a soft sky/indigo/pink wash) with deep-indigo `#281950` ink.
- Set headlines in the Mackinac serif at 500 with tight tracking and an italic accent word.
- Underline the emphasis word with a hand-drawn purple squiggle.
- Use Fricolage Grotesque at ~450 for all UI and body.
- Keep one functional accent, purple `#7c3aed`, on fully-rounded pill CTAs and a floating pill nav.
- Let a whimsical hand-drawn illustration and spectrum spot-art carry the personality.

### Don't
- Don't go dark or terminal-styled — Fly's marketing is light and illustrated.
- Don't set the headline in a bold grotesque; the display face is a medium-weight serif.
- Don't sharpen the buttons — CTAs are full pills.
- Don't spray the illustration spectrum as UI accents; keep chrome to ink + one purple.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Floating nav likely collapses to a menu; illustration scales/crops (pattern present, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / wash `#f1f2f9` · Text `#281950` · Muted `#676b89` · Border `#e7e6f4` · Accent purple `#7c3aed`
- Font: `Mackinac` serif display 500 (h1 64/-4.5%), `Fricolage Grotesque` body/UI 450 · Radius full-pill CTA / ~14px card · Button height 48px
- Hero wash: `linear-gradient(100deg, rgba(125,211,252,.1), rgba(165,180,252,.1), rgba(249,168,212,.1))` · italic word + hand-drawn purple underline

<fly-io_design_language>
Use the Fly.io design language: a light, playful canvas — white fading through a soft tri-colour wash (linear-gradient(100deg, rgba(125,211,252,.1) sky, rgba(165,180,252,.1) indigo, rgba(249,168,212,.1) pink)) — with deep-indigo #281950 ink (#676b89 muted, #a39ac1 faint) and #e7e6f4 hairlines. Headlines are set in the Mackinac SERIF at a medium 500 weight with tight negative tracking (-4.5% at 64px), mixing roman and ITALIC and underlining the emphasis word with a hand-drawn purple squiggle; body and UI run in Fricolage Grotesque at a soft 450 weight. The one functional accent is purple #7c3aed (#8b5cf6 hover, #ca7ff8 light) on fully-rounded pill CTAs (9999px, 48px) and a floating rounded pill nav, with a clever joined Sign In / Get Started segmented pill. Personality comes from a big whimsical HAND-DRAWN illustration (a balloon mascot, whale, boats, plants, little creatures) and doodle spot-art whose wider spectrum (#10b981, #3b82f6, #f59e0b, #f97316, #7dd3fc, #f9a8d4) stays inside the artwork — never as loose UI accents. Cards are white with ~14px radius, #e7e6f4 hairlines and gentle shadows. Feels: playful, warm, illustrated, friendly. Avoid: a dark/terminal look, a bold grotesque headline (the display is a medium serif), sharp-cornered buttons, or scattering the illustration spectrum around the UI.
</fly-io_design_language>