diff --git a/connect-your-tools.html b/connect-your-tools.html
index 6c5d6212..190f80fb 100644
--- a/connect-your-tools.html
+++ b/connect-your-tools.html
@@ -6,6 +6,10 @@
     <title>Connect your tools</title>
     <style>
       :root {
+        --bg-start: #6646da;
+        --bg-mid: #9d54b2;
+        --bg-end: #ec6f69;
+        --icon-fill: #f2f2f3;
         --bg-start: #6746db;
         --bg-mid: #9d56b1;
         --bg-end: #ee6e6a;
@@ -31,6 +35,20 @@
         overflow: hidden;
         display: grid;
         place-items: center;
+        background: linear-gradient(127deg, var(--bg-start) 0%, var(--bg-mid) 54%, var(--bg-end) 100%);
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      }
+
+      .icons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: clamp(46px, 6.5vw, 100px);
+        transform: translateY(12px);
+      }
+
+      .circle {
+        width: clamp(124px, 10.8vw, 220px);
         overflow: hidden;
         background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
         background: linear-gradient(124deg, var(--bg-start) 4%, var(--bg-mid) 53%, var(--bg-end) 98%);
@@ -54,15 +72,25 @@
         width: var(--icon-size);
         aspect-ratio: 1;
         border-radius: 50%;
-        background: var(--icon-bg);
+        background: var(--icon-fill);
         position: relative;
         overflow: hidden;
         flex: 0 0 auto;
       }
 
-      .logo.linear::before {
+      .linear::before {
         content: "";
         position: absolute;
+        left: -14%;
+        bottom: 0;
+        width: 74%;
+        height: 76%;
+        background: repeating-linear-gradient(
+          -46deg,
+          var(--icon-accent) 0 10px,
+          transparent 10px 24px
+        );
+        opacity: 0.98;
         inset: 0;
         border-radius: 50%;
         background: linear-gradient(
@@ -92,21 +120,25 @@
           );
       }
 
-      .logo.plus::before,
-      .logo.plus::after {
+      .plus::before,
+      .plus::after {
         content: "";
         position: absolute;
         top: 50%;
         left: 50%;
+        width: clamp(54px, 4.8vw, 98px);
+        height: clamp(14px, 1.2vw, 24px);
         width: 46%;
         height: 10%;
         width: 44%;
         height: 10.5%;
         border-radius: 999px;
-        background: var(--icon-accent);
         transform: translate(-50%, -50%);
+        background: var(--icon-accent);
       }
 
+      .plus::after {
+        transform: translate(-50%, -50%) rotate(90deg);
       .logo.plus::after {
         width: 10%;
         height: 46%;
@@ -130,12 +162,19 @@
           transition: none !important;
         }
       }
+
+      @media (max-width: 680px) {
+        .icons {
+          transform: none;
+          gap: clamp(24px, 8vw, 42px);
+        }
+      }
     </style>
   </head>
   <body>
-    <main class="logos" aria-label="Connected tools illustration">
-      <div class="logo linear" aria-label="Linear logo"></div>
-      <div class="logo plus" aria-label="Add integration"></div>
+    <main class="icons" aria-label="Connected tools illustration">
+      <div class="circle linear" aria-hidden="true"></div>
+      <div class="circle plus" aria-hidden="true"></div>
     </main>
   </body>
 </html>
diff --git a/examples/connect-your-tools.html b/examples/connect-your-tools.html
index 6d989070..5bf3f358 100644
--- a/examples/connect-your-tools.html
+++ b/examples/connect-your-tools.html
@@ -6,6 +6,11 @@
     <title>Connect your tools</title>
     <style>
       :root {
+        --bg-start: #6646da;
+        --bg-mid: #9d54b2;
+        --bg-end: #ec6f69;
+        --icon-fill: #f2f2f3;
+        --icon-accent: #b4579f;
         --bg-start: #6544dc;
         --bg-mid: #9a54b5;
         --bg-end: #ec6d74;
@@ -34,6 +39,9 @@
         margin: 0;
         display: grid;
         place-items: center;
+        background: linear-gradient(127deg, var(--bg-start) 0%, var(--bg-mid) 54%, var(--bg-end) 100%);
+        display: grid;
+        place-items: center;
         overflow: hidden;
         background: linear-gradient(125deg, var(--bg-start) 2%, var(--bg-mid) 51%, var(--bg-end) 98%);
         min-height: 100vh;
@@ -53,6 +61,15 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: clamp(46px, 6.5vw, 100px);
+        transform: translateY(12px);
+      }
+
+      .circle {
+        width: clamp(124px, 10.8vw, 220px);
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background: var(--icon-fill);
         gap: var(--icon-gap);
         transform: translateY(var(--cluster-shift-y));
         contain: layout paint;
@@ -69,6 +86,23 @@
         flex: 0 0 auto;
       }
 
+      .linear::before {
+        content: "";
+        position: absolute;
+        left: -14%;
+        bottom: 0;
+        width: 74%;
+        height: 76%;
+        background: repeating-linear-gradient(
+          -46deg,
+          var(--icon-accent) 0 10px,
+          transparent 10px 24px
+        );
+        opacity: 0.98;
+      }
+
+      .plus::before,
+      .plus::after {
       .logo.linear::before {
         content: "";
         position: absolute;
@@ -107,6 +141,21 @@
         position: absolute;
         top: 50%;
         left: 50%;
+        width: clamp(54px, 4.8vw, 98px);
+        height: clamp(14px, 1.2vw, 24px);
+        border-radius: 999px;
+        transform: translate(-50%, -50%);
+        background: var(--icon-accent);
+      }
+
+      .plus::after {
+        transform: translate(-50%, -50%) rotate(90deg);
+      }
+
+      @media (max-width: 680px) {
+        .icons {
+          transform: none;
+          gap: clamp(24px, 8vw, 42px);
         width: 46%;
         height: 10%;
         width: 44%;
@@ -145,6 +194,9 @@
     </style>
   </head>
   <body>
+    <main class="icons" aria-label="Connected tools illustration">
+      <div class="circle linear" aria-hidden="true"></div>
+      <div class="circle plus" aria-hidden="true"></div>
     <main class="logos" aria-label="Connected tools illustration">
       <div class="logo linear" aria-label="Linear logo"></div>
       <div class="logo plus" aria-label="Add integration"></div>
