For Agents · Fly.io Brand Guidelines

For Agents

Agents can read this site the same way you do, minus the scrolling. Every page registers WebMCP tools, & the whole brand is available as JSON & Markdown.

Checking for WebMCP…

Install the Agent Skill

Teach your coding agent to use the brand. The brand skill tells it to explore these WebMCP tools with agent-browser first, & fall back to /brand.json.

$ npx skills add superfly/skills --skill brand

Works with Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot & other agents that support Agent Skills. Read it first at superfly/skills.

Three Ways In

01
In the Browser
Open any page in a browser with WebMCP. The tools register themselves; just ask your agent.
See the 12 Tools
02
Fetch the Data
Pull every color, logo, typeface & rule as JSON to theme generated slides, docs or UIs.
curl -s /brand.json
03
Add to Your Repo
Save the guidelines as Markdown & point your AGENTS.md at it, so coding agents stay on brand.
curl -s /llms.txt > BRAND.md

Tools

Registered through document.modelContext on every page. All read-only, except navigate_to_page, which only moves the page you’re on.

Playground

Run any tool to see exactly what an agent gets back. It runs here in your browser.

Example Prompts

With WebMCP enabled, open this site & ask your agent something like:

“Pick the right Fly.io logo for a dark slide & give me the SVG.”
“Does violet-400 text pass contrast on peacoat? If not, what should I use?”
“Find a Fly.io hero illustration with open sky I can put a headline on.”

WebMCP is an early web standard. Learn more at github.com/webmachinelearning/webmcp.

Install the Agent Skill#

Three Ways In#

In the Browser

Fetch the Data

Add to Your Repo

Tools#

get_brand_overviewSummary of the Fly.io brand: what's covered, key colors, typefaces, the preferred logo & where to find each section.

list_logosList Fly.io logo files (SVG, PNG, ZIP URLs).

recommend_logoPick the right Fly.io logo for a placement.

get_partner_lockup_rulesHow to place the Fly.io logo next to a partner's logo: spacing in balloon-height units, divider, sizing, ordering & what to avoid.

get_colorsFly.io brand colors as hex values.

check_contrastWCAG 2 contrast ratio between two hex colors, with AA/AAA pass/fail for normal & large text.

get_typographyFly.io typefaces (Mackinac, Fricolage Grotesque, Fragment Mono), their roles, weights, font file URLs, the type scale, the hero-title style with its scribble underline, pairings for common layouts (hero, article, docs, UI…) & typesetting rules.

get_code_stylesHow Fly.io shows commands & code: the terminal window anatomy, the syntax color palette & rules for code blocks.

list_imageryFly.io illustrations (newest first) with image URLs, sizes & alt text, plus usage rules & how to put text on images (beside, open space, scrim).

get_voice_guidelinesHow Fly.io writes, grounded in its blog: voice principles with real quoted examples, how tone shifts by context (launches, deep dives, bad news, pricing, docs), & how to spell product names (Fly.io, Fly Machines, Sprites, flyctl…).

get_usage_termsWhat the Fly.io brand assets may & may not be used for.

navigate_to_pageOpen a section of the brand guidelines site in this tab.navigates

Playground#

Example Prompts#

Search the Brand Guidelines

Install the Agent Skill

Three Ways In

Tools

Playground

Example Prompts