Skip to content
Browse
Library

Fly.io. Surrealist cloud atlas in violet ink.

  • Developer tools
  • Light theme
  • 12 colors
  • 2 typefaces

Fly.io reads like a hand-drawn storybook for infrastructure: a near-white canvas washed in the faintest lavender, populated by surreal watercolor creatures and floating landscapes. The voice is two-part — a confident display serif (Mackinac) sets an editorial tone for headlines with aggressive negative tracking, while a humanist grotesque (Fricolage Grotesque) handles body and UI with subtle positive tracking that keeps the prose unhurried. Interactions live in a single vivid violet pill button that pops against the muted canvas, and a deep-violet ink carries all heading weight. Sections breathe between soft sky-to-pink gradient bands, trusting illustration to carry emotion while text and UI stay restrained.

Visit fly.io
Screenshot of Fly.io
Captured from fly.io on October 11, 2026

Fly.io design system

Fly.io

Brand3

  • Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

  • Headlines, high-emphasis text, logo mark — anchors the brand without feeling heavy

  • Footer background, deepest contrast surface — terminates the page with the same hue family as headings, just darker

Accent2

  • Decorative gradient stop — sky-to-pink section bands

  • Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color

Neutrals7

  • Navigation text, dark-mode-leaning neutral — used where a neutral (not chromatic) dark is needed

  • Body copy, paragraph text, subdued UI labels — the workhorse text color that keeps prose warm rather than cold

  • Muted secondary text, helper copy, timestamps — the cool counterpoint to the violet body text

  • Secondary text, footer labels, icon strokes, muted links — a washed violet that recedes gracefully

  • Hairline borders, card outlines, subtle dividers, inset focus rings — the dominant structural neutral, replacing what would normally be light gray

  • Page background, the canvas beneath all content — a barely-perceptible lavender tint rather than pure white

  • Card surfaces, elevated panels, button text on violet fills

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure Paper on Electric Violet

5.70 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.