№ fly-io--docs-machines-cpu-performance

Fly — Docs

Soft lavender expanse dotted with vibrant, whimsical illustrations, playful sans-serif energy.

Ecosystem Indexplayful maximalism developer toolslight

The hero image is a whimsical illustration that establishes a lighthearted and approachable tone. The layout utilizes a bento grid to present various elements, creating visual interest and a sense of playful exploration. · developer tools, saas landing page, illustration hero, playful design, bento layout, tech website, colorful design, startup website

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: pastel · muted · warm · cool

SwatchHexOKLCHSuggested roleCopy

Hex#5444e4
OKLCHoklch(51.0% 0.230 279)
RoleDominant
find sites →
Hex#36265f
OKLCHoklch(32.0% 0.097 293)
RoleSurface
find sites →
Hex#f4d47b
OKLCHoklch(87.8% 0.114 90)
RoleInk
find sites →
Hex#5484a4
OKLCHoklch(59.2% 0.072 239)
RoleAccent
find sites →
Hex#caa6bb
OKLCHoklch(76.4% 0.051 342)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Mackinac	120px	500	0.95	-2.4px	Aa Bb Cc
h2	Mackinac	48px	575	1.3	-1.2px	Aa Bb Cc
h3	Fricolage Grotesque	19px	450	1.5	0	Aa Bb Cc
body	Fricolage Grotesque	16px	325	1.5	0	Aa Bb Cc
caption	Fricolage Grotesque	15px	450	1.5	0	Aa Bb Cc
button	Fricolage Grotesque	15px	450	1.63	0	Aa Bb Cc

Spacing scale

32px

64px

80px

96px

Radius scale

0px

4px

6px

8px

10px

16px

20px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #5444e4;
  --color-surface: #36265f;
  --color-ink: #f4d47b;
  --color-accent: #5484a4;
  --color-detail: #caa6bb;
}

/* CSS variables exposed by source */
:root {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-skew-x: 0;
  --dot-size: 6px;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-ring-offset-width: 0px;
  --tw-scroll-snap-strictness: proximity;
  --tw-scale-x: 1;
  --tw-border-spacing-x: 0;
  --tw-shadow-colored: 0 0 #0000;
  --tw-border-spacing-y: 0;
  --tw-scale-y: 1;
  --tw-text-shadow-color: rgb(91 33 182 / 0.25);
  --tw-border-opacity: 1;
  --tw-skew-y: 0;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Fly — Docs.
Reference design system (extracted from the live site):
- Palette: #5444e4, #36265f, #f4d47b, #5484a4, #caa6bb
- Typefaces: Mackinac, Fricolage Grotesque
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/fly-io--docs-machines-cpu-performance

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Mackinac

120px

500

0.95

-2.4px

Aa Bb Cc

Mackinac

48px

575

1.3

-1.2px

Aa Bb Cc

Fricolage Grotesque

19px

450

1.5

Aa Bb Cc

body

Fricolage Grotesque

16px

325

1.5

Aa Bb Cc

caption

Fricolage Grotesque

15px

450

1.5

Aa Bb Cc

button

Fricolage Grotesque

15px

450

1.63

Aa Bb Cc

:root { --color-dominant: #5444e4; --color-surface: #36265f; --color-ink: #f4d47b; --color-accent: #5484a4; --color-detail: #caa6bb; } /* CSS variables exposed by source */ :root { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-skew-x: 0; --dot-size: 6px; --tw-shadow: 0 0 #0000; --tw-translate-x: 0; --tw-ring-offset-width: 0px; --tw-scroll-snap-strictness: proximity; --tw-scale-x: 1; --tw-border-spacing-x: 0; --tw-shadow-colored: 0 0 #0000; --tw-border-spacing-y: 0; --tw-scale-y: 1; --tw-text-shadow-color: rgb(91 33 182 / 0.25); --tw-border-opacity: 1; --tw-skew-y: 0; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-translate-y: 0; --tw-rotate: 0; --tw-ring-offset-color: #fff; }

Build a landing page in the visual style of Fly — Docs. Reference design system (extracted from the live site): - Palette: #5444e4, #36265f, #f4d47b, #5484a4, #caa6bb - Typefaces: Mackinac, Fricolage Grotesque - Macrostructure: Ecosystem Index Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/fly-io--docs-machines-cpu-performance