Typography
Typography
A characterful serif for headlines, a friendly grotesque for everything you read, & a mono for everything you type.
Display
Mackinac
Computers for agents
Headlines & section titles, in Medium (500) with tight tracking. Bold only for rare emphasis.500 · 500 italic · 700 · 700 italic
Text
Fricolage Grotesque
Run your app close to your users.
Body copy, UI labels, buttons & navigation. Variable weight 100–900.100–900
Code
Fragment Mono
fly launch && fly deploy
Commands, code, file paths, hex values & technical labels.400 · 400 italic
Mackinac & Fricolage Grotesque are licensed for Fly.io’s own web properties. Fragment Mono is open source: get it from Google Fonts.
Type Scale
The same scale fly.io uses. Body text is 17 px, not 16: the extra pixel buys a lot of comfort.
- 6.5xl64 px / 1.25Hero
Computers for agents
- 5xl48 px / 1.25Page title
Computers for agents
- 4xl36 px / 1.325Section title
Computers for agents
- 2.5xl26 px / 1.325Subsection
Your app runs on hardware-isolated VMs, close to your users.
- xl20.5 px / 1.6Lead paragraph
Your app runs on hardware-isolated VMs, close to your users.
- base17 px / 1.6Body
Your app runs on hardware-isolated VMs, close to your users.
- sm14.5 px / 1.6UI & captions
Your app runs on hardware-isolated VMs, close to your users.
- xs12 px / 1.6Labels & metadata
fly deploy --remote-only
Hero Titles
The one place type gets a flourish: a hand-drawn underline under the payoff of a page’s main headline.
Sandboxesaren’t enough
Works with your agent.Yes, that one too.
- 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.
- File
- 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
Where the three faces meet. Pick a layout to see it in live type, with every layer labeled.
Computers for agents
Give your agent a real Linux computer that sleeps when idle & wakes up right where it left off.
- 1Mackinac Medium, 48–72 px, tracking −0.04em, leading 1.1
- 2Fricolage Grotesque Regular, 18–20 px, muted
- 3Fricolage Grotesque Medium, 14.5 px, buttons
Fly Machines
Boot in under a second
Machines start fast enough to run one per request, & stop when the work is done.
- 1Fricolage Grotesque Bold, 13 px, uppercase, tracking +0.05em, violet-600
- 2Mackinac Medium, 26–36 px, tracking −0.025em
- 3Fricolage Grotesque Regular, 17 px, muted
Litestream, writable
By the Fly.io team · Jan 29, 2026 · 6 min read
SQLite is a file, & files are easy to copy. The hard part is copying it while it’s being written to. Point litestream at your database & it streams every change to object storage, a few hundred milliseconds behind.
- 1Mackinac Medium, 36 px, tracking −0.025em
- 2Fricolage Grotesque Regular, 14.5 px, byline
- 3Fricolage Grotesque Regular, 17 px / 1.6, max 68 characters
- 4Fragment Mono, 0.875 em, inline code
Deploy your first app
Run this from the directory with your app’s source code. It detects the framework & writes a fly.toml.
$ fly launch- 1Fricolage Grotesque Semibold, 20 px (sans headings in docs)
- 2Fricolage Grotesque Regular, 17 px
- 3Fragment Mono, 13 px, code block
- 1Fricolage Grotesque Semibold, 14.5 px, labels
- 2Fricolage Grotesque Medium, 24 px, tabular figures
- 3Fragment Mono, 12 px, IDs & regions
Ready when you are
Sign up, install flyctl, & launch from your terminal.
$ curl -L https://fly.io/install.sh | sh- 1Mackinac Medium, white
- 2Fricolage Grotesque Regular, navy-200
- 3Fragment Mono, emerald-400 prompt
Setting type on illustrations? See Text on Images.
Hierarchy4 rules
- 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.
Weights3 rules
- 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 & Measure4 rules
- 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 & Tracking3 rules
- 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 & Code3 rules
- 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.
Color3 rules
- 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.
Typesetting3 rules
- 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.