fly.io website design: fonts, colors and UI patterns

Overview

Fly.io’s visual system is quiet at first glance, then increasingly expressive as the page unfolds. The baseline is a white canvas with deep violet text, thin borders, and a small set of saturated purple actions. The main headlines are serif and literary, while the body copy stays compact, matter-of-fact, and unadorned. That contrast gives the site a confident technical voice without turning it into a dense dashboard.

The page story is built from a few strong moves: a centered sign-in form, wide hero compositions with a hand-drawn illustration lane, a pale trust strip, a gradient-backed framework section, and a dark footer that closes the page with a clear hierarchy. The system feels calm because each section has one dominant job. It feels distinctive because the illustrations, gradient sheens, and serif headings keep returning in different combinations.

The parts to preserve are the white space, the violet action color, the serif headline scale, the rounded controls, and the shift from bright editorial layouts into a deep indigo footer. The brand does not rely on heavy chrome or dense cards; spacing and type carry most of the identity.

Colors

Core palette

Support and accent colors

The page stays mostly monochrome in structure, then lets violet carry the brand weight. #A02BE4 and #7C3AED do the work of a primary action system, while #281950 handles text and the dark footer. The light sections use white as the dominant field and add atmosphere with a translucent blue sheen: linear-gradient(100deg, rgba(125, 211, 252, 0.1), rgba(255, 255, 255, 0)). That keeps the layout luminous without adding visible chrome.

The visual relationship between surfaces is simple. White sections keep the page open and airy. Pale gradient sections soften the transition into more technical content. The footer inverts the hierarchy by placing white text on the dark violet base. Accent greens, cyans, peaches, and golds should stay secondary; they support icons, check marks, and illustrations rather than becoming UI tokens.

Typography

Fly.io relies on two families with a clear division of labor. P 22 Mackinac Pro gives the page its editorial voice, especially in the biggest headings. Fricolage Grotesque Ext Bd 96 Pt carries the utility layer: body copy, buttons, labels, forms, and footer text. Licensing details are not supplied here; confirm reuse before production.

The hierarchy comes from scale, family contrast, and tight leading rather than from many different styles. The serif headings lean slightly inward through negative tracking, which makes them feel intentional and composed. The grotesk family stays readable at small sizes and gives the forms, buttons, and footer a stable utility voice. The site never needs a third family; the tension between these two is enough.

Layout

The page uses very wide centered columns, but the content itself stays narrow. On the desktop hero, the text block sits in the middle of a large field, with a separate illustration or image lane to one side. That creates a floaty composition: the page feels spacious, but the important information still lands in a compact reading width. Large wrappers leave roughly 428px to 580px of side space on the broadest sections, and the section padding often steps up to 128px vertically with 32px horizontal gutters.

The sign-in page shows the same logic in a more structured form. A compact card sits in the center of a white field, with two provider buttons side by side above the email and password fields. The form reads as a self-contained module, while the right side becomes a tall illustrated panel with a soft purple room scene. The balance is asymmetrical, but not noisy.

The trust section uses a lighter, more diagram-like arrangement. A logo row runs across the top, and the content below splits into checklist and explanation. Thin horizontal rules and green ticks give the checklist a controlled rhythm. The framework section turns the layout into a grid of rounded tiles, each tile acting like a small signpost for a toolchain or platform. The dark footer finishes with a rigid multi-column information architecture: brand at left, then tidy link columns, then the smallest legal copy at the bottom.

Across the page, large vertical gaps do more work than borders. Sections are separated by air, not by stacked chrome. That is why the page feels calm even when it contains many topics.

Visual language

Fly.io combines a technical subject with a playful surface language. The illustrations are hand-drawn, loose, and slightly whimsical, but they sit inside disciplined compositions. That makes the page feel friendly without losing credibility. The drawings use lilac, blue, mint, peach, and gold fills, often with soft outlines and sketch-like contours. They are not ornamental extras; they explain the product mood and keep the brand memorable.

The color treatment is equally restrained. Most UI surfaces stay white. When the page wants more energy, it introduces a violet gradient or a pale blue-lilac haze. The action color is consistently saturated, but it never spills everywhere. Small checks, buttons, and framework tiles carry the strongest chroma, while the rest of the interface holds back. This keeps the page from feeling overdesigned.

Shape matters, but only at a few scales. Inputs and buttons use modest rounding around 0.625rem to 0.6875rem. Larger calls to action feel pill-like. The footer and section blocks remain mostly rectangular, so the rounded controls stand out. There is little to no visible shadow system. Depth comes from contrast, spacing, and color shift instead of raised cards.

Components

Header and logo mark

