What is Fly.io's primary brand color?

Fly.io runs two violets that play different roles. The structural primary is '#281950' — a deep violet-ink that handles every heading, body paragraph, and nav-link label across the page (188 text occurrences in the extraction). The CTA primary is '#7c3aed' — a saturated violet that fills the Get Started button and nothing else on the marketing surface. The rainbow gradient stops (cyan '#7dd3fc', indigo '#a5b4fc', pink '#f9a8d4', violet '#a02be4') are never primary; they only render as low-opacity radial glows under illustrations.

What typography does Fly.io use, and what should I use if Mackinac isn't available?

Display runs Mackinac, a proprietary humanist serif loaded at exactly weight 500 — 64px / '-2.88px' tracking at the hero, 36px / '-0.9px' at section H2, 22px / '-0.55px' at card titles. Body, nav, and button labels run Fricolage Grotesque at 14.5px–19px with non-standard weights 325, 450, and 575 (the system uses precise variable-font axes rather than rounded 300/400/500 stops). If Mackinac isn't licensable, GT Super Display or Tiempos Headline at weight 500 with feature-settings 'ss01' enabled read closest. Fricolage is open-source — substitutes are unnecessary.

How is the rainbow gradient used on the page?

The four-stop rainbow (cyan '#7dd3fc' → indigo '#a5b4fc' → pink '#f9a8d4' → violet '#a02be4') exists only as low-opacity radial glows that sit behind the brand's illustrations of fish, dragons, and laptops. It is never a flat fill on a button, card, or band; it is never repeated as a swatch palette in the UI. Treat the rainbow as atmospheric — one decorative gradient object, applied as a backdrop layer, never miniaturized to an icon and never reduced to a single hue.

Why does '#e7e6f4' appear so frequently in the extraction?

'#e7e6f4' is the brand's universal hairline — a barely-tinted lavender with 267 border occurrences in the extraction (it is the single highest-frequency color on the page). Fly.io uses it as the 1px divider on every card, section, input, table row, and footer column. The hairline is faint enough that it reads as structure rather than decoration, but tinted just enough toward violet that it harmonizes with the '#281950' ink. Don't substitute a neutral gray here — the lavender tilt is what keeps the whole page reading as one system.

What role do illustrations play in the design system?

Illustrations are not decoration — they are the entire visual chrome that most brands hand to icons, gradients, or product screenshots. Every major section (Sandboxes, Storage, Private Networking, Tech You Love) is anchored by a hand-drawn pastel illustration: a fish flopping out of water, a dragon napping in a hammock, a laptop with a unicorn horn. They render at roughly half the section width, sit on the same '#f1f2f9' canvas as the body, and use the rainbow palette only as low-opacity radial glows underneath. They are how the brand signals its voice; the typography signals its discipline.

Can I use this DESIGN.md to build my own React project?

Yes — the file is structured for direct ingestion by Claude, Cursor, or any AI tool that reads token-based design specs. The agent reproduces Fly.io's constraints (Mackinac at weight 500 only, single violet '#7c3aed' CTA, lavender '#e7e6f4' hairlines everywhere, rainbow gradient as glow not fill) rather than inventing a generic shadcn theme. Every hex, font size, radius, and spacing value is a quoted token you can paste into Tailwind config, CSS variables, or a custom component library.

Fly.io Design System

Fly.io's design language as a DESIGN.md file.

About Fly.io DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source fly.io

Web Infrastructure & Hosting
Developer Tools & IDEs

Fly.io's marketing page is what happens when a developer-infrastructure brand decides the right reference is not Linear and not Vercel but a children's storybook. The canvas is a near-white "#f1f2f9", every headline is set in Mackinac — a soft humanist serif loaded at exactly weight 500 with a punishing "-2.88px" tracking at the 64px hero size — and the section dividers are not hairlines but illustrated dragons, fish, and tools rendered in the same dusty-pastel palette as the brand's gradient. The text color is "#281950", a deep ink-violet that reads almost as navy until you put it next to actual navy and watch it tilt purple. The whole page reads as a hand-drawn periodical that happens to sell sandboxes and private networking.

This DESIGN.md packages the system into a single machine-readable file following the Google Labs spec. Inside: 22 color tokens (the deep "#281950" violet-ink primary, the four-stop rainbow gradient set of cyan "#7dd3fc" / indigo "#a5b4fc" / pink "#f9a8d4" / violet "#a02be4", a single saturated CTA violet "#7c3aed", the structural lavender hairline "#e7e6f4" with 267 occurrences across the page, plus dark-band accents for the closing footer), 12 typography tokens across Mackinac serif and Fricolage Grotesque sans, 6 radii from 0px to a 9999px pill, 9 spacing values built around a 32px base, and 18 components covering the violet CTA, the ghost-button pair, the illustrated section card, the dark "Use the Tech You Love" band, and the global nav.

Feed the file to Claude, Cursor, or Copilot when you want a React surface that reads as Fly.io — soft canvas, illustrated rather than iconographic, serif headlines at weight 500, a single violet conversion target. The agent picks up the constraints: never escalate Mackinac past 500, never flat-fill the rainbow stops, never replace "#e7e6f4" with a darker hairline. Reference the tokens directly in Tailwind config or use the spec as an audit checklist against the page. Where most developer-infra brands signal seriousness with grayscale and weight 600 sans, Fly.io signals it by setting the entire page in serif and trusting illustration to do the rest.

What makes it distinct

Storybook-on-infrastructurehand-illustrated dragons and fish frame every section heading on a developer compute platform
Mackinac at weight 500 only64px hero with '-2.88px' tracking carries display, never escalating to 600 or italic for emphasis
Single violet CTA'#7c3aed' is the only saturated filled surface, paired with a hairline-bordered ghost button on every section
Lavender hairline as the structural voice'#e7e6f4' draws 267 of every divider, border, and card edge across the page
Four-stop rainbow as glow not fillcyan, indigo, pink, violet appear only as radial gradients under illustrations, never as filled backgrounds

Live at fly.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

fly.io

Explore Fly.io

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Fly.io design system FAQ

Common questions about Fly.io's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Fly.io — official site

Run user code, sandboxes, and any container close to users on the Fly.io platform.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Fly.io in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→