# Fly.io Brand Guidelines

> Logos, color, type & voice for Fly.io, with downloadable assets and a machine-readable API for agents. Official terms: https://docs.fly.io/about/brand

Structured version: /brand.json. Paths below are relative to this site.

## Logo

Default: the color landscape logo (/brand/logo-landscape.svg). Use monochrome on low-contrast backgrounds, portrait when space is tall, the brandmark only when tiny.

Layouts:
- Landscape Logo: The primary logo. Use it whenever there’s room.
- Portrait Logo: For tall or square spaces where the landscape logo won’t fit.
- Brandmark: The balloon on its own. Limited use: app icons, avatars, favicons.

Treatments:
- Color (for light backgrounds): Default. Full-color mark with navy wordmark, for light backgrounds.
- Inverted Color (for dark backgrounds): Full-color mark with white wordmark, for dark backgrounds.
- Dark (Monochrome) (for light backgrounds): Single-color navy, for light backgrounds where color would clash or print is one-color.
- Light (Monochrome) (for dark backgrounds): Single-color white, for photos and busy or low-contrast dark backgrounds.

Files (each also as .png & .zip):
- Color Landscape Logo: /brand/logo-landscape.svg
- Inverted Color Landscape Logo: /brand/logo-landscape-inverted.svg
- Dark (Monochrome) Landscape Logo: /brand/logo-landscape-dark.svg
- Light (Monochrome) Landscape Logo: /brand/logo-landscape-light.svg
- Color Portrait Logo: /brand/logo-portrait.svg
- Inverted Color Portrait Logo: /brand/logo-portrait-inverted.svg
- Dark (Monochrome) Portrait Logo: /brand/logo-portrait-dark.svg
- Light (Monochrome) Portrait Logo: /brand/logo-portrait-light.svg
- Color Brandmark: /brand/brandmark.svg
- Inverted Color Brandmark: /brand/brandmark-inverted.svg
- Dark (Monochrome) Brandmark: /brand/brandmark-dark.svg
- Light (Monochrome) Brandmark: /brand/brandmark-light.svg

Everything in one file: /brand/fly-brand-kit.zip

Clear space: Keep clear space on every side of at least ¼ of the logo’s height. No text, edges or other logos inside it.

Minimum size:
- Landscape Logo: 96 px wide on screen, 25 mm wide in print
- Portrait Logo: 48 px wide on screen, 13 mm wide in print
- Brandmark: 16 px wide on screen, 5 mm wide in print

Don’t:
- Recolor the logo, or swap its gradient for other colors.
- Stretch, squash, skew or rotate it.
- Add shadows, outlines, glows or other effects.
- Rearrange or resize the balloon relative to the wordmark.
- Retype the wordmark in another font.
- Place the color logo on busy photos or low-contrast backgrounds. Use a monochrome version.

## Balloon on Its Own

