---
title: "Fly.io design system"
variant: extended
source: https://fly.io/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/fly-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Fly.io · Design System

> Real computers, rendered with warmth and whimsy.

**Theme:** light · **Industry:** devtools · **Source:** https://fly.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Fly.io pairs a developer-focused infrastructure story with expressive hand-drawn characters and soft pastel gradients. Serif headlines, restrained purple actions, and spacious product sections keep a technically grounded homepage approachable.

## North star

Keep the interface calm and spacious, letting expressive illustrations carry the colour while purple actions and serif headlines provide a consistent anchor.

## Overview

The page starts with a clean white navigation bar, then opens into a wide illustrated hero washed in soft blue, pink, and lilac. The illustration supplies much of the page’s colour and personality; keep the interface itself anchored in the measured palette rather than treating every artwork colour as a brand token. Mackinac serif headlines create a distinctive editorial voice, while Fricolage Grotesque handles navigation, body copy, and controls in a friendly, practical style. Purple is reserved for primary actions and text links, with muted violet-gray supporting secondary copy. The long homepage alternates open white sections with pale lavender cards and broad pastel gradient panels, using generous vertical breathing room to separate product explanations, metrics, testimonials, and calls to action. Thin lavender borders define cards more often than heavy shadows. The dark plum footer creates a clear visual endpoint and supports reversed, subdued text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white navigation and open content areas. |
| Signal Violet | `#7c3aed` | `--color-signal-violet` | accent | Primary CTA fills, signup actions, and inline text links. |
| Muted Iris | `#686082` | `--color-muted-iris` | neutral | Secondary navigation and muted interface copy on light backgrounds. |
| Headline Ink | `#000000` | `--color-headline-ink` | neutral | Core heading and body text; use for strongest text contrast. |
| Button Lilac | `#d4c4fd` | `--color-button-lilac` | semantic | Subtle measured button detail; secondary to the main violet CTA. |
| Lavender Rule | `#d5cfef` | `--color-lavender-rule` | semantic | Fine card and content dividers, especially around feature panels. |
| Warm Mist | `#f4f6eb` | `--color-warm-mist` | surface | Pale navigation surface band. |
| Lilac Haze | `#f7f6fc` | `--color-lilac-haze` | surface | Light card surface behind product and feature content. |
| Midnight Plum | `#191034` | `--color-midnight-plum` | brand | Dark footer background and reversed closing section. |
| Pale Amethyst | `#e6e0fe` | `--color-pale-amethyst` | semantic | Soft section and button edging; supporting tint, not a primary fill. |
| Petal Gradient | `#f2eafa` | `--color-petal-gradient` | semantic | Light pink-lilac component of pastel section gradients. |
| Footer Lavender | `#a39ac1` | `--color-footer-lavender` | neutral | Low-emphasis text within the dark footer. |
| Cloud Blue | `#e2eafa` | `--color-cloud-blue` | semantic | Cool blue component of broad pastel section gradients. |
| Blush Lavender | `#efe4f6` | `--color-blush-lavender` | semantic | Soft gradient tint in pastel feature backgrounds. |
| Deep Iris | `#281950` | `--color-deep-iris` | brand | Dark violet text in product cards and navigation items. |
| Graphite Copy | `#2e2e2e` | `--color-graphite-copy` | neutral | Occasional dark heading and body copy variation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f6eb` (Warm Mist) · `--color-surface-2` → `#f7f6fc` (Lilac Haze) · `--color-surface-3` → `#191034` (Midnight Plum) · `--color-text` → `#000000` (Headline Ink) · `--color-text-muted` → `#686082` (Muted Iris) · `--color-text-subtle` → `#a39ac1` (Footer Lavender) · `--color-border` → `#d5cfef` (Lavender Rule) · `--color-accent` → `#7c3aed` (Signal Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f6eb` | 19.23:1 | AAA |
| `#000000` | `#f7f6fc` | 19.54:1 | AAA |
| `#000000` | `#191034` | 1.17:1 | fail |
| `#686082` | `#ffffff` | 5.86:1 | AA |
| `#686082` | `#f4f6eb` | 5.36:1 | AA |
| `#686082` | `#f7f6fc` | 5.45:1 | AA |
| `#686082` | `#191034` | 3.08:1 | AA-large |
| `#a39ac1` | `#ffffff` | 2.64:1 | fail |
| `#a39ac1` | `#f4f6eb` | 2.42:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(255, 255, 255) 1.4px, rgba(0, 0, 0, 0) 1.5px), radial-gradient(circle, rgb(255, 255, 255) 1.4px, rgba(0, 0, 0, 0) 1.5px)`
- `linear-gradient(135deg, rgb(242, 234, 250), rgb(226, 234, 250) 55%, rgb(239, 228, 246))`
- `linear-gradient(135deg, rgb(238, 231, 250), rgb(225, 233, 250) 55%, rgb(241, 229, 245))`
- `linear-gradient(to right bottom, rgba(18, 18, 38, 0.5), rgba(34, 24, 60, 0.5), rgba(25, 16, 52, 0.5))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Fricolage Grotesque | `--font-body` | webfont | 325, 450, 500, 575 | Navigation, body copy, captions, buttons, links, and eyebrow labels. | DM Sans |
| Mackinac | `--font-display` | webfont | 500 | Display and section headings, including the hero headline. | Bree Serif |

- **Fricolage Grotesque:** Friendly sans with light body weight; navigation is firmer, and uppercase eyebrows use tracked lettering.
- **Mackinac:** Use a warm editorial serif at medium weight; large headings have slightly tight tracking and natural case.

### Type scale — Golden Ratio (ratio ≈ 1.618, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 0.95 | -0.02em | — | Mackinac | Oversized editorial statement headlines in prominent hero moments. |
| h1 | 48px | 500 | 1.25 | -0.025em | — | Mackinac | Primary page and major feature headlines. |
| h2 | 36px | 500 | 1.15 | -0.02em | — | Mackinac | Section titles across product, support, and content bands. |
| body | 17px | 325 | 1.5 | 0 | — | Fricolage Grotesque | Explanatory copy for products, features, and testimonials. |
| caption | 14.5px | 450 | 1.66 | 0 | — | Fricolage Grotesque | Small supporting labels, metadata, and compact descriptions. |
| button | 15.5px | 450 | 1.5 | 0 | — | Fricolage Grotesque | Primary CTA and newsletter action text. |
| nav | 14.5px | 500 | 1.5 | 0 | — | Fricolage Grotesque | Main navigation labels and compact menu items. |
| link | 19px | 450 | 1.5 | 0 | — | Fricolage Grotesque | Prominent inline calls to explore products or sign up. |
| eyebrow | 12px | 575 | 1.5 | 0.05em | uppercase | Fricolage Grotesque | Uppercase, letter-spaced section labels where needed. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 64, 96, 100, 150 px.
- Section rhythm 100px · element gap 24px · card padding 24px · max content width 1390px.

Use a centered, spacious composition with a measured maximum page width of 1390px. The header sits above a wide, media-led hero, followed by a logo strip and stacked product, feature, stats, testimonial, CTA, and footer areas. Major sections have generous vertical separation; cards use measured 24px padding and feature grids align in clear columns. Alternate open white space with pale cards and full-width pastel bands. Keep copy blocks compact and left aligned, balancing them with illustration or structured content.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `10px` · media `8px` · nav `4px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `20px`
- Shadow `inset` (button): `rgba(221, 214, 254, 0.25) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 2px 25px 0px`
- Shadow `inset-2` (link): `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.2) 0px 4px 6px -4px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat surfaces and fine lavender borders over prominent depth. Cards are separated by hairlines and pale fills; broad gradient panels provide section-level emphasis. Shadows are subtle and occasional, while buttons use a restrained inset highlight. Reserve stronger layering for the illustrated artwork and the dark footer transition.

## Imagery

Illustration is the defining visual asset: hand-drawn, character-led scenes and playful diagrams, with the hero artwork occupying a large portion of the right side. Product cards use small, distinct illustrations rather than conventional photography. Pastel fields and loose marks surround the drawings, while logos and technical content stay relatively restrained. Use artwork as expressive section support, not as a substitute for clear text hierarchy.

## Components

### Primary CTA

Use Signal Violet (#7c3aed) with white text, an 8px radius, and measured horizontal padding of 20px for the main action.

### Text link

Set prominent product links in Signal Violet (#7c3aed); keep them visually lighter than filled CTA buttons.

### Feature card

Use a pale surface, a thin Lavender Rule (#d5cfef) border, and generous measured card padding; avoid heavy shadows.

### Navigation

Keep the top bar white and uncluttered, with compact Fricolage Grotesque labels and violet sign-up action.

### Pastel feature band

Separate major feature content with a broad, soft pink-to-blue gradient and lightly defined card groupings.

### Footer

Use Midnight Plum (#191034), subdued Footer Lavender (#a39ac1) text, grouped link columns, and a newsletter form.

### Measured component styles

- **Primary button** (“Start for Free”): background #7c3aed · text #ffffff · border 1px solid · radius 8px · padding 0px 20px · 450 15.5px Fricolage Grotesque · shadow rgba(221, 214, 254, 0.25) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0p
- **Secondary button** (“Log In”): background #e6e0fe · text #7c3aed · border 1px solid #d4c4fd · radius 8px · padding 0px · 450 14.5px Fricolage Grotesque
- **Link** (“Explore Sprites”): transparent background · text #7c3aed · radius 0px · padding 0px · 450 19px Fricolage Grotesque
- **Input**: background #22183c · text #ffffff · border 1px solid #42385f · radius 8px · padding 8px 12px · 325 14.5px Fricolage Grotesque
- **Card** (“No disk sizing Your disk grows as you wr”): transparent background · text #281950 · border 1px solid #d5cfef · radius 0px · padding 24px · 325 16px Fricolage Grotesque
- **Navigation item** (“Machines”): transparent background · text #281950 · radius 0px · padding 10px 12px · 500 14.5px Fricolage Grotesque

## Do

- Use Mackinac for expressive serif headlines.
- Keep navigation and body copy in Fricolage Grotesque.
- Reserve Signal Violet (#7c3aed) for actions and selected links.
- Alternate open white sections with pale cards and pastel bands.
- Let original illustrations provide the strongest playful colour.
- Use thin lavender borders to define card edges.

## Don't

- Do not turn the whole page into a dark interface.
- Do not use gradients as the default background for every section.
- Do not let illustration overwhelm the text hierarchy.
- Do not replace the editorial serif headings with generic geometric sans.
- Do not use heavy shadows to separate ordinary cards.
- Do not invent extra palette colours from artwork.

## Agent prompt

Build a new page in Fly.io’s visual style: spacious, developer-focused, editorial, and playful. Set the main canvas to Gallery White (#ffffff), use Mackinac for prominent serif headlines and Fricolage Grotesque for navigation, copy, and controls. Apply Signal Violet (#7c3aed) selectively to primary buttons and links; use Muted Iris (#686082) for secondary copy and Lavender Rule (#d5cfef) for fine card borders. Organize content in generous, clearly separated sections with pale cards and occasional soft pastel gradient bands. Pair concise explanatory copy with original hand-drawn, characterful illustrations; do not treat artwork colours as interface tokens. Keep surfaces mostly flat, use restrained shadows, and finish with a Midnight Plum (#191034) footer and subdued footer text.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-column homepage with varied full-width bands, feature grids, split content, and a large illustrated hero. | Primary signup CTA, Product exploration links, Logo credibility strip, Sequential product storytelling | Serif hero headline, Pastel illustration, Lavender-bordered cards, Gradient feature panels, Metrics and testimonial cards |
| 2 | footer | Full-width dark plum band with grouped link columns and a newsletter form. | Grouped company and resource navigation, Newsletter signup, Legal and support destinations | Midnight Plum background, Muted lavender text, Compact link columns, Violet subscribe button |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fly-io