Fly.io

---
version: alpha
name: Fly.io landing-page reference
description: A playful cloud-platform page with enormous editorial serif headlines,
  pastel gradient skies, whimsical winged-computer illustrations, purple actions and
  a structured sequence of infrastructure feature chapters.
colors:
  primary: '#7C3AED'
  surface: '#FFFFFF'
  on-surface: '#2E2E2E'
  secondary: '#F4F3FB'
  accent: '#191034'
typography:
  headline-sample:
    fontFamily: Mackinac, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
    fontSize: 120px
    fontWeight: 500
    lineHeight: 114px
    letterSpacing: -2.4px
  secondary-sample:
    fontFamily: Mackinac, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
    fontSize: 48px
    fontWeight: 575
    lineHeight: 62.4px
    letterSpacing: -1.2px
  mobile-heading-sample:
    fontFamily: Mackinac, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
    fontSize: 34.71px
    fontWeight: 500
    lineHeight: 32.9745px
    letterSpacing: -0.6942px
  paragraph-sample:
    fontFamily: '"Fricolage Grotesque", ui-sans-serif, system-ui, sans-serif, "Apple
      Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
    fontSize: 24px
    fontWeight: 325
    lineHeight: 32.4px
---

# Fly.io landing-page reference

## Overview

Observed at https://fly.io/ on 2026-09-19 at 1440px desktop and 390px mobile widths. A playful cloud-platform page with enormous editorial serif headlines, pastel gradient skies, whimsical winged-computer illustrations, purple actions and a structured sequence of infrastructure feature chapters. This is an independent visual reference, not an official brand specification.

## Colors

Tokens record sampled CSS RGB values, converted to hex. Artwork and interface imagery contain additional colors; the tokens are a compact reference palette, not an exhaustive brand system.

## Typography

The first measured headline sample uses Mackinac, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif at 120px, weight 500, line height 114px and tracking -2.4px. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Use a white wordmark/navigation bar above a full-width pastel illustrated hero. Place the oversized two-line serif headline and short copy left, with winged computer characters concentrated at the right and purple action underneath. Follow with customer logos, a short positioning section, illustrated gradient feature bands, small capability columns, product comparison cards and a dark multi-column footer.

Reduce navigation to logo and menu icon. The hero keeps text on the left and a cropped illustration on the right rather than moving all artwork below the copy. The headline reduces to about 35px with tight leading. Customer logos appear as a two-column grouping beneath the hero. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Pastel gradients and overlapping illustrated characters create the hero depth. Content cards have restrained borders and shadows; the main visual texture comes from artwork rather than heavy interface chrome. Exact shadow values were not measured.

## Shapes

Use lightly rounded purple buttons and panels with softly rounded corners. Contrast these simple controls with the deliberately irregular, hand-drawn cloud-computer characters and ribbon trails. Radius descriptions are visual estimates.

## Components

Retain the large serif/sans contrast and the illustration's role in explaining an otherwise technical product. Do not replace the distinctive character artwork with generic server icons or crowd the pastel hero with extra controls. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.