Fly.io design system

What font does Fly.io use?

Fly.io’s website uses Mackinac for headings and Fricolage Grotesque for body text. Mackinac is not on Google Fonts; the closest free match is Figtree; Fricolage Grotesque is not on Google Fonts; the closest free match is Figtree.

Fly.io colour palette

Fly.io’s home page is light (#F4F6EB background, #686082 text) and uses #7C3AED for its main actions. Its palette: #FFFFFF, #F4F6EB, #F4F3FB, #191034, #686082, #000000.

• #FFFFFF
  77.1% · backgrounds
• #F4F6EB
  5.8% · backgrounds
• #F4F3FB
  5.5% · backgrounds
• #191034
  4.3% · backgrounds
• #686082
  3.3% · text
• #000000
  2.4% · text
• #2E2E2E
  0.5% · text
• #7C3AED
  0.4% · backgrounds, text
• #A39AC1
  0.2% · text
• #D5CFEF
  0.2% · lines

Type scale

Each size the page sets text in, with its weight and line height. Fly.io’s largest type is 72px at weight 500.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px, 80px.

Corner radii: 6px, 8px, 10px, 16px, 20px, pill. 4 shadow levels measured.

What makes Fly.io look like Fly.io

Almost entirely neutral: 99% of the page is painted in #FFFFFF and #F4F6EB.

#7C3AED is an accent: 0.4% of the page, as small fills such as buttons and badges. Keep it to small areas.

#6EE7B7 is an accent: 0.1% of the page, used for text only. Don't fill large areas with it.

The largest type (72px Mackinac) is medium weight, not bold (500), tracked to -0.02em.

Fly.io DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Fly.io’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Fly.io’s product, so use your own name, words and images.

Download Fly.io DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Fly.io’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;500;600&display=swap");

:root {
  --color-background: #F4F6EB; /* Background */
  --color-surface: #FFFFFF; /* Surface */
  --color-text: #686082; /* Text */
  --color-border: #D5CFEF; /* Border */
  --color-action: #7C3AED; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #281950; /* Link */
  --color-positive: #6EE7B7; /* Positive */
  --color-f4f3fb: #F4F3FB; /* 5.5% of the page, as fills */
  --color-191034: #191034; /* 4.3% of the page, as fills */
  --font-body: "Fricolage Grotesque", "Figtree", sans-serif; /* Fricolage Grotesque on the site; Figtree renders */
  --font-display: "Mackinac", "Figtree", sans-serif; /* Mackinac on the site; Figtree renders */
  --type-display-large: 72px; /* Display Large, weight 500 */
  --type-display-large-leading: 68.4px;
  --type-display-large-tracking: -0.02em;
  --type-display-medium: 48px; /* Display Medium, weight 500 */
  --type-display-medium-leading: 60px;
  --type-display-medium-tracking: -0.025em;
  --type-display-small: 36px; /* Display Small, weight 500 */
  --type-display-small-leading: 41.4px;
  --type-display-small-tracking: -0.02em;
  --type-headline: 24px; /* Headline, weight 500 */
  --type-headline-leading: 27.6px;
  --type-headline-tracking: -0.02em;
  --type-title-large: 20.5px; /* Title Large, weight 325 */
  --type-title-large-leading: 27.675px;
  --type-title-small: 19px; /* Title Small, weight 325 */
  --type-title-small-leading: 28.5px;
  --type-body-1: 17px; /* Body 1, weight 325 */
  --type-body-1-leading: 25.5px;
  --type-body-2: 16px; /* Body 2, weight 325 */
  --type-body-2-leading: 24px;
  --type-body-3: 15.5px; /* Body 3, weight 450 */
  --type-body-3-leading: 23.25px;
  --type-body-4: 15px; /* Body 4, weight 450 */
  --type-body-4-leading: 22.5px;
  --type-body-5: 14.5px; /* Body 5, weight 450 */
  --type-body-5-leading: 24px;
  --type-label: 12px; /* Label, weight 575 */
  --type-label-leading: 18px;
  --type-label-tracking: 0.05em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-25: 100px;
  --space-30: 120px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

How this was measured

PikSpec’s scanner read the fly.io home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Fly.io is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Fly.io.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.