CURATED · OPEN · FREE

Fly.io

A playful, developer-first cloud platform that makes infrastructure feel approachable and fast.

devtoolsinfra

↓ Download design system (38 MB)Open in OpenDesign

Visit: https://fly.io

📦 Browse pack contents →

Identity DNA

playfuldeveloper-centricmodern infrastructureapproachableconfident

A friendly neighborhood workshop for building and deploying code.

Color

#7c3aedAccent

#202237Ink

#281950Ink soft

#f1f2f9BG

#a39ac1Muted

rgba(231,230,244,1)Line

Soft, muted backgrounds with dark, high-contrast text and a single vibrant purple accent for primary actions.

Typography

grotesque-sans · humanist-sans · monospace

display56px · 500

Display text uses a bold, slightly irregular grotesque for character. · Body text is a clean, readable humanist sans-serif. · Italic accents (like 'fearlessly') use a serif typeface for emphasis. · Letter spacing is tight for large headlines, slightly loose for smaller text.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing between sections, with tight internal spacing for grouped elements.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 9999px

1px solid rgba(231,230,244,1)

rgba(32,34,55,0.075) 0px 0px 0px 1px · rgba(32,34,55,0.05) 0px 10px 15px -3px · rgba(91,33,182,0.1) 0px 5px 5px -2px

Layout

1280container

12columns

32pxgutter

768 / 1024breakpoints

Centered, single-column hero layout transitioning to a multi-column feature grid.

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Standard ease-in-out for color and background transitions. · Quick opacity and transform changes for micro-interactions.

Subtle background or color shifts on interactive elements. · Standard press feedback.

Components

button Pill-shaped primary buttons with solid purple background and white text; secondary buttons are transparent with subtle borders.
card Subtle, borderless cards with soft shadows or grouped by proximity.
chip Not prominently featured; framework logos appear as icon badges.
input Not visible in screenshots; inferred to be clean, rounded inputs.
hero Large, centered headline with a prominent, whimsical illustration above it.

Voice & Don'ts

Tone Confident, friendly, and slightly irreverent.
Headlines Short, punchy, and direct, often mixing bold and italic for emphasis.
CTAs Action-oriented and clear, like 'Deploy your app'.

Don't use a dark theme — screenshot shows a predominantly light, soft-purple tinted background.
Don't use rigid, geometric illustrations — screenshot shows hand-drawn, whimsical, and organic line art.
Don't use a single, stark accent color — screenshot shows a dominant purple but relies on a palette of muted pastels in illustrations.
Don't use tightly packed, dense layouts — screenshot shows generous whitespace and clear visual separation.
Don't use purely sans-serif typography — screenshot shows a serif face used for italic emphasis in headlines.
Don't use sharp, hard-cornered UI elements — screenshot shows consistently rounded corners, often pill-shaped.
Avoid: Overly corporate jargon
Avoid: Cold, impersonal language
Avoid: Dense, technical walls of text

Inside the pack — real screenshots

Fly.io — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Fly.io is a developer-first cloud platform with a playful, approachable identity. Its design DNA is built on a soft, light-purple tinted background (#f1f2f9) with high-contrast dark ink text (#202237). A vibrant purple (#7c3aed) serves as the primary accent for calls to action. Typography mixes a bold, characterful grotesque sans for headlines with a clean humanist sans for body text, and a serif italic for emphasis. The aesthetic is defined by whimsical, hand-drawn illustrations and generous spacing. Key donts: avoid dark mode, avoid sharp corners, and avoid cold, corporate language. The layout is centered and spacious, prioritizing clarity and a friendly tone.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko