Playful, light developer platform: a soft sky-indigo-pink wash, deep-indigo ink, Mackinac serif headlines with an italic word underlined by a hand-drawn purple squiggle, friendly Fricolage Grotesque UI, whimsical hand-drawn illustration, and full-pill purple CTAs with a floating pill nav.
Browse Fly.io in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: fly.io (live DOM, computed styles), 2026-07-15 (desktop 1512px). Coverage: homepage (floating nav, illustrated hero, section headings, CTAs). Dashboard/console: behind login (needs-dashboard). Responsive: breakpoints not captured (desktop only).
Playful, warm and hand-crafted — a developer-platform brand that reads like a storybook rather than a terminal. The canvas is light: white fading into a soft tri-colour wash of sky, indigo and pink at low alpha. The hero is dominated by a big, whimsical hand-drawn illustration (a balloon mascot, a whale, boats, plants, little creatures) that flows across the page like a dream sequence. The headline is set in the Mackinac serif at a medium 500 weight with tight negative tracking, mixing roman and italic ("Run any code *fearlessly.*") and underlined with a hand-drawn purple squiggle. UI and body run in Fricolage Grotesque, a friendly grotesque, at an unusual 450 weight. Ink is a deep indigo #281950, and the one functional accent is a confident purple #7c3aed on fully-rounded pill buttons and a floating pill nav. It feels approachable and characterful — serious infra with a smile. Feels: playful, warm, illustrated, friendly.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page background, cards |
| surface | #f1f2f9 | Section wash / gradient top |
| lavender-line | #e7e6f4 | Hairline borders, nav ring |
| deep | #191034 | Deep footer / dark blocks |
| deep-2 | #202237 | Dark UI text on light chips |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #281950 | Primary text, headings |
| ink-75 | #281950 @ .75 | Body copy |
| muted | #676b89 | Secondary / captions |
| faint | #a39ac1 | Tertiary / placeholder |
| Token | Hex | Role / usage |
|---|---|---|
| purple | #7c3aed | Primary accent, CTAs, links, underline |
| purple-500 | #8b5cf6 | Hover / secondary purple |
| purple-light | #ca7ff8 | Light accent / highlights |
| Token | Hex | Role |
|---|---|---|
| sky | #7dd3fc | Hero wash + art |
| indigo | #a5b4fc | Hero wash + art |
| pink | #f9a8d4 | Hero wash + art |
| green | #10b981 | Illustration |
| blue | #3b82f6 | Illustration |
| amber | #f59e0b | Illustration |
| orange | #f97316 | Illustration |
Rule: chrome is white + deep-indigo ink + one purple #7c3aed. The wider spectrum lives inside the hand-drawn illustration and the soft hero wash only.
Mackinac, Georgia, "Times New Roman", serif — headlines + section titles, medium (500), roman + italic mix."Fricolage Grotesque", ui-sans-serif, system-ui, sans-serif — body, UI, buttons (weight ~450).| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 74 | 500 | -2.88px (-4.5%) |
| Section (h2) | 36 | 500 | -0.9px |
| Body | 16–18 | 400 | normal |
| Button / UI | 14.5–15.5 | 450 | normal |
| Nav | 14.5 | 450 | normal |
Patterns: display is a SERIF (Mackinac) at 500 with tight negative tracking and an italic accent word; there is no bold-grotesque headline. Fricolage Grotesque handles UI at a soft 450 weight. Italic + hand-drawn underline is a signature emphasis.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.