superfly · enstyled · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/about/index.html.markerb b/about/index.html.markerb
@@ -6,6 +6,10 @@ toc: false
 nav: firecracker
 ---
 
+<figure>
+  <img src="/static/images/accident-forgiveness.png" alt="Illustration by Annie Ruygt of Frankie the hot air balloon holding an umbrella to protect a bird from the rain" class="max-w-lg">
+</figure>
+
 More details about using and working with the Fly.io platform.
 
 * **[Pricing](/docs/about/pricing/):** Pricing for compute, storage, and all the Fly.io platform services.

diff --git a/apps/going-to-production.html.markerb b/apps/going-to-production.html.markerb
@@ -11,6 +11,10 @@ redirect_from:
 
 Use this checklist to help you set up a production environment on Fly.io.
 
+<figure class="flex justify-center">
+  <img src="/static/images/outlook.png" alt="Illustration by Annie Ruygt of Frankie the hot air balloon waving to a bird sitting on a hour roof" class="max-w-lg">
+</figure>
+
 <div class="important icon">
 **Important:** The checklist is not exhaustive and does not guarantee production-readiness for your app. Apps can have unique requirements for production depending on the framework and type of app. Some items won't be applicable and there may be other considerations not listed here; you'll need to decide which checklist items work for your app.
 </div>

diff --git a/apps/index.html.markerb b/apps/index.html.markerb
@@ -5,6 +5,10 @@ toc: false
 nav: apps
 ---
 
+<figure>
+  <img src="/static/images/apps-new-and-fun.png" alt="Illustration by Annie Ruygt of a green block with A written on it, followed by a database stack in a dancing move" class="max-w-xl">
+</figure>
+
 An app on Fly.io can be anything from a simple frontend web app to a complex arrangement of processes and Machines all doing their own thing. Check out the [Fly Apps overview](/docs/apps/overview/) for details.
 
 

diff --git a/getting-started/launch.html.markerb b/getting-started/launch.html.markerb
@@ -19,24 +19,24 @@ To deploy your app on Fly.io for the first time:
 4. If prompted, run `fly deploy` to deploy your new app (or to redeploy after changes!).
 </div>
 
+<figure class="max-w-sm">
+  <img src="/static/images/moto-jump.png" alt="Illustration by Annie Ruygt of a phoenix jumping with a motor bike">
+</figure>
+
 ## Next steps
 
 1. Run `fly status` to show the status of your app and Machines.
 2. Run `fly apps open` to open your app in your browser.
 3. Learn some [Fly.io essentials](/docs/getting-started/essentials/) and continue to [explore what you can do with Fly Launch](/docs/launch/).
 
-<figure class="w:full mt:6">
-  <img src="/static/images/speedrun-next-steps.webp" srcset="/static/images/[email protected] 2x" alt="Illustration by Annie Ruygt of Frankie the Fly.io hot air balloon character pointing at a set of stairs">
-</figure>
-
 ## Grow and scale
 
 Check out some of the ways you can increase availability, capacity, and performance with Fly.io:
 
 * Follow the blueprint for [extra Machines for more resilient apps](/docs/blueprints/resilient-apps-multiple-machines/)
 * Read up on [App availability and resiliency](/docs/reference/app-availability/)
 * [Autoscale Machines based on load or custom metrics](/docs/reference/autoscaling/)
-* [Scale Machine CPU and RAM](/docs/apps/scale-machine/) 
+* [Scale Machine CPU and RAM](/docs/apps/scale-machine/)
 * [Scale Machine count](/docs/apps/scale-count/)
 * Try out [Fly GPUs](/docs/gpus/)
 

diff --git a/gpus/index.html.md b/gpus/index.html.md
@@ -7,6 +7,10 @@ toc: false
 
 Fly.io has GPUs! If you have workloads that would benefit from GPU acceleration, Fly GPU Machines may be for you.
 
+<figure class="flex justify-center">
+  <img src="/static/images/bullet.png" alt="Illustration by Annie Ruygt of Frankie the hot air balloon admiring a fast-pacing motor bike" class="max-w-lg">
+</figure>
+
 ## What can I use Fly GPUs for?
 
 Four models of GPU are available: A10, L40S, NVIDIA A100 40G PCIe and A100 80G SXM.

diff --git a/monitoring/index.html.markerb b/monitoring/index.html.markerb
@@ -3,11 +3,15 @@ title: "Monitoring on Fly.io"
 layout: docs
 nav: firecracker
 toc: false
-redirect_from: 
+redirect_from:
   - /docs/going-to-production/monitoring/
   - /docs/metrics-and-logs/
 ---
 
+<figure class="max-w-sm">
+  <img src="/static/images/spooky.webp" alt="Illustration by Annie Ruygt of a smirking ghost sitting infront of a laptop">
+</figure>
+
 ## Metrics
 
 _Fully-managed metrics solutions to help you monitor your apps._
@@ -30,6 +34,6 @@ _Live tail and search your app’s logs, or ship them where you want them._
 
 - **[Logging overview](/docs/monitoring/logging-overview/):** How logs work on Fly.io.
 - **[Live tail logs](/docs/monitoring/live-tail-logs/):** Where to access live tail logs.
-- **[Search logs](/docs/monitoring/search-logs/):** Searchable app logs in Grafana (beta). 
+- **[Search logs](/docs/monitoring/search-logs/):** Searchable app logs in Grafana (beta).
 - **[Export logs](/docs/monitoring/exporting-logs/):** Aggregate your logs to a service of your choice.
 - **[Error codes and troubleshooting](/docs/monitoring/error-codes/):** Look up error codes and get tips for troubleshooting.
diff --git a/security/index.html.markerb b/security/index.html.markerb
@@ -9,7 +9,11 @@ Securing a public cloud platform like Fly.io is a hard problem, and we take it s
 
 ---
 
-## Organization and app security 
+<figure class="flex justify-center">
+  <img src="/static/images/security.png" alt="Illustration by Annie Ruygt of a phoenix jumping with a motor bike" class="max-w-lg">
+</figure>
+
+## Organization and app security
 
 _Security for customer organizations and apps._