For square & round spaces where even the brandmark is too busy: social avatars, app & workspace icons. Files: /brand/balloon-square.svg, /brand/balloon-square.png (1024×1024).
Balloon box (% of square): left 29.4, top 19.3, width 41.1, height 61.1.
- Center the balloon in the square. It fills about 60% of the height & 40% of the width.
- Keep at least 19% of the square clear above & below the balloon, & 29% on each side.
- Use one flat field color. The default is balloon-lilac (#AD80EF), with the balloon in ink & white.
- It’s safe in a circular crop: the balloon sits inside the inner 75% of the circle.

Don’t:
- Scale the balloon up until it touches or crowds the edges.
- Put it on photos, gradients or busy illustration.
- Add the wordmark, a border or a second shape inside the square.

## Partner lockups

x = the height of the Fly.io balloon in the lockup.
- Separate the two logos by 1x. With a divider, leave ½x on each side of it.
- The divider is a 1 px line, 1x tall, in the logo’s own color at 30% opacity (ink on light, white on dark).
- Center both logos vertically on the same axis.
- Size the partner logo so it looks the same weight as the Fly.io logo: no taller than 1x, & no wider than the Fly.io logo.
- Keep ½x of clear space around the whole lockup.

Match formats: full logo next to full logo, symbol next to symbol. Use the brandmark only when every brand in the row is shown as a symbol.

Do:
- Use the color or monochrome treatment that suits the background, & give the partner the same treatment.
- Put Fly.io first (left) on Fly.io’s properties, & follow the partner’s lead on theirs.
- Get written approval for any co-branded material (see Usage Terms).

Don’t:
- Merge the logos into a single mark, or share a letter or shape between them.
- Let the partner logo dominate, or shrink Fly.io to fit.
- Use “+” or “&” glyphs as separators. Use space or a divider line.
- Imply a partnership or endorsement that hasn’t been agreed in writing.

## Color

Logo colors:
- logo-ink #24175B: Wordmark & outlines
- logo-indigo #5046E4: Balloon gradient, start
- logo-violet #996BEC: Balloon gradient, middle
- logo-lilac #BA7BF0: Balloon gradient, end

Core:
- navy #281950: Signature dark
- peacoat #171434: Deepest background
- droplet #C9DFFD: Cool highlight
- balloon-lilac #AD80EF: Field behind the lone balloon

navy (Primary text & dark surfaces.): 50 #F9F9FD, 100 #F4F3FB, 200 #E7E6F4, 300 #D4CEEA, 400 #A39AC1, 500 #756B93, 600 #564C73, 700 #42385F, 800 #282045, 900 #22183C, 950 #191034

violet (Accent: links, highlights & calls to action.): 50 #F5F3FF, 100 #EDE9FE, 200 #DDD6FE, 300 #C4B5FD, 400 #A78BFA, 500 #8B5CF6, 600 #7C3AED, 700 #6D28D9, 800 #5B21B6, 900 #4C1D95, 950 #2E1065

purple (Secondary accent, used sparingly.): 50 #FAF5FF, 100 #F6E7FF, 200 #EDD4FE, 300 #DFB2FC, 400 #CA7FF8, 500 #B54FF3, 600 #A02BE4, 700 #8919C9, 800 #731CA5, 900 #5D1985

gray (Cool neutrals for UI chrome, borders & muted text.): 50 #F8F9FC, 100 #F1F2F9, 200 #E1E4EF, 300 #CCD0E0, 400 #9698B6, 500 #676B89, 600 #4C4E67, 700 #373953, 800 #202237, 900 #121226

Status colors (one hue per state):
success (emerald · done & healthy): 50 #ECFDF5, 100 #D1FAE5, 200 #A7F3D0, 300 #6EE7B7, 400 #34D399, 500 #10B981, 600 #059669, 700 #047857, 800 #065F46, 900 #064E3B, 950 #022C22
info (blue · worth knowing): 50 #EFF6FF, 100 #DBEAFE, 200 #BFDBFE, 300 #93C5FD, 400 #60A5FA, 500 #3B82F6, 600 #2563EB, 700 #1D4ED8, 800 #1E40AF, 900 #1E3A8A, 950 #172554
warning (amber · needs attention): 50 #FFFBEB, 100 #FEF3C7, 200 #FDE68A, 300 #FCD34D, 400 #FBBF24, 500 #F59E0B, 600 #D97706, 700 #B45309, 800 #92400E, 900 #78350F, 950 #451A03
error (red · something failed): 50 #FEF2F2, 100 #FEE2E2, 200 #FECACA, 300 #FCA5A5, 400 #F87171, 500 #EF4444, 600 #DC2626, 700 #B91C1C, 800 #991B1B, 900 #7F1D1D, 950 #450A0A

### Gradients
- Balloon (logo-indigo → logo-violet → logo-lilac): Brand moments: the logo, avatars, a single hero accent. Never behind text. CSS: background: linear-gradient(135deg, #5046E4, #996BEC 55%, #BA7BF0);
- Violet CTA (purple-600 → transparent → indigo-600 over violet-600): The marketing call to action. At most one per page. CSS: background: linear-gradient(to bottom right, #A02BE4, transparent, #4F46E5) #7C3AED;
- Violet Dark (purple-800 → violet-800 → violet-900): Dark promo blocks & feature panels with white text. CSS: background: linear-gradient(to bottom right, #731CA5, #5B21B6, #4C1D95);
- Violet Pale (purple-50 → violet-100 → indigo-200 at 50%): Light panels & cards with navy text. CSS: background: linear-gradient(to bottom right, #FAF5FF, #EDE9FE, rgb(199 210 254 / 0.5));
- Pastel Sky (sky-300 → indigo-300 → pink-300): Thin accent lines & dividers. At 10% opacity, a soft section wash. Matches the hero skies. CSS: background: linear-gradient(to right, #7DD3FC, #A5B4FC, #F9A8D4);
- Scrim (navy-900 at 90% → 70% → 25%): Under text on images & illustrations. Rises from the edge the text sits on. CSS: background: linear-gradient(to top, rgb(34 24 60 / 0.9), rgb(34 24 60 / 0.7), rgb(34 24 60 / 0.25));

Mesh backgrounds (pure CSS; originals as WebP):
- Section (Large page sections behind navy text): /gradients/section.webp. CSS: background: radial-gradient(54% 66% at 5% 10%, #D2FCF3, transparent), radial-gradient(36% 42% at 65% 5%, #E6DCFE, transparent), radial-gradient(42% 54% at 95% 25%, #FED6F4, transparent), radial-gradient(48% 60% at 5% 85%, #FFD3F3, transparent), radial-gradient(30% 36% at 45% 100%, #E8E1FD, transparent), radial-gradient(48% 60% at 98% 80%, #D2FCF3, transparent), #FFFFFF;
- Machines (Product sections, light & airy): /gradients/machines.webp. CSS: background: radial-gradient(36% 66% at 5% 25%, #C5FFFA, transparent), radial-gradient(26% 36% at 42% 8%, #FDD9E3, transparent), radial-gradient(36% 54% at 82% 15%, #B6E2FE, transparent), radial-gradient(42% 54% at 10% 95%, #B9E5FF, transparent), radial-gradient(26% 36% at 55% 98%, #FDDDE6, transparent), radial-gradient(36% 54% at 95% 75%, #C5FFFA, transparent), #FFFFFF;
- Support (Help & support panels): /gradients/support.webp. CSS: background: radial-gradient(48% 60% at 15% 12%, #C8EBFF, transparent), radial-gradient(30% 42% at 55% 10%, #F3EDFD, transparent), radial-gradient(42% 54% at 92% 25%, #FFDAE4, transparent), radial-gradient(48% 60% at 5% 88%, #FFD8E2, transparent), radial-gradient(30% 36% at 45% 95%, #F1EEFD, transparent), radial-gradient(48% 60% at 90% 85%, #C8EBFF, transparent), #FFFFFF;

### Buttons
- Default: White, navy text, 1 px violet/12% border, inset 0 -3px 6px -2px navy-200; hover navy-50 with violet text
- Primary: Flat violet-600, white text, inset 0 -2px 6px violet-700; hover violet-700
- Secondary: violet-100, violet-600 text, soft violet inset; hover violet-200
- CTA: violet-600 under the Violet CTA gradient, faint light inner ring; one per page, marketing only
- Translucent: Transparent with a white sheen (7.5% → 20%) & white/25 border; for dark & image backgrounds
- Shape: Fully rounded, weight 450, 1 px border. Never a gradient on destructive or secondary buttons

Accessible pairings (WCAG 2):
- Body text on white: navy-900 #22183C on white #FFFFFF, 16.6:1
- Button label on violet: white #FFFFFF on violet-600 #7C3AED, 5.7:1
- Link on white: violet-700 #6D28D9 on white #FFFFFF, 7.1:1
- Body text on peacoat: navy-100 #F4F3FB on peacoat #171434, 16.1:1
- Link on peacoat: violet-400 #A78BFA on peacoat #171434, 6.5:1
- Muted text on gray-50: gray-500 #676B89 on gray-50 #F8F9FC, 4.9:1

## Typography

- Mackinac (Display): Headlines & section titles, in Medium (500) with tight tracking. Bold only for rare emphasis. Weights 500, 500 italic, 700, 700 italic. Commercial license. Web use on Fly.io properties only; ask the brand team before using it elsewhere.
- Fricolage Grotesque (Text): Body copy, UI labels, buttons & navigation. Variable weight 100–900. Weights 100–900. Served as a web font on Fly.io properties. Ask the brand team for desktop files.
- Fragment Mono (Code): Commands, code, file paths, hex values & technical labels. Weights 400, 400 italic. SIL Open Font License. Free to use anywhere.

Scale:
- 6.5xl: 64 px / 1.25, heading, Hero
- 5xl: 48 px / 1.25, heading, Page title
- 4xl: 36 px / 1.325, heading, Section title
- 2.5xl: 26 px / 1.325, heading, Subsection
- xl: 20.5 px / 1.6, sans, Lead paragraph
- base: 17 px / 1.6, sans, Body
- sm: 14.5 px / 1.6, sans, UI & captions
- xs: 12 px / 1.6, mono, Labels & metadata

Hero titles:
- Face: Mackinac Medium (500)
- Size: 48 px on phones, up to 72 px
- Tracking: −0.04em
- Leading: 1.1–1.15
- Color: #2e2e2e or navy-900; an optional violet-600 lead line
- Underline: 12 px tall, the full width of the phrase, sitting on the baseline. Gradient emerald-400 → violet-600, top to bottom.
Underline file: /brand/scribble-underline.svg
- Underline the payoff only: the last 1–4 words, the part that makes the claim.
- One underline per page, on the hero headline. Never on section titles or body copy.
- Wrap the phrase in an inline-block so the underline stretches to exactly its width.
- Keep the line short enough not to break; if the payoff wraps, rewrite the headline.
- Don’t recolor the gradient, animate it, or swap in a straight CSS underline.

Pairings:
- Page Hero (Landing pages & the top of any page that needs to sell.): Mackinac Medium, 48–72 px, tracking −0.04em, leading 1.1; Fricolage Grotesque Regular, 18–20 px, muted; Fricolage Grotesque Medium, 14.5 px, buttons
- Section Header (Breaking a long page into chapters.): Fricolage Grotesque Bold, 13 px, uppercase, tracking +0.05em, violet-600; Mackinac Medium, 26–36 px, tracking −0.025em; Fricolage Grotesque Regular, 17 px, muted
- Article (Blog posts & long-form writing.): Mackinac Medium, 36 px, tracking −0.025em; Fricolage Grotesque Regular, 14.5 px, byline; Fricolage Grotesque Regular, 17 px / 1.6, max 68 characters; Fragment Mono, 0.875 em, inline code
- Docs (Technical documentation, where scanning beats mood.): Fricolage Grotesque Semibold, 20 px (sans headings in docs); Fricolage Grotesque Regular, 17 px; Fragment Mono, 13 px, code block
- Product UI (Dashboards, tables & forms. No serif at all.): Fricolage Grotesque Semibold, 14.5 px, labels; Fricolage Grotesque Medium, 24 px, tabular figures; Fragment Mono, 12 px, IDs & regions
- On Dark (Peacoat & navy surfaces: footers, CTAs, terminals.): Mackinac Medium, white; Fricolage Grotesque Regular, navy-200; Fragment Mono, emerald-400 prompt

### Hierarchy
- Mackinac for headlines, Fricolage Grotesque for everything you read or click, Fragment Mono for anything you type or copy.
- One Mackinac headline per block. Use at most two Mackinac sizes in a single view.
- In docs & product UI, headings are Fricolage Grotesque Semibold. Mackinac is for marketing & editorial.
- Never use more than these three families, & never substitute another one to match a partner.

### Weights
- Mackinac: Medium (500) for every headline & section title. Bold (700) only for rare emphasis, & never italic.
- Fricolage Grotesque: Regular (400) for body, Medium (500) for buttons & labels, Semibold (600) for emphasis & UI headings.
- Fragment Mono: Regular only. Never bold mono; set it apart with color or a background instead.

### Size & Measure
- Body text is 17 px at 1.6 line height. Don’t go below 14.5 px for anything people read.
- Keep lines between 45 & 75 characters; 68 is the sweet spot.
- Headlines get tighter leading: 1.1 at 48 px & up, 1.25–1.3 below.
- Mackinac starts at 19 px. Below that, use Fricolage Grotesque.

### Case & Tracking
- Title Case for headings & buttons, sentence case for paragraphs & marketing sublines.
- Eyebrows & small labels: Fricolage Grotesque Bold, 11–13 px, uppercase, tracked +0.05em, in violet-600 or purple-600. Three words or fewer.
- Mackinac headings are tracked −0.025em (+0.025em word spacing) at every size; hero titles go to −0.04em. Never letterspace lowercase text.

### Numbers & Code
- Use tabular figures in tables, prices & anything that updates.
- Put a non-breaking space between number & unit: 100 GB, 500 ms, 8 vCPU.
- Inline code is Fragment Mono at 0.875em with a subtle background. Commands in blocks get a $ prompt that isn’t selectable.

### Color
- Headings are navy (#281950) on light & white on dark. Body text is navy-900 on light & navy-100 on dark; secondary text gray-500 or navy-400.
- Links are violet-700 (violet-400 on dark) & underlined in running text.
- No gradient text, no colored headlines beyond navy & white.

### Typesetting
- Curly quotes (“ ”, ’), real ellipses (…), en dashes for ranges (2–4), em dashes sparingly.
- Balance headlines & avoid widows: text-wrap: balance for headings, pretty for paragraphs.
- Let the browser render real italics & bolds from the font files. Never fake them with transforms or strokes.

## Code & terminals

- Surface: navy-900, 12 px radius, 1 px inset ring of white at 10%, small shadow
- Title bar: white at 5% with a white/10 bottom border; three 10 px navy-600 dots
- Pills: Fragment Mono 10 px, uppercase, tracked; active is emerald-400/15 with emerald-300 text
- Type: Fragment Mono 13–14 px, leading 1.6
- Comments: Their own line, # in navy-400, never selectable
- Commands: emerald-400 $, white first word, navy-100 arguments; the whole line copies
- Tabs: Mono uppercase pills above the block; active is violet-600 with white text

Syntax colors:
- Prompt: emerald-400 #34D399
- Command: white #FFFFFF (First word of a command, medium weight)
- Keyword: violet-300 #C4B5FD
- Function & type: sky-300 #7DD3FC
- String: emerald-300 #6EE7B7
- Variable & literal: amber-300 #FCD34D
- Comment: navy-400 #A39AC1
- Plain text: navy-100 #F4F3FB

- Terminals & code blocks are always navy-900, even in light mode.
- Every command is real & runnable. Don’t abbreviate or fake output.
- Explain steps with # comment lines, not prose between blocks.
- Make each command copyable on its own, without the $ prompt.
- Offer platform variants (macOS / Linux, Windows) when the commands differ.
- Only the syntax colors above; no theme-specific highlighting.

## Imagery

Illustrations by Annie Ruygt (https://annieruygtillustration.com/).

Editorial Illustrations: Full-bleed scenes for blog covers, launches & social cards. Saturated color, visible texture, characters with opinions.
Spot Illustrations: Single characters or objects on a transparent background. For docs, empty states & feature callouts.

Illustrations (newest first; each also at -800.webp; all in /imagery/fly-imagery.zip):
- Ollama Connector (hero, 2026-10): /imagery/ollama-connector.webp, 1600×404. Fluffy llamas surf on floating boards through a bright blue sky past white clouds & balloons.
- Startups (hero, 2026-10): /imagery/startups.webp, 1600×1300. A pastel sky over rolling psychedelic hills, trees & a laptop, with a small Fly.io balloon.
- Night Sky (hero, 2026-09): /imagery/night-sky.webp, 1600×404. Purple patterned balloons drift past a crescent moon above a dark field & a small pixel creature.
- Benchmark (hero, 2026-09): /imagery/benchmark.webp, 1600×900. Winged server towers rise into a violet-to-peach sky, with paper planes overhead & a fox perched on one.
- Onboarding (hero, 2026-09): /imagery/onboarding.webp, 1600×933. A pink sky over colorful hills, trees & a laptop, with a smiling Fly.io balloon.
- Pricing (hero, 2026-09): /imagery/pricing.webp, 1600×434. A smiling server carried by a balloon floats through a light blue sky with clouds.
- Default Banner (hero, 2026-08): /imagery/default-banner.webp, 1600×435. Hot-air balloons carry servers, a Postgres elephant & a sunglasses-wearing machine through a cloudy sky.
- Computers Compared (hero, 2026-08): /imagery/computers-compared.webp, 1600×1200. A smiling server hangs from a balloon in a pale blue sky, scattering bits of data.
- Connectors (hero, 2026-08): /imagery/connectors.webp, 1600×792. A band of characters along the bottom: a rocket, a snake, a robot, a ghost & a red planet, on a transparent sky.
- Run Agent Code (hero, 2026-08): /imagery/run-agent-code.webp, 1600×308. A violet space city of glass domes, server towers & spaceships under planets & stars.
- Homepage (hero, 2026-07): /imagery/homepage.webp, 1600×1300. A winged server carries birds & small machines through a pastel sky trailing colorful ribbons.
- Clouds (hero, 2026-07): /imagery/early-access-clouds.webp, 1600×1200. Soft, painterly clouds in a blue & pink sky.
- Whack-a-Mole (editorial, 2026-09): /imagery/whack.webp, 1525×888. Pink moles pop out of holes in a green field while a wooden mallet swings down.
- Swirl (editorial, 2026-07): /imagery/swirl.webp, 1600×908. A hot-air balloon drifts over a hilltop town & a compass rose, beneath a starry black circle in a pale mint sky.
- Toolbox Turnout (editorial, 2026-07): /imagery/toolbox-turnout.webp, 1525×855. A green creature and a smiling Fly.io balloon float above the Earth in a pink, cloudy sky.
- Building Agents (editorial, 2026-06): /imagery/building-agents.webp, 1525×855. A purple robot with long tentacle arms presses buttons, one labeled delete, on floating islands.
- Local LLM (editorial, 2026-03): /imagery/local-llm.webp, 1525×855. Green creatures explore planets, moons & a rocket in a black-and-white comic-style space scene.
- Context Engineering (editorial, 2026-02): /imagery/context-engineering.webp, 1525×855. A green creature sits beside a giant book labeled CLAUDE.md on a bright green background.
- Agent Swarms (editorial, 2026-02): /imagery/agent-swarms.webp, 1600×828. A humanoid robot watches a line of robots, arm in arm & carrying cans, cross a blue landscape.
- Untrusted (editorial, 2026-02): /imagery/untrusted.webp, 1459×826. Green creatures & tiny worlds sealed inside glass domes on a dark background.
- Moltbot (editorial, 2026-01): /imagery/moltbot.webp, 1525×855. A red creature naps beside an open laptop & toolboxes in a cozy room.
- Starry Containers (editorial, 2026-01): /imagery/starry-containers.webp, 1600×827. A Van Gogh–style swirling night sky with hot-air balloons, a crescent moon & glowing stars over a sleeping town.
- Litestream VFS (editorial, 2026-01): /imagery/litestream-vfs.webp, 1525×855. A garden hose sprays water at a grinning purple canister under a sunny pink sky.
- Sprites (editorial, 2026-01): /imagery/sprites.webp, 1525×855. Green & purple server characters with lightbulb heads stroll together on a pale green background.
- Runway (spot, 2026-10): /imagery/startups-runway.webp, 1508×1362. A ghost & a yellow bird sit on top of a round, rocky hill.
- Apply (spot, 2026-10): /imagery/startups-apply.webp, 1564×1102. A Fly.io balloon character hugs a filing cabinet connected by cables to laptops & a phone.
- How It Works (spot, 2026-10): /imagery/startups-how-it-works.webp, 1377×1102. Paper planes made of documents fly up a staircase of steps toward a white bird.
- Preferred Cloud (spot, 2026-09): /imagery/preferred-cloud.webp, 800×712. A grumpy orange ball scowls next to a cheerful Fly.io balloon.
- Agent Sandboxes (spot, 2026-08): /imagery/agent-sandboxes.webp, 1377×1102. A grey computer tower with round glasses chats on the phone while typing on a laptop.
- What Is a Sandbox (spot, 2026-08): /imagery/what-is-a-sandbox.webp, 1537×775. A small creature sleeps curled up on a fluffy cloud.
- Warm Pool (spot, 2026-07): /imagery/warm-pool.webp, 1535×1024. Smiling server cubes relax together in a round hot tub.
- Campfire Apps (spot, 2026-05): /imagery/campfire-apps.webp, 1600×957. App-block characters sit in camp chairs around a campfire in a forest at night.
- Hermes (spot, 2026-05): /imagery/hermes.webp, 1600×611. A black Greek vase painted with a golden figure, sprouting leafy branches.
- Open Claw (spot, 2026-04): /imagery/open-claw.webp, 1600×574. Three round red bird-like creatures walk in a line, the biggest in front.
- Coding Agents (spot, 2026-07): /imagery/coding-agents.webp, 600×600. A rabbit types on a laptop inside a tilted blue box, next to a checklist.
- Personal Agents (spot, 2026-07): /imagery/personal-agents.webp, 600×600. A small character sleeps in a cozy blue bed.
- MCP Servers (spot, 2026-07): /imagery/mcp-servers.webp, 600×600. A blue cube, a browser window & a signed document float together.
- Untrusted Code (spot, 2026-07): /imagery/untrusted-code.webp, 600×600. A purple safe with a combination dial.
- Agent-Built Apps (spot, 2026-07): /imagery/agent-built-apps.webp, 600×600. A stone block carved with the letter A, chipped at the base.

Do:
- Use the newest illustrations first, starting with the landing heroes. Older watercolor pieces read as dated.
- Put hero headlines in the open sky. The heroes are drawn with characters at the edges to leave room for them.
- Let one illustration lead a layout. Pair it with plenty of quiet space & Mackinac headlines.
- Crop editorial scenes from the edges, keeping the main character inside the center 80%.
- Place spot illustrations on white, navy-50 or peacoat. They’re drawn to sit on flat color.
- Write alt text that describes the scene, not the post: who’s doing what, & where.

Don’t:
- Recolor, filter, tint or add effects to an illustration.
- Mix illustration styles in one layout, or put illustrations next to stock photos.
- Stretch, flip or rotate an illustration, or crop through a character.
- Use illustrations to explain architecture. Draw a diagram instead.
- Use a scene for a different subject than it was drawn for without checking with the brand team.

### Text on images
1. Text Beside the Image: The default. Image & text sit side by side or stacked, so neither fights the other. Works with every illustration.
2. Text in Open Space: Only where the scene has a calm area, like an empty sky. Navy text on light areas, white on dark. Never over characters.
3. Text on a Scrim: For busy scenes that must carry text. A peacoat gradient rises from the edge the text sits on, & the text goes on the gradient.

- Contrast: at least 4.5:1 for body text & 3:1 for headlines, measured against the busiest part of the image behind the text.
- Type: Mackinac Medium for headlines, Fricolage Grotesque for supporting text. Up to 2 lines of headline, 1 of support.
- Color: white or navy-900 only. No violet text, outlines or drop shadows on images; use a scrim instead.
- Placement: align text to an edge, never centered over the subject. Keep a margin of at least 6% of the image width.
- Logo: one corner, with its clear space. Inverted or light logo on dark areas, color or dark logo on light areas.
- One message per image. If you need a paragraph, use Text Beside.

Scrim CSS:
```css
.scrim {
  position: relative;
}
.scrim img {
  display: block;
  width: 100%;
  height: auto;
}
/* Gradient over the image, rising from the edge the text sits on */
.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(23 20 52 / 0.92) 0%,   /* peacoat */
    rgb(23 20 52 / 0.6) 35%,
    rgb(23 20 52 / 0) 65%
  );
}
/* Text on top of the gradient */
.scrim-text {
  position: absolute;
  z-index: 1;
  inset-inline: 6%;
  bottom: 6%;
  color: #fff;
}
```

## Voice

Grounded in 79 fly.io blog posts (2023–2026). “Do” lines are real quotes.

### Lead With the Point
Open on a flat claim or a scene, not a preamble. The first sentence should be one a reader could argue with.
Do: “Public cloud billing is terrifying.” (Accident Forgiveness, 2024-08)
Don’t: “In today’s fast-paced cloud landscape, developers face a growing number of challenges.”

### Plain Words, Earned Claims
Say what it does & what it costs. Across 79 posts there’s not one “excited to announce”, “cutting-edge”, “world-class” or “blazing”. If a claim needs an adjective, it needs a number instead.
Do: “We just lowered the prices on NVIDIA L40s GPUs to $1.25 per hour.” (We’re Cutting L40S Prices In Half, 2024-08)
Don’t: “We’re excited to announce blazing-fast, world-class GPU solutions!”

### Concrete & Clever
Tell the story, then land on specifics: timestamps, commands, numbers, code. Clever openings are welcome as long as they arrive somewhere real.
Do: “On September 1, 2024, at 3:30PM EST, a new Fly Machine came up…” (Corrosion, 2025-10)
Don’t: “Recently, we experienced some issues with parts of our infrastructure.”

### Own It When You’re Wrong
Say “we were wrong” in those words, with the specifics, & say what changes. No euphemisms like “evolving our strategy”.
Do: “We were wrong about Javascript edge functions, and I think we were wrong about GPUs.” (We Were Wrong About GPUs, 2025-02)
Don’t: “We’ve decided to evolve our GPU strategy to better serve our customers.”

### Say When You’re Selling
Readers know a company blog sells things. Name the pitch out loud, then make the argument on its merits.
Do: “Obviously, I’m trying to sell you something here. But that doesn’t make me wrong.” (Code And Let Live, 2026-01)
Don’t: “Fly.io is simply the best choice for every workload.”

### Fair to Competitors, Then Blunt
Give other tools real credit, then give a clear verdict. No sneering at “legacy clouds”.
Do: “Consul is fantastic software. Don’t build a global routing system on it.” (Corrosion, 2025-10)
Don’t: “Unlike clunky legacy clouds, Fly.io actually works.”

### Funny, Scaled to the Stakes
Humor & the occasional swear are house style in bylined posts; the blog’s own rules tell writers to swear. When customers were actually hurt, drop the jokes & say why.
Do: “Had this been an impactful attack, we would not be this flippant about it.” (Kurt Got Got, 2025-10)
Don’t: “Oopsie! Our database took a little nap today 😴”

### A Person Wrote This
Write in first person under a real byline: “we” for the company, “I” for the author. Use contractions (77 of 79 posts do). In tutorials, bring the reader along.
Do: “Let’s implement an API token together.” (Macaroons Escalated Quickly, 2024-01)
Don’t: “In this article, the implementation of an API token will be demonstrated.”

### Tone by context
- Launches: Show it working first (a terminal transcript, a screenshot), then argue for it. e.g. “Obviously, I’m trying to sell you something here. But that doesn’t make me wrong.” (Code And Let Live)
- Deep Dives: Story-driven & specific. Real timestamps, real code, opinions about both. e.g. “Consul is fantastic software. Don’t build a global routing system on it.” (Corrosion)
- Bad News & Incidents: Ownership first, reassurance in plain words, humor only in proportion to the harm. e.g. “If you’re using Fly GPU Machines, don’t freak out; we’re not getting rid of them.” (We Were Wrong About GPUs)
- Pricing: The number first, then a candid reason for it. e.g. “Charging you for stuff you didn’t want is bad business.” (Accident Forgiveness)
- Docs & Product UI: Same plain words, none of the jokes or swearing. Instructions in second person, verbs first, & errors that say how to fix them.

### Product names
- Fly.io: The company & platform. Capital F, lowercase io, with the dot. Bare “Fly” for the brand is rare; avoid it.
- Fly Machines: The VM product. Capital M when it means the product (“a Fly Machine”, “Machines”); lowercase only for generic VMs. Never “Fly machine”.
- Sprites: Persistent Linux computers for agents. Capitalized in prose (“a Sprite”); lowercase only in commands like `sprite create`.
- Managed Postgres: “Fly Managed Postgres” in product copy, “Managed Postgres” on second reference. “MPG” is fine in technical posts once it’s introduced.
- flyctl: The CLI’s name, always lowercase. The command you type is `fly`, so write `fly deploy`, not `flyctl deploy`.

## Usage terms

Allowed:
- Informational articles, blog posts & documentation about Fly.io
- Video tutorials, talks & related media
- Integration pages & “Deploy on Fly.io” buttons, linking to https://fly.io

Not allowed:
- T-shirts, stickers or any other merchandise, at any time
- Anything that implies Fly.io sponsors or endorses you without a written agreement
- Anything that could harm Fly.io’s reputation or ties it to illicit activity

- Use on a web page should link to https://fly.io.
- All goodwill from use of the brand accrues to Fly.io, Inc.
- Other uses need written authorization from Fly.io.