• Anatomy: Small logo icon, wordmark, sparse top-level links, and an action at the far edge.
• Typography: Tiny Fricolage labels with medium or semibold weight.
• Surface: Usually transparent or white, never heavy.
• Composition: Keep the header low in height and let the hero carry the visual weight.

Sign-in card

• Anatomy: Centered title, third-party sign-in buttons, divider, stacked email and password fields, password recovery link, submit button, and a final account-creation link.
• Surface: White card on a white page, defined by borders and spacing more than by fill contrast.
• Shape: Inputs and buttons use soft corners around 0.625rem to 0.6875rem.
• Typography: panel-display for the title, body for labels, button for controls.
• Visible state: The form reads as clean, calm, and ready; the purple submit button is the strongest cue in the stack.

Primary action

• Fill: Violet gradient from #A02BE4 to #7C3AED.
• Text: White, set in the Fricolage button style.
• Shape: Rounded pill or rounded rectangle depending on context.
• Role: This is the only interaction color that should feel assertive.
• Placement: One strong action per section is enough; the page never needs a cluster of competing buttons.

Trust checklist band

• Anatomy: Logo row, short heading, supporting paragraph, and a checklist with green ticks.
• Surface: Pale gradient field with a translucent blue sheen.
• Typography: Serif heading paired with compact grotesk body copy.
• Composition: Keep the checklist in a disciplined vertical rhythm with thin separators.
• Visible state: The ticks are small but bright, so they work as quick reassurance marks rather than decorative icons.

Framework tile section

• Anatomy: Section heading, explanatory paragraph, one action, and a grid of rounded square tiles.
• Surface: Violet-backed or violet-inflected area, with a stronger visual energy than the white sections.
• Shape: Each tile is softly rounded and evenly spaced, reading like a small system card.
• Typography: Serif for the lead message, grotesk for supporting copy and tile labels.
• Composition: Keep the tiles aligned in a clean grid so the section feels engineered, not playful chaos.

Footer

• Anatomy: Brand at left, multiple link columns, and tiny legal copy at the bottom center.
• Surface: Deep violet, almost indigo.
• Text color: White for the main footer content, with lower-contrast text for quieter lines.
• Typography: Fricolage throughout, with the lightest weight reserved for metadata.
• Hierarchy: Brand and navigation first, legal material last.
• Visible state: The footer should feel like a clear endpoint, not another promotional block.

Responsive behavior

The design should keep the same reading order on smaller screens: headline, supporting copy, action, then illustration or secondary content. The centered form should become a single-column stack with the provider buttons separated vertically before the email and password fields. The trust checklist and framework tiles should collapse into one-column or two-column stacks before they become too compressed. The footer should preserve its information hierarchy even when the link columns wrap. The main goal is to keep the serif headlines readable and the illustrations legible without turning every section into a dense card wall.

Practical implementation guidance

Preserve

• Keep the two-family contrast intact: Mackinac for statements, Fricolage for everything functional.
• Preserve the generous white field around the central content blocks.
• Keep the violet action gradient as the signature control treatment.
• Let illustrations stay large and loose rather than shrinking them into icons.
• Maintain the dark footer as a strong closing surface.

Avoid

• Avoid heavy shadows or glass effects; the page does not need faux depth.
• Avoid turning every section into a bordered card grid.
• Avoid adding a third type family or a second headline voice.
• Avoid saturating the page with the accent colors; they are support tones, not the brand core.
• Avoid dense microcopy blocks that fight the airy layout.

Recommended build order

1. Set the serif and grotesk type scale first.
2. Build the white canvas, section widths, and large vertical spacing.
3. Add the primary violet action and the rounded form controls.
4. Recreate the sign-in card and the hero composition.
5. Build the pale trust strip with its checklist rhythm.
6. Add the framework tile grid and the other illustrated feature sections.
7. Finish with the deep violet footer and its column structure.

Accessibility

• Keep contrast high wherever white text sits on dark violet surfaces.
• Make sure the action gradient still reads clearly when text is centered inside it.
• Keep form labels tied closely to their fields and leave enough spacing between inputs.
• Give illustrations descriptive alternative text when they carry meaning.
• Preserve a visible focus treatment for links, buttons, and form controls.
• Do not rely on color alone for checklist status or navigation emphasis.

Scope note

This guide covers the desktop sign-in page, the white hero, the trust band, the framework section, the illustrated feature blocks, and the dark footer. One supplied image file was blank and did not add visual guidance. Mobile behavior, motion, hover states, loading states, and unshown page areas are not defined here; type and spacing values use the shared 0.125rem step.

Related design patterns

• Technology and software
• Primary text color
• Purple hue
• Accent color
• API platform
• Software SaaS
• Home page
• Body role

More website design guides

Browse website design guides by pattern and website.