From 195b8aeb7819f81b2fcc0dac10121fe93ff8f30b Mon Sep 17 00:00:00 2001
From: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Date: Thu, 14 May 2026 10:05:50 -0300
Subject: [PATCH 1/2] feat(footer): FooterV1 + CncfCallout v1 chrome (Phase 1 -
 PR 6)

Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
---
 ecosystem-explorer/src/v1/V1App.tsx           |   9 +-
 .../src/v1/components/icons/bluesky-icon.tsx  |  37 ++++
 .../src/v1/components/icons/cncf-logo.tsx     |  84 ++++++++
 .../src/v1/components/icons/github-icon.tsx   |  37 ++++
 .../src/v1/components/icons/mastodon-icon.tsx |  37 ++++
 .../src/v1/components/icons/slack-icon.tsx    |  37 ++++
 .../components/icons/stack-overflow-icon.tsx  |  37 ++++
 .../v1/components/icons/trademark-icon.tsx    |  37 ++++
 .../components/layout/cncf-callout.test.tsx   |  55 ++++++
 .../src/v1/components/layout/cncf-callout.tsx |  55 ++++++
 .../src/v1/components/layout/footer.test.tsx  | 121 ++++++++++++
 .../src/v1/components/layout/footer.tsx       | 179 ++++++++++++++++++
 .../src/v1/styles/cncf-callout.css            |  74 ++++++++
 ecosystem-explorer/src/v1/styles/footer.css   | 149 +++++++++++++++
 ecosystem-explorer/src/v1/styles/index.css    |  11 +-
 projects/84-ui-ux-design/NEXT-STEPS.md        |  36 ++--
 16 files changed, 974 insertions(+), 21 deletions(-)
 create mode 100644 ecosystem-explorer/src/v1/components/icons/bluesky-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/cncf-logo.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/github-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/mastodon-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/slack-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/stack-overflow-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/icons/trademark-icon.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/layout/footer.test.tsx
 create mode 100644 ecosystem-explorer/src/v1/components/layout/footer.tsx
 create mode 100644 ecosystem-explorer/src/v1/styles/cncf-callout.css
 create mode 100644 ecosystem-explorer/src/v1/styles/footer.css

diff --git a/ecosystem-explorer/src/v1/V1App.tsx b/ecosystem-explorer/src/v1/V1App.tsx
index 3ca06d7a..a0119c03 100644
--- a/ecosystem-explorer/src/v1/V1App.tsx
+++ b/ecosystem-explorer/src/v1/V1App.tsx
@@ -15,16 +15,16 @@
  */
 import { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
-import { Footer } from "@/components/layout/footer";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
 import { isEnabled } from "@/lib/feature-flags";
+import { CncfCallout } from "@/v1/components/layout/cncf-callout";
+import { FooterV1 } from "@/v1/components/layout/footer";
 import { NavBar } from "@/v1/components/layout/nav-bar";
 import "@/v1/styles/index.css";
 
 /*
  * V1 sub-app entry. Reached via the V1_REDESIGN boundary read in `src/App.tsx`.
- * Owns its own `<Routes>` and v1 chrome. The legacy `<Footer />` is reused as a
- * temporary placeholder until PR 6 ships `<FooterV1 />` + `<CncfCallout />`.
+ * Owns its own `<Routes>` and v1 chrome (navbar, CNCF callout, footer).
  *
  * The `.v1-app` wrapper class scopes v1-specific surface-token overrides defined
  * in `src/v1/styles/tokens.css` so they don't leak into the legacy app.
@@ -139,7 +139,8 @@ export function V1App() {
           </Suspense>
         </ErrorBoundary>
       </main>
-      <Footer />
+      <CncfCallout />
+      <FooterV1 />
     </div>
   );
 }
diff --git a/ecosystem-explorer/src/v1/components/icons/bluesky-icon.tsx b/ecosystem-explorer/src/v1/components/icons/bluesky-icon.tsx
new file mode 100644
index 00000000..1abf7dc1
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/bluesky-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-brands `bluesky` mark, inlined so we don't pull the full
+ * Font Awesome bundle for a handful of footer icons (see decision log
+ * 2026-05-06, foundation audit Q3). Icon licensed CC BY 4.0 by Fonticons, Inc.
+ */
+export function BlueskyIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/cncf-logo.tsx b/ecosystem-explorer/src/v1/components/icons/cncf-logo.tsx
new file mode 100644
index 00000000..891c3225
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/cncf-logo.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * CNCF "Cloud Native Computing Foundation" wordmark + mark, verbatim from
+ * opentelemetry.io's `static/img/logos/cncf-white.svg` (cncf/artwork upstream).
+ * Fill is white-ish (`#fff` baseline via the original `.st0` class), and we
+ * pin it via `fill="currentColor"` so consumers can recolor it with text-*
+ * classes — on the dark CncfCallout band it renders white.
+ */
+export function CncfLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Cloud Native Computing Foundation"
+      viewBox="-1.81 -3.06 419.38 80.13"
+      className={className}
+      fill="currentColor"
+    >
+      <g>
+        <g>
+          <path d="M102.2 33c3.3 0 5.9-1.3 8-3.9l4.3 4.4c-3.4 3.8-7.3 5.7-11.9 5.7s-8.3-1.4-11.3-4.3-4.4-6.5-4.4-10.9 1.5-8.1 4.5-11 6.7-4.4 11.1-4.4c4.9 0 9 1.9 12.2 5.6l-4.1 4.7c-2.1-2.6-4.7-3.9-7.8-3.9-2.5 0-4.6.8-6.4 2.4s-2.7 3.8-2.7 6.6.8 5 2.5 6.7c1.6 1.4 3.6 2.3 6 2.3z" />
+          <path d="M119.7 38.8V9.1h6.6v23.8H139v5.9h-19.3z" />
+          <path d="M168 34.7c-3 2.9-6.7 4.4-11.1 4.4s-8.1-1.5-11.1-4.4-4.5-6.6-4.5-10.9c0-4.4 1.5-8 4.5-10.9s6.7-4.4 11.1-4.4S165 10 168 12.9s4.5 6.6 4.5 10.9c0 4.4-1.5 8-4.5 10.9zm-2.3-10.9c0-2.6-.9-4.9-2.6-6.8s-3.8-2.8-6.3-2.8-4.6.9-6.3 2.8c-1.7 1.9-2.6 4.1-2.6 6.8 0 2.6.9 4.9 2.6 6.8s3.8 2.8 6.3 2.8 4.6-.9 6.3-2.8c1.8-1.9 2.6-4.1 2.6-6.8z" />
+          <path d="M186 31.2c1.1 1.4 2.6 2.1 4.5 2.1s3.4-.7 4.4-2.1c1.1-1.4 1.6-3.3 1.6-5.6V9.2h6.6v16.6c0 4.3-1.2 7.6-3.6 9.9s-5.4 3.5-9.1 3.5-6.8-1.2-9.2-3.5c-2.4-2.3-3.6-5.6-3.6-9.9V9.2h6.6v16.4c.1 2.3.7 4.2 1.8 5.6z" />
+          <path d="M232.7 13c2.8 2.6 4.3 6.2 4.3 10.8s-1.4 8.3-4.1 11c-2.8 2.7-7 4-12.6 4H210V9.1h10.5c5.3 0 9.4 1.3 12.2 3.9zm-4.8 17.7c1.6-1.5 2.4-3.8 2.4-6.7 0-2.9-.8-5.2-2.4-6.7-1.6-1.6-4.1-2.4-7.5-2.4h-3.7V33h4.2c3 0 5.3-.8 7-2.3z" />
+          <path d="M274.7 9.1h6.6v29.7h-6.6l-14.2-18.6v18.6h-6.6V9.1h6.2l14.6 19.1V9.1z" />
+          <path d="M309.8 38.8l-2.8-6.4h-12.5l-2.8 6.4h-7.1l12.8-29.7h6.4l12.8 29.7h-6.8zM300.9 18l-3.7 8.6h7.4l-3.7-8.6z" />
+          <path d="M330.8 14.9v24h-6.6v-24h-8.4V9.2h23.5v5.7h-8.5z" />
+          <path d="M344 9.1h6.6v29.7H344V9.1z" />
+          <path d="M368.9 28l7.6-18.9h7.2l-11.9 29.7h-5.6L354.3 9.1h7.2l7.4 18.9z" />
+          <path d="M408.6 9.1V15h-14.8v6.1h13.3v5.7h-13.3V33h15.3v5.9h-21.9V9.2h21.4v-.1z" />
+          <path d="M94.6 64.1c1.8 0 3.3-.7 4.5-2.2l2.4 2.5c-1.9 2.1-4.1 3.2-6.7 3.2s-4.7-.8-6.3-2.4c-1.7-1.6-2.5-3.7-2.5-6.1 0-2.5.8-4.5 2.5-6.2s3.8-2.5 6.2-2.5c2.7 0 5 1 6.9 3.1l-2.3 2.6c-1.2-1.5-2.6-2.2-4.4-2.2-1.4 0-2.6.5-3.6 1.4s-1.5 2.1-1.5 3.7.5 2.8 1.4 3.7c.9 1 2.1 1.4 3.4 1.4z" />
+          <path d="M118 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8z" />
+          <path d="M138.6 56.9l-4.5 9.1h-2.2l-4.5-9.1v10.5h-3.7V50.7h5l4.3 9.1 4.3-9.1h5v16.7h-3.7V56.9z" />
+          <path d="M157.9 52.3c1.2 1 1.8 2.5 1.8 4.6s-.6 3.6-1.8 4.5c-1.2 1-3 1.4-5.5 1.4h-2.2v4.6h-3.7V50.7h5.9c2.5.1 4.3.6 5.5 1.6zm-2.7 6.5c.4-.5.7-1.2.7-2.2s-.3-1.6-.9-2-1.5-.6-2.7-.6h-2.1v5.6h2.5c1.2 0 2-.3 2.5-.8z" />
+          <path d="M167 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2-2-3.2-2-5.6v-9.3h3.7v9.2c0 1.5.3 2.6.9 3.3z" />
+          <path d="M187.5 54v13.4h-3.7V54h-4.7v-3.2h13.2V54h-4.8z" />
+          <path d="M195 50.8h3.7v16.7H195V50.8z" />
+          <path d="M214.4 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8h-.1z" />
+          <path d="M233.1 59h3.7v5.9c-1.7 1.8-3.9 2.8-6.9 2.8-2.4 0-4.5-.8-6.2-2.4s-2.5-3.7-2.5-6.1c0-2.5.8-4.5 2.5-6.2s3.7-2.5 6.1-2.5 4.5.8 6.2 2.4l-1.9 2.8c-.7-.7-1.4-1.1-2.1-1.3-.6-.2-1.3-.4-2-.4-1.4 0-2.6.5-3.6 1.4-1 1-1.5 2.2-1.5 3.8 0 1.6.5 2.8 1.4 3.8.9.9 2 1.4 3.3 1.4s2.4-.2 3.2-.7V59h.3z" />
+          <path d="M257.8 50.8v3.3h-7.7v3.6h7.3V61h-7.3v6.5h-3.7V50.8h11.4z" />
+          <path d="M275 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.3-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c1-1 1.4-2.3 1.4-3.8z" />
+          <path d="M285.1 63.1c.6.8 1.5 1.2 2.5 1.2s1.9-.4 2.5-1.2c.6-.8.9-1.8.9-3.2v-9.2h3.7V60c0 2.4-.7 4.3-2 5.6-1.3 1.3-3 1.9-5.1 1.9s-3.8-.7-5.1-2c-1.3-1.3-2-3.2-2-5.6v-9.3h3.7v9.2c-.1 1.5.3 2.6.9 3.3z" />
+          <path d="M310.2 50.8h3.7v16.7h-3.7l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7V50.8h-.1z" />
+          <path d="M330.7 53c1.6 1.5 2.4 3.5 2.4 6.1s-.8 4.6-2.3 6.1-3.9 2.3-7.1 2.3H318V50.8h5.9c3 0 5.3.7 6.8 2.2zm-2.7 9.9c.9-.9 1.4-2.1 1.4-3.7s-.5-2.9-1.4-3.8-2.3-1.3-4.2-1.3h-2.1v10.1h2.4c1.7-.1 3-.5 3.9-1.3z" />
+          <path d="M347.7 67.4l-1.5-3.6h-7l-1.5 3.6h-4l7.2-16.7h3.6l7.2 16.7h-4zm-5-11.7l-2.1 4.8h4.2l-2.1-4.8z" />
+          <path d="M359.5 54v13.4h-3.7V54H351v-3.2h13.2V54h-4.7z" />
+          <path d="M366.9 50.8h3.7v16.7h-3.7V50.8z" />
+          <path d="M388.7 65.1c-1.7 1.6-3.8 2.5-6.2 2.5-2.5 0-4.5-.8-6.2-2.5-1.7-1.6-2.5-3.7-2.5-6.1s.8-4.5 2.5-6.1 3.8-2.5 6.2-2.5c2.5 0 4.5.8 6.2 2.5 1.7 1.6 2.5 3.7 2.5 6.1s-.8 4.5-2.5 6.1zm-1.2-6.1c0-1.5-.5-2.8-1.4-3.8-1-1-2.1-1.6-3.5-1.6s-2.6.5-3.5 1.6c-1 1-1.4 2.3-1.4 3.8s.5 2.7 1.4 3.8c1 1 2.1 1.6 3.5 1.6s2.6-.5 3.5-1.6c.9-1 1.4-2.3 1.4-3.8z" />
+          <path d="M406 50.8h3.7v16.7H406l-7.9-10.4v10.4h-3.7V50.8h3.5l8.2 10.7-.1-10.7z" />
+        </g>
+      </g>
+      <g>
+        <g>
+          <path d="M15.5 47.7H6.4v21.4h21.3v-9.2H15.5z" />
+          <path d="M61.3 47.8v12.1H49.1v-.1 9.3h21.3V47.7h-9.2z" />
+          <path d="M6.4 26.4h9.2l-.1-.1V14.2h12.2V5H6.4z" />
+          <path d="M49.1 5v9.2h12.2v12.2h9.1V5z" />
+        </g>
+        <g opacity=".8">
+          <path d="M47.9 26.4L35.7 14.2h13.4V5H27.7v9.2l12.2 12.2z" />
+          <path d="M36.9 47.7h-8L39 57.8l2 2.1H27.7v9.2h21.4v-9.3l-6.1-6z" />
+          <path d="M61.3 26.4v13.3l-2.1-2.1-10.1-10.1v8.1l6 6 6.1 6.1h9.2V26.4z" />
+          <path d="M27.7 38.5L15.6 26.4H6.4v21.3h9.1V34.4l12.2 12.2z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/github-icon.tsx b/ecosystem-explorer/src/v1/components/icons/github-icon.tsx
new file mode 100644
index 00000000..0e0b4f44
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/github-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-brands `github` mark. Inlined because Lucide v1.x dropped
+ * brand glyphs for licensing reasons. Icon licensed CC BY 4.0 by Fonticons,
+ * Inc.
+ */
+export function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 496 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/mastodon-icon.tsx b/ecosystem-explorer/src/v1/components/icons/mastodon-icon.tsx
new file mode 100644
index 00000000..391316c3
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/mastodon-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-brands `mastodon` mark, inlined to avoid the full Font
+ * Awesome bundle (decision log 2026-05-06). Icon licensed CC BY 4.0 by
+ * Fonticons, Inc.
+ */
+export function MastodonIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/slack-icon.tsx b/ecosystem-explorer/src/v1/components/icons/slack-icon.tsx
new file mode 100644
index 00000000..a3e69297
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/slack-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-brands `slack` mark. Inlined because Lucide v1.x dropped
+ * brand glyphs for licensing reasons. Icon licensed CC BY 4.0 by Fonticons,
+ * Inc.
+ */
+export function SlackIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/stack-overflow-icon.tsx b/ecosystem-explorer/src/v1/components/icons/stack-overflow-icon.tsx
new file mode 100644
index 00000000..95fd3a9f
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/stack-overflow-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-brands `stack-overflow` mark, inlined to avoid the full
+ * Font Awesome bundle (decision log 2026-05-06). Icon licensed CC BY 4.0 by
+ * Fonticons, Inc.
+ */
+export function StackOverflowIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/icons/trademark-icon.tsx b/ecosystem-explorer/src/v1/components/icons/trademark-icon.tsx
new file mode 100644
index 00000000..ee4dda61
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/icons/trademark-icon.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Font Awesome 6 free-solid `trademark` mark, inlined because Lucide does not
+ * ship a trademark glyph (see footer icon strategy, decision log 2026-05-06).
+ * Icon licensed CC BY 4.0 by Fonticons, Inc.
+ */
+export function TrademarkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 640 512"
+      className={className}
+      aria-hidden
+      focusable="false"
+    >
+      <path
+        fill="currentColor"
+        d="M345.6 108.8c-8.3-11-22.7-15.5-35.7-11.2S288 114.2 288 128l0 256c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 86.4 115.2c6 8.1 15.5 12.8 25.6 12.8s19.6-4.7 25.6-12.8L576 224l0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-256c0-13.8-8.8-26-21.9-30.4s-27.5 .1-35.7 11.2L464 266.7 345.6 108.8zM0 128c0 17.7 14.3 32 32 32l64 0 0 224c0 17.7 14.3 32 32 32s32-14.3 32-32l0-224 64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 96C14.3 96 0 110.3 0 128z"
+      />
+    </svg>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx b/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
new file mode 100644
index 00000000..8eb1fb63
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { CncfCallout } from "./cncf-callout";
+
+describe("CncfCallout", () => {
+  it("renders the CNCF incubating-project statement", () => {
+    render(<CncfCallout />);
+
+    expect(screen.getByText(/OpenTelemetry is a/i)).toBeInTheDocument();
+    expect(screen.getByText(/incubating project/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/merger of the OpenTracing and OpenCensus projects/i)
+    ).toBeInTheDocument();
+  });
+
+  it('links "CNCF" to cncf.io and opens it in a new tab', () => {
+    render(<CncfCallout />);
+
+    const cncfLink = screen.getByRole("link", { name: "CNCF" });
+    expect(cncfLink).toHaveAttribute("href", "https://cncf.io");
+    expect(cncfLink).toHaveAttribute("target", "_blank");
+    expect(cncfLink.getAttribute("rel")).toMatch(/\bnoopener\b/);
+  });
+
+  it("renders the CNCF wordmark with an accessible name", () => {
+    render(<CncfCallout />);
+
+    expect(
+      screen.getByRole("img", { name: /Cloud Native Computing Foundation/i })
+    ).toBeInTheDocument();
+  });
+
+  it("exposes the callout as a labelled region", () => {
+    render(<CncfCallout />);
+
+    expect(
+      screen.getByRole("region", { name: /OpenTelemetry is a.*incubating project/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx b/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
new file mode 100644
index 00000000..fefb6dce
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * CncfCallout — explorer-original chrome that sits above FooterV1 on every
+ * v1 route. No upstream opentelemetry.io equivalent (grep'd: zero hits in
+ * `layouts/_partials/` or `themes/docsy/`). Content follows the redesign
+ * brief (`projects/84-ui-ux-design/ecosystem-explorer-v1-design-brief.md`
+ * lines 55, 82) and the mockup at `ecosystem-explorer-v1-mockups.html:1738`.
+ *
+ * Surface uses OTel-secondary (purple) per the brief — `td-box--secondary` —
+ * which the design brief identifies as the canonical sitewide-callout color.
+ * The mockup uses a neutral `box-muted`; the brief is the more recent intent.
+ */
+
+import { CncfLogo } from "@/v1/components/icons/cncf-logo";
+
+export function CncfCallout() {
+  return (
+    <section className="td-cncf-callout" aria-labelledby="cncf-callout-heading">
+      <div className="td-cncf-callout__container">
+        <p id="cncf-callout-heading" className="td-cncf-callout__lead">
+          <strong>
+            OpenTelemetry is a{" "}
+            <a
+              href="https://cncf.io"
+              target="_blank"
+              rel="noopener"
+              className="td-cncf-callout__link"
+            >
+              CNCF
+            </a>{" "}
+            incubating project.
+          </strong>
+          <br />
+          Formed through a merger of the OpenTracing and OpenCensus projects.
+        </p>
+        <CncfLogo className="td-cncf-callout__logo" />
+      </div>
+    </section>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/components/layout/footer.test.tsx b/ecosystem-explorer/src/v1/components/layout/footer.test.tsx
new file mode 100644
index 00000000..f458dd6c
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/layout/footer.test.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect } from "vitest";
+import { FooterV1 } from "./footer";
+import { ThemeProvider } from "@/theme-context";
+
+function renderFooter() {
+  return render(
+    <MemoryRouter>
+      <ThemeProvider>
+        <FooterV1 />
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+}
+
+const expectedLeftLinks = [
+  { name: "Mailing Lists", url: "https://github.com/open-telemetry/community#mailing-lists" },
+  { name: "Bluesky", url: "https://bsky.app/profile/opentelemetry.io" },
+  { name: "Mastodon", url: "https://fosstodon.org/@opentelemetry" },
+  { name: "Stack Overflow", url: "https://stackoverflow.com/questions/tagged/open-telemetry" },
+  {
+    name: "OTel logos",
+    url: "https://github.com/cncf/artwork/tree/master/projects/opentelemetry",
+  },
+  {
+    name: "Meeting Recordings",
+    url: "https://docs.google.com/spreadsheets/d/1SYKfjYhZdm2Wh2Cl6KVQalKg_m4NhTPZqq-8SzEVO6s",
+  },
+  { name: "Site analytics", url: "https://lookerstudio.google.com/s/tSTKxK1ECeU" },
+];
+
+const expectedRightLinks = [
+  { name: "GitHub", url: "https://github.com/open-telemetry" },
+  { name: "Slack #opentelemetry", url: "https://cloud-native.slack.com/archives/CJFCJHG4Q" },
+  {
+    name: "CNCF DevStats",
+    url: "https://opentelemetry.devstats.cncf.io/d/8/dashboards?orgId=1&refresh=15m",
+  },
+  { name: "Privacy Policy", url: "https://www.linuxfoundation.org/legal/privacy-policy" },
+  { name: "Trademark Usage", url: "https://www.linuxfoundation.org/legal/trademark-usage" },
+  { name: "Marketing Guidelines", url: "/community/marketing-guidelines/" },
+  { name: "Site-build info", url: "/site/" },
+];
+
+describe("FooterV1", () => {
+  it("renders all 7 user (left-cluster) links with the correct hrefs and aria-labels", () => {
+    renderFooter();
+
+    for (const link of expectedLeftLinks) {
+      const a = screen.getByRole("link", { name: link.name });
+      expect(a).toHaveAttribute("href", link.url);
+      expect(a).toHaveAttribute("title", link.name);
+    }
+  });
+
+  it("renders all 7 developer (right-cluster) links with the correct hrefs and aria-labels", () => {
+    renderFooter();
+
+    for (const link of expectedRightLinks) {
+      const a = screen.getByRole("link", { name: link.name });
+      expect(a).toHaveAttribute("href", link.url);
+      expect(a).toHaveAttribute("title", link.name);
+    }
+  });
+
+  it("marks external links with target=_blank and rel=noopener", () => {
+    renderFooter();
+
+    const github = screen.getByRole("link", { name: "GitHub" });
+    expect(github).toHaveAttribute("target", "_blank");
+    expect(github.getAttribute("rel")).toMatch(/\bnoopener\b/);
+  });
+
+  it("does not open internal links in a new tab", () => {
+    renderFooter();
+
+    const internal = screen.getByRole("link", { name: "Marketing Guidelines" });
+    expect(internal).not.toHaveAttribute("target");
+  });
+
+  it('preserves rel="me" on the Mastodon link alongside noopener', () => {
+    renderFooter();
+
+    const mastodon = screen.getByRole("link", { name: "Mastodon" });
+    const rel = mastodon.getAttribute("rel") ?? "";
+    expect(rel).toMatch(/\bme\b/);
+    expect(rel).toMatch(/\bnoopener\b/);
+  });
+
+  it("renders the copyright with the CC BY 4.0 link", () => {
+    renderFooter();
+
+    const ccLink = screen.getByRole("link", { name: /CC BY 4\.0/i });
+    expect(ccLink).toHaveAttribute("href", "https://creativecommons.org/licenses/by/4.0");
+    expect(ccLink).toHaveAttribute("target", "_blank");
+  });
+
+  it("renders the copyright text with the year span and authors", () => {
+    renderFooter();
+
+    const footer = screen.getByRole("contentinfo");
+    expect(within(footer).getByText(/2019.*present/)).toBeInTheDocument();
+    expect(within(footer).getByText(/OpenTelemetry Authors/)).toBeInTheDocument();
+  });
+});
diff --git a/ecosystem-explorer/src/v1/components/layout/footer.tsx b/ecosystem-explorer/src/v1/components/layout/footer.tsx
new file mode 100644
index 00000000..eb4d8ed8
--- /dev/null
+++ b/ecosystem-explorer/src/v1/components/layout/footer.tsx
@@ -0,0 +1,179 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * FooterV1 — mirrors opentelemetry.io's `.td-footer` chrome verbatim.
+ *
+ * Source rules (in the local opentelemetry.io clone):
+ *   themes/docsy/layouts/_partials/footer.html        — three-column layout
+ *   themes/docsy/layouts/_partials/footer/{left,right,center,links,copyright}.html
+ *   themes/docsy/assets/scss/td/_footer.scss          — dark surface + spacing
+ *   config/_default/hugo.yaml                         — link inventory + copyright
+ *
+ * Link inventory is locked against the upstream YAML (7 user + 7 developer).
+ * Icons follow the locked decision (foundation-audit Q3, 2026-05-06): inline
+ * SVG for brand marks Lucide doesn't ship; Lucide for everything else.
+ */
+
+import { AreaChart, Book, Hammer, Image, LineChart, Mail, Megaphone, Video } from "lucide-react";
+import { BlueskyIcon } from "@/v1/components/icons/bluesky-icon";
+import { GitHubIcon } from "@/v1/components/icons/github-icon";
+import { MastodonIcon } from "@/v1/components/icons/mastodon-icon";
+import { SlackIcon } from "@/v1/components/icons/slack-icon";
+import { StackOverflowIcon } from "@/v1/components/icons/stack-overflow-icon";
+import { TrademarkIcon } from "@/v1/components/icons/trademark-icon";
+
+type FooterLink = {
+  name: string;
+  url: string;
+  icon: React.ReactNode;
+  rel?: string;
+};
+
+const userLinks: FooterLink[] = [
+  {
+    name: "Mailing Lists",
+    url: "https://github.com/open-telemetry/community#mailing-lists",
+    icon: <Mail className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Bluesky",
+    url: "https://bsky.app/profile/opentelemetry.io",
+    icon: <BlueskyIcon className="td-footer__icon" />,
+  },
+  {
+    name: "Mastodon",
+    url: "https://fosstodon.org/@opentelemetry",
+    icon: <MastodonIcon className="td-footer__icon" />,
+    rel: "me",
+  },
+  {
+    name: "Stack Overflow",
+    url: "https://stackoverflow.com/questions/tagged/open-telemetry",
+    icon: <StackOverflowIcon className="td-footer__icon" />,
+  },
+  {
+    name: "OTel logos",
+    url: "https://github.com/cncf/artwork/tree/master/projects/opentelemetry",
+    icon: <Image className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Meeting Recordings",
+    url: "https://docs.google.com/spreadsheets/d/1SYKfjYhZdm2Wh2Cl6KVQalKg_m4NhTPZqq-8SzEVO6s",
+    icon: <Video className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Site analytics",
+    url: "https://lookerstudio.google.com/s/tSTKxK1ECeU",
+    icon: <LineChart className="td-footer__icon" aria-hidden />,
+  },
+];
+
+const developerLinks: FooterLink[] = [
+  {
+    name: "GitHub",
+    url: "https://github.com/open-telemetry",
+    icon: <GitHubIcon className="td-footer__icon" />,
+  },
+  {
+    name: "Slack #opentelemetry",
+    url: "https://cloud-native.slack.com/archives/CJFCJHG4Q",
+    icon: <SlackIcon className="td-footer__icon" />,
+  },
+  {
+    name: "CNCF DevStats",
+    url: "https://opentelemetry.devstats.cncf.io/d/8/dashboards?orgId=1&refresh=15m",
+    icon: <AreaChart className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Privacy Policy",
+    url: "https://www.linuxfoundation.org/legal/privacy-policy",
+    icon: <Book className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Trademark Usage",
+    url: "https://www.linuxfoundation.org/legal/trademark-usage",
+    icon: <TrademarkIcon className="td-footer__icon" />,
+  },
+  {
+    name: "Marketing Guidelines",
+    url: "/community/marketing-guidelines/",
+    icon: <Megaphone className="td-footer__icon" aria-hidden />,
+  },
+  {
+    name: "Site-build info",
+    url: "/site/",
+    icon: <Hammer className="td-footer__icon" aria-hidden />,
+  },
+];
+
+const EXTERNAL_URL = /^https?:\/\//;
+
+function FooterLinks({ items }: { items: FooterLink[] }) {
+  return (
+    <ul className="td-footer__links-list">
+      {items.map((link) => {
+        const isExternal = EXTERNAL_URL.test(link.url);
+        const rel = [link.rel, isExternal ? "noopener" : undefined].filter(Boolean).join(" ");
+        return (
+          <li key={link.name} className="td-footer__links-item">
+            <a
+              href={link.url}
+              title={link.name}
+              aria-label={link.name}
+              target={isExternal ? "_blank" : undefined}
+              rel={rel || undefined}
+            >
+              {link.icon}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function FooterV1() {
+  return (
+    <footer className="td-footer">
+      <div className="td-footer__container">
+        <div className="td-footer__row">
+          <div className="td-footer__left">
+            <FooterLinks items={userLinks} />
+          </div>
+          <div className="td-footer__right">
+            <FooterLinks items={developerLinks} />
+          </div>
+          <div className="td-footer__center">
+            <span className="td-footer__copyright">
+              &copy; 2019&ndash;present{" "}
+              <span className="td-footer__authors">
+                OpenTelemetry Authors | Docs{" "}
+                <a
+                  href="https://creativecommons.org/licenses/by/4.0"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  CC BY 4.0
+                </a>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/ecosystem-explorer/src/v1/styles/cncf-callout.css b/ecosystem-explorer/src/v1/styles/cncf-callout.css
new file mode 100644
index 00000000..14fbac93
--- /dev/null
+++ b/ecosystem-explorer/src/v1/styles/cncf-callout.css
@@ -0,0 +1,74 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * CncfCallout — explorer-original chrome between `<main>` and `<FooterV1 />`.
+ * No upstream equivalent on opentelemetry.io.
+ *
+ * Surface: OTel-secondary (purple `#4f62ad`) per the design brief
+ * (`projects/84-ui-ux-design/ecosystem-explorer-v1-design-brief.md` line 55),
+ * not the mockup's neutral `box-muted`.
+ */
+
+.td-cncf-callout {
+  font-size: 16px;
+  background-color: #4f62ad; /* OTel purple — secondary */
+  color: #fff;
+  padding: 2rem 0;
+  text-align: center;
+}
+
+.td-cncf-callout__container {
+  width: 100%;
+  max-width: 1320px;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.td-cncf-callout__lead {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.td-cncf-callout__lead strong {
+  font-weight: 600;
+}
+
+.td-cncf-callout__link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.td-cncf-callout__link:hover,
+.td-cncf-callout__link:focus-visible {
+  color: #f5a800; /* OTel orange */
+}
+
+.td-cncf-callout__logo {
+  height: 32px;
+  width: auto;
+  color: #fff;
+  opacity: 0.95;
+}
diff --git a/ecosystem-explorer/src/v1/styles/footer.css b/ecosystem-explorer/src/v1/styles/footer.css
new file mode 100644
index 00000000..19f0cde5
--- /dev/null
+++ b/ecosystem-explorer/src/v1/styles/footer.css
@@ -0,0 +1,149 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Footer — mirrors opentelemetry.io's `.td-footer` chrome.
+ *
+ * Source rules (in the local opentelemetry.io clone):
+ *   themes/docsy/assets/scss/td/_footer.scss — base sizing, padding, border
+ *   themes/docsy/assets/scss/td/_boxes.scss  — `.td-box--dark` surface tokens
+ *   themes/docsy/layouts/_partials/footer.html — 3-column responsive layout
+ *
+ * Pixel-anchored at 16px-rem (the explorer sets `html { font-size: 14px }`
+ * globally, so rem-based descendants would shrink). We pin the footer subtree
+ * at 16px so `em` resolves correctly and `rem` values match Bootstrap's scale.
+ *
+ * Surface stays dark in both themes — upstream `.td-footer @extend .td-box--dark`
+ * imposes the dark background regardless of `data-bs-theme`. Only the top
+ * border color flips per theme.
+ */
+
+.td-footer {
+  font-size: 16px;
+  background-color: #212529; /* $dark / $gray-900 — `.td-box--dark` */
+  color: #fff; /* color-contrast($gray-900) */
+  min-height: 10rem;
+  padding-top: 3rem; /* map-get($spacers, 5) */
+  padding-bottom: 1rem;
+  border-top: 1px solid #495057; /* --bs-border-color / --bs-gray-700 */
+}
+
+.td-footer__container {
+  width: 100%;
+  max-width: 1320px;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.td-footer__row {
+  display: grid;
+  gap: 0.75rem 1rem;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "left right"
+    "center center";
+  align-items: center;
+}
+
+@media (min-width: 576px) {
+  .td-footer__row {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas: "left center right";
+  }
+}
+
+.td-footer__left {
+  grid-area: left;
+}
+
+.td-footer__right {
+  grid-area: right;
+  text-align: right;
+}
+
+.td-footer__center {
+  grid-area: center;
+  font-size: 0.875em; /* @extends .small */
+  text-align: center;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.td-footer__copyright {
+  display: inline;
+}
+
+.td-footer__authors {
+  padding-left: 0.25rem;
+}
+
+.td-footer__center a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.td-footer__center a:hover,
+.td-footer__center a:focus-visible {
+  color: #f5a800; /* OTel orange — brand secondary */
+}
+
+.td-footer__links-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.td-footer__links-item {
+  display: inline-block;
+  margin-right: 0.5rem;
+  font-size: 1.25rem; /* map-get($font-sizes, 4) */
+  line-height: 1;
+}
+
+.td-footer__links-item:last-child {
+  margin-right: 0;
+}
+
+.td-footer__links-item a {
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out;
+}
+
+.td-footer__links-item a:hover,
+.td-footer__links-item a:focus-visible {
+  color: #f5a800; /* OTel orange — brand secondary */
+}
+
+.td-footer__links-item a:focus-visible {
+  outline: 2px solid #f5a800;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.td-footer__icon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: -0.125em;
+}
diff --git a/ecosystem-explorer/src/v1/styles/index.css b/ecosystem-explorer/src/v1/styles/index.css
index eb65f3cc..bf146c77 100644
--- a/ecosystem-explorer/src/v1/styles/index.css
+++ b/ecosystem-explorer/src/v1/styles/index.css
@@ -20,11 +20,16 @@
  * - tokens.css       — v1-only surface-token overrides, scoped via `.v1-app`
  * - navbar.css       — v1 navbar (`.td-navbar`) — mirrors opentelemetry.io
  * - theme-toggle.css — v1 theme toggle dropdown — mirrors opentelemetry.io
+ * - cncf-callout.css — sitewide CNCF band above the footer
+ * - footer.css       — v1 footer (`.td-footer`) — mirrors opentelemetry.io
  *
- * Navbar and theme-toggle styles use class selectors (`.td-navbar`,
- * `.td-light-dark-menu__*`) and only match elements rendered by `<V1App />`,
- * so they're inert in the legacy bundle even when both branches ship.
+ * All v1 styles use class selectors (`.td-navbar`, `.td-footer`,
+ * `.td-cncf-callout`, `.td-light-dark-menu__*`) and only match elements
+ * rendered by `<V1App />`, so they're inert in the legacy bundle even when
+ * both branches ship.
  */
 @import "./tokens.css";
 @import "./navbar.css";
 @import "./theme-toggle.css";
+@import "./cncf-callout.css";
+@import "./footer.css";
diff --git a/projects/84-ui-ux-design/NEXT-STEPS.md b/projects/84-ui-ux-design/NEXT-STEPS.md
index d27a8f4e..fa34a6cb 100644
--- a/projects/84-ui-ux-design/NEXT-STEPS.md
+++ b/projects/84-ui-ux-design/NEXT-STEPS.md
@@ -4,7 +4,7 @@ issue: 84
 type: roadmap
 phase: meta
 status: planning
-last_updated: "2026-05-13"
+last_updated: "2026-05-14"
 ---
 
 ## Next steps
@@ -58,6 +58,9 @@ This is a _living_ document. Update it as decisions land and PRs ship. Cross-ref
   `<LegacyApp />`; v1 chrome and pages live under a new `src/v1/` directory; primitives stay in
   `src/components/ui/`. See [`v1-routing-pivot.md`](./v1-routing-pivot.md). PR 2 (#453) re-scoped to
   docs + dormant navbar code on this branch; PR 2b (new) introduces `src/v1/` and the boundary read.
+- **2026-05-14 snapshot:** PRs 1, 2, 2b, and 4 are merged on `main`. PR 3 (SubNav) and PR 5
+  (TypeStripe + DetailCard slot) are in review. PR 6 (FooterV1 + CncfCallout) is ready to open on
+  `feat/84-pr6-footer` — first PR that swaps the legacy `<Footer />` placeholder for the v1 chrome.
 
 ---
 
@@ -65,14 +68,13 @@ This is a _living_ document. Update it as decisions land and PRs ship. Cross-ref
 
 In order:
 
-- [x] PR 1 (#377), PR 4 (#455), PR 2 (#453) — all merged on `main`.
-- [ ] Open PR 2b (`feat/84-pr2b-v1-scaffolding`) — branch off `main`, introduce `src/v1/`, extract
-      `<LegacyApp />` into `src/LegacyApp.tsx`, write `<V1App />` mirroring legacy routes (renders
-      existing page components under v1 chrome until Phases 2-5 swap them), move dormant navbar +
-      theme-toggle + icons + CSS into `src/v1/`, and add the single `isEnabled("V1_REDESIGN")`
-      boundary read in `src/App.tsx`. First PR where the redesign is reachable on `feat/84-*`
-      preview deploys.
-- [ ] Start PR 3 (`feat/84-pr3-subnav`) once PR 2b is in review.
+- [x] PR 1 (#377), PR 2 (#453), PR 2b (#470), PR 4 (#455) — all merged on `main`.
+- [x] PR 3 (`feat/84-pr3-subnav`) — opened, in review.
+- [x] PR 5 (`feat/84-pr5-typestripe`) — opened, in review.
+- [ ] Open PR 6 (`feat/84-pr6-footer`) — swap legacy `<Footer />` for `<FooterV1 />` +
+      `<CncfCallout />` in `<V1App />`; ship the seven inline brand SVGs (Bluesky, GitHub,
+      Mastodon, Slack, Stack Overflow, Trademark, plus the CNCF wordmark).
+- [ ] PR 7 (Playwright visual regression baseline) — next after PR 6 lands.
 
 ---
 
@@ -89,11 +91,11 @@ Reviewable by one person.
 | 0   | Add `V1_REDESIGN` flag                                | One line in `src/lib/feature-flags.ts`. Ships as a no-op.                                                                                                                                                                                                                                                                                                                                                                                                                                                           | All other foundation PRs      | ✅ Done (on `main`)         |
 | 1   | Theme system                                          | `src/styles/` folder (modular CSS partials). Light + dark + auto switching. No-flash init script in `index.html`. Reconcile dark surface tokens. Persist to `localStorage["td-color-theme"]`. `<ThemeToggle />` authored (not rendered). **Note:** dark-surface reconciliation is global (no `V1_REDESIGN` gate); light theme, persistence, and toggle are additive with no consumer until PR 2.                                                                                                                    | PR 2 (toggle lives in NavBar) | 🚧 Implemented — pending PR |
 | 2   | NavBar v1                                             | **Re-scoped 2026-05-13 (pivot):** navbar component, theme-toggle rewrite, icons, and CSS ship as **dormant** code in `src/components/`; `App.tsx`/`main.tsx` flag wiring reverted; docs capture the pivot. opentelemetry.io-style chrome (always-dark): single "Docs" link, "OpenTelemetry" brand text + `OtelLogo` placeholder, `<ThemeToggle />`. Search and language switcher deferred.                                                                                                                          | PR 2b                         | ✅ Done (#453)              |
-| 2b  | v1 scaffolding                                        | Introduce `src/v1/`; move dormant navbar/theme-toggle/icons into `src/v1/`; extract `<LegacyApp />` into `src/LegacyApp.tsx`; add `<V1App />` mirroring legacy routes (rendering existing page components under v1 chrome until Phase 2-5 swap them); `src/App.tsx` reduces to a single `isEnabled("V1_REDESIGN")` boundary read. v1 chrome reuses legacy `<Footer />` as a placeholder until PR 6. CSS scoped via `.v1-app` class wrapper. Canonical paths; per-deploy bundle via existing `netlify.toml` pattern. | PR 3 (SubNav sits beneath it) | 🚧 Pending PR               |
-| 3   | SubNav                                                | Breadcrumb component + optional right-side actions slot. Used by inner pages. Lives in `src/v1/components/layout/`.                                                                                                                                                                                                                                                                                                                                                                                                 | Phases 2-5                    | —                           |
-| 4   | StatusPill + GlowBadge `secondary` + `error` variants | Add `<StatusPill>` covering all six OTel stability levels (development / alpha / beta / stable / deprecated / unmaintained). Leave legacy `StabilityBadge` untouched; migrate in a follow-up cleanup PR.                                                                                                                                                                                                                                                                                                            | Phases 3, 4                   | —                           |
-| 5   | TypeStripe + Card primitive update                    | 4px left-edge stripe primitive (5 colors) + extend `DetailCard` with the stripe slot (not `NavigationCard` — too specialized).                                                                                                                                                                                                                                                                                                                                                                                      | Phases 3, 4                   | —                           |
-| 6   | FooterV1 + CncfCallout                                | Two-cluster Docsy-style footer + CNCF callout above it. Inline SVGs for Bluesky / Mastodon / Stack Overflow icons (assuming we go with the recommended icon strategy). Both live in `src/v1/components/layout/`.                                                                                                                                                                                                                                                                                                    | —                             | —                           |
+| 2b  | v1 scaffolding                                        | Introduce `src/v1/`; move dormant navbar/theme-toggle/icons into `src/v1/`; extract `<LegacyApp />` into `src/LegacyApp.tsx`; add `<V1App />` mirroring legacy routes (rendering existing page components under v1 chrome until Phase 2-5 swap them); `src/App.tsx` reduces to a single `isEnabled("V1_REDESIGN")` boundary read. v1 chrome reuses legacy `<Footer />` as a placeholder until PR 6. CSS scoped via `.v1-app` class wrapper. Canonical paths; per-deploy bundle via existing `netlify.toml` pattern. | PR 3 (SubNav sits beneath it) | ✅ Done (#470)              |
+| 3   | SubNav                                                | Breadcrumb component + optional right-side actions slot. Used by inner pages. Lives in `src/v1/components/layout/`.                                                                                                                                                                                                                                                                                                                                                                                                 | Phases 2-5                    | 🚧 In review                |
+| 4   | StatusPill + GlowBadge `secondary` + `error` variants | Add `<StatusPill>` covering all six OTel stability levels (development / alpha / beta / stable / deprecated / unmaintained). Leave legacy `StabilityBadge` untouched; migrate in a follow-up cleanup PR.                                                                                                                                                                                                                                                                                                            | Phases 3, 4                   | ✅ Done (#455)              |
+| 5   | TypeStripe + Card primitive update                    | 4px left-edge stripe primitive (5 colors) + extend `DetailCard` with the stripe slot (not `NavigationCard` — too specialized). Colors map (`type-stripe-colors.ts`) is split out so React Fast Refresh stays happy; `CollectorComponentType` derived from the canonical `CollectorComponent["type"]` in `src/types/collector.ts`.                                                                                                                                                                                    | Phases 3, 4                   | 🚧 In review                |
+| 6   | FooterV1 + CncfCallout                                | Two-cluster Docsy-style footer + CNCF callout above it. Inline SVGs for Bluesky, GitHub, Mastodon, Slack, Stack Overflow, Trademark (Lucide v1 dropped brand glyphs for licensing), plus the CNCF wordmark. Footer stays dark in both themes; CncfCallout uses OTel-purple `td-box--secondary`. Both live in `src/v1/components/layout/`; brand icons in `src/v1/components/icons/`.                                                                                                                                 | —                             | 🚧 Pending PR               |
 | 7   | Playwright visual regression baseline                 | Configure Playwright. Snapshot each primitive in light + dark. Add `axe-core` for a11y.                                                                                                                                                                                                                                                                                                                                                                                                                             | Phase 1 cleanup               | —                           |
 | 8   | Cleanup                                               | Remove the `V1_REDESIGN` boundary read in `src/App.tsx`; delete the `<LegacyApp />` branch and the legacy `Header` / `Footer` plus replaced `src/features/...` content; remove the `V1_REDESIGN` entry from `lib/feature-flags.ts` and the `feat/84-*` pattern from `netlify.toml`; update `DESIGN.md` to reflect as-built.                                                                                                                                                                                         | Phase 2                       | —                           |
 
@@ -237,5 +239,11 @@ Surface early so it's not blocking when PR 04b is ready.
 | 2026-05-11 | PR 2 navbar implementation switched from Tailwind utilities to **scoped CSS partials** (`src/styles/navbar.css`, `src/styles/theme-toggle.css`) that mirror the upstream SCSS verbatim                                                                                                                                                                                                                                                                                                                                                                                                                                                | Tailwind utilities couldn't express `text-decoration-thickness` / `text-underline-offset` and the growing arbitrary-value soup was hard to keep in sync with opentelemetry.io. Pixel-anchored at 16px-rem inside `.td-navbar` to neutralise the explorer's global 14px rem. Restored `position: fixed` + `min-height: 64px` (was 104px, which is mobile-stacked metrics misapplied to desktop). Right-alignment now via `.td-navbar-nav-scroll { margin-left: auto }` wrapper, mirroring upstream. Hover renders a 3px orange underline at 0.5em offset. Theme-toggle icons switched from Lucide to inline Bootstrap-Icons SVGs (`sun-fill`, `moon-stars-fill`, `circle-half`); active row indicated by background colour only (no checkmark, matching upstream). Trigger icon mirrors current mode. |
 | 2026-05-12 | Pivot: `V1_REDESIGN` gates at the router boundary (single read in `App.tsx` swapping `<V1App />` for `<LegacyApp />`), not per-component. New `src/v1/` directory owns chrome + page-level features; primitives stay in `src/components/ui/`. Per-deploy bundle via existing `netlify.toml` pattern.                                                                                                                                                                                                                                                                                                                                  | Decided on the OpenTelemetry Communications SIG call ([Zoom recording](https://zoom.us/rec/play/6w6ij69psp17Vo3GaZeaarr7mDGOfrUNE2m7HuIDb1XCwKvmnBWzWkcli9lU3Q3xMyqeFa3aNxyFWJs.WcZZoY03UygQ-toH)); refined via grilling on 2026-05-13. See [`v1-routing-pivot.md`](./v1-routing-pivot.md). Supersedes the 2026-05-05 rows "Stage Phase 1 into 9 PRs gated by V1_REDESIGN" and "Migration strategy: feature-flagged side-by-side". PR 2 (#453) re-scoped to docs + dormant code; new PR 2b adds the scaffolding.                                                                                                                                                                                                                                                                                     |
 | 2026-05-13 | PR 2b shape locked via grilling: PR 6 stays separate; `<V1App />` mirrors legacy routes rendering existing page components inside v1 chrome (each phase swaps its route's component); boundary read uses `isEnabled("V1_REDESIGN")` and both branches ship in both bundles (computed-key env access skips Vite's constant-fold); `<LegacyApp />` lives at `src/LegacyApp.tsx`; v1 reuses legacy `<Footer />` as placeholder until PR 6; CSS scoped via `.v1-app` class applied both to `<html>` (via a single carve-out flag read in `main.tsx`, restoring the body-bg behavior reverted by PR 453) and to `<V1App />`'s wrapper div. | Trade-offs: convention consistency for the boundary read over per-deploy bundle separation (~5KB JS + ~11KB CSS unused per build, acceptable). The `main.tsx` carve-out exists so body bg paints against v1 surface tokens from the first paint — body itself lives outside `<V1App />`'s wrapper subtree, so the cascade only reaches body when `.v1-app` is on `<html>`. PR 8 cleanup removes both the carve-out and the App.tsx boundary read. Each Phase 2-5 PR edits `V1App.tsx`'s route table to swap in its v1 component; `LegacyApp.tsx`'s table is frozen until PR 8 deletes it. Resolves the foundation-audit "PR 2b decides CSS scoping" open question.                                                                                                                                   |
+| 2026-05-14 | PR 5 TypeStripe `ComponentType` renamed to `CollectorComponentType` and derived from `CollectorComponent["type"]` in `src/types/collector.ts`. `<DetailCard typeStripe>` mounts `<TypeStripe>` rather than re-implementing the stripe span inline. Standalone `<TypeStripe>` keeps only `aria-hidden` (no redundant `role="presentation"` on a `<span>`).                                                                                                                                                                                                                                                                              | Removes the React `ComponentType<P>` naming shadow and the duplicated string union (the registry data is the canonical source). Single rendering path for the stripe so future tweaks land in one place. Post-review cleanups from /simplify on `feat/84-pr5-typestripe`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| 2026-05-14 | PR 6 FooterV1 stays dark in both themes, mirroring opentelemetry.io's `.td-footer @extend .td-box--dark` rule; hover state uses OTel orange `#f5a800` rather than Docsy's auto-mixed blue.                                                                                                                                                                                                                                                                                                                                                                                                                                            | Upstream `_footer.scss` ships a `// TODO: don't impose .td-box--dark` comment, so dark-everywhere is intentional today. OTel-orange hover is a small deviation from Docsy traded for brand alignment with the rest of the explorer chrome.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| 2026-05-14 | PR 6 CncfCallout uses `td-box--secondary` (OTel purple `#4f62ad`) for the surface, not the mockup's neutral `box-muted`. CNCF wordmark is the upstream `static/img/logos/cncf-white.svg`, inlined as `<CncfLogo />` in `src/v1/components/icons/`.                                                                                                                                                                                                                                                                                                                                                                                    | Design brief (`ecosystem-explorer-v1-design-brief.md`) is the more recent intent; mockup was a sketch. The purple band carries brand presence and visually separates from the dark footer below. opentelemetry.io has no sitewide CNCF callout to mirror, so this is explorer-original chrome.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| 2026-05-14 | PR 6 includes the upstream "Site-build info" link (`fa-hammer`) pointing at `/site/`. The actual `/site/` page is a follow-up — clicking it on v1 deploys today renders the v1 NotFoundPage.                                                                                                                                                                                                                                                                                                                                                                                                                                          | Maintains 1:1 link-cluster parity with opentelemetry.io. The page is planned for the explorer rather than dropped or swapped; tracked as a follow-up after Phase 1.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| 2026-05-14 | PR 6 inline-SVG icon set extended to GitHub, Slack, and the Trademark glyph (in addition to Bluesky / Mastodon / Stack Overflow from the 2026-05-06 locked decision). Lucide v1.x dropped brand glyphs for licensing reasons.                                                                                                                                                                                                                                                                                                                                                                                                         | Discovered during implementation. Brand SVGs sourced from `@fortawesome/fontawesome-free` (CC BY 4.0). All inline icons live in `src/v1/components/icons/`. Total inline-SVG bundle cost is well under the ~75kb Font Awesome alternative.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| 2026-05-14 | PR 6 `.td-footer__container` carries `max-width: 1320px` matching `.td-cncf-callout__container` and upstream Bootstrap `.container-xxl`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Without it, the footer would go full-bleed on ultrawide screens while the CNCF band above stayed bounded. Cosmetic inconsistency caught during /simplify.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
 Add a row whenever a decision lands. Keeps the doc honest.

From 93fb6bfa06b8637ff117017f5735035739f3ddcf Mon Sep 17 00:00:00 2001
From: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Date: Thu, 14 May 2026 11:01:05 -0300
Subject: [PATCH 2/2] refactor(ui): address Copilot review + update graduation
 status

Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
---
 .../src/v1/components/layout/cncf-callout.test.tsx     |  6 +++---
 .../src/v1/components/layout/cncf-callout.tsx          |  4 ++--
 .../src/v1/components/layout/footer.test.tsx           |  9 ++++++---
 ecosystem-explorer/src/v1/components/layout/footer.tsx |  6 ++++--
 ecosystem-explorer/src/v1/styles/footer.css            |  5 +++--
 projects/84-ui-ux-design/NEXT-STEPS.md                 | 10 +++++-----
 6 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx b/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
index 8eb1fb63..ceca1425 100644
--- a/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
+++ b/ecosystem-explorer/src/v1/components/layout/cncf-callout.test.tsx
@@ -18,11 +18,11 @@ import { describe, it, expect } from "vitest";
 import { CncfCallout } from "./cncf-callout";
 
 describe("CncfCallout", () => {
-  it("renders the CNCF incubating-project statement", () => {
+  it("renders the CNCF graduated-project statement", () => {
     render(<CncfCallout />);
 
     expect(screen.getByText(/OpenTelemetry is a/i)).toBeInTheDocument();
-    expect(screen.getByText(/incubating project/i)).toBeInTheDocument();
+    expect(screen.getByText(/graduated project/i)).toBeInTheDocument();
     expect(
       screen.getByText(/merger of the OpenTracing and OpenCensus projects/i)
     ).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe("CncfCallout", () => {
     render(<CncfCallout />);
 
     expect(
-      screen.getByRole("region", { name: /OpenTelemetry is a.*incubating project/i })
+      screen.getByRole("region", { name: /OpenTelemetry is a.*graduated project/i })
     ).toBeInTheDocument();
   });
 });
diff --git a/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx b/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
index fefb6dce..75249a24 100644
--- a/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
+++ b/ecosystem-explorer/src/v1/components/layout/cncf-callout.tsx
@@ -38,12 +38,12 @@ export function CncfCallout() {
             <a
               href="https://cncf.io"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
               className="td-cncf-callout__link"
             >
               CNCF
             </a>{" "}
-            incubating project.
+            graduated project.
           </strong>
           <br />
           Formed through a merger of the OpenTracing and OpenCensus projects.
diff --git a/ecosystem-explorer/src/v1/components/layout/footer.test.tsx b/ecosystem-explorer/src/v1/components/layout/footer.test.tsx
index f458dd6c..12a1ddb1 100644
--- a/ecosystem-explorer/src/v1/components/layout/footer.test.tsx
+++ b/ecosystem-explorer/src/v1/components/layout/footer.test.tsx
@@ -79,12 +79,14 @@ describe("FooterV1", () => {
     }
   });
 
-  it("marks external links with target=_blank and rel=noopener", () => {
+  it("marks external links with target=_blank and rel=noopener noreferrer", () => {
     renderFooter();
 
     const github = screen.getByRole("link", { name: "GitHub" });
     expect(github).toHaveAttribute("target", "_blank");
-    expect(github.getAttribute("rel")).toMatch(/\bnoopener\b/);
+    const rel = github.getAttribute("rel") ?? "";
+    expect(rel).toMatch(/\bnoopener\b/);
+    expect(rel).toMatch(/\bnoreferrer\b/);
   });
 
   it("does not open internal links in a new tab", () => {
@@ -94,13 +96,14 @@ describe("FooterV1", () => {
     expect(internal).not.toHaveAttribute("target");
   });
 
-  it('preserves rel="me" on the Mastodon link alongside noopener', () => {
+  it('preserves rel="me" on the Mastodon link alongside noopener noreferrer', () => {
     renderFooter();
 
     const mastodon = screen.getByRole("link", { name: "Mastodon" });
     const rel = mastodon.getAttribute("rel") ?? "";
     expect(rel).toMatch(/\bme\b/);
     expect(rel).toMatch(/\bnoopener\b/);
+    expect(rel).toMatch(/\bnoreferrer\b/);
   });
 
   it("renders the copyright with the CC BY 4.0 link", () => {
diff --git a/ecosystem-explorer/src/v1/components/layout/footer.tsx b/ecosystem-explorer/src/v1/components/layout/footer.tsx
index eb4d8ed8..4e430c97 100644
--- a/ecosystem-explorer/src/v1/components/layout/footer.tsx
+++ b/ecosystem-explorer/src/v1/components/layout/footer.tsx
@@ -127,7 +127,9 @@ function FooterLinks({ items }: { items: FooterLink[] }) {
     <ul className="td-footer__links-list">
       {items.map((link) => {
         const isExternal = EXTERNAL_URL.test(link.url);
-        const rel = [link.rel, isExternal ? "noopener" : undefined].filter(Boolean).join(" ");
+        const rel = [link.rel, isExternal ? "noopener noreferrer" : undefined]
+          .filter(Boolean)
+          .join(" ");
         return (
           <li key={link.name} className="td-footer__links-item">
             <a
@@ -165,7 +167,7 @@ export function FooterV1() {
                 <a
                   href="https://creativecommons.org/licenses/by/4.0"
                   target="_blank"
-                  rel="noopener"
+                  rel="noopener noreferrer"
                 >
                   CC BY 4.0
                 </a>
diff --git a/ecosystem-explorer/src/v1/styles/footer.css b/ecosystem-explorer/src/v1/styles/footer.css
index 19f0cde5..c070fa14 100644
--- a/ecosystem-explorer/src/v1/styles/footer.css
+++ b/ecosystem-explorer/src/v1/styles/footer.css
@@ -27,8 +27,9 @@
  * at 16px so `em` resolves correctly and `rem` values match Bootstrap's scale.
  *
  * Surface stays dark in both themes — upstream `.td-footer @extend .td-box--dark`
- * imposes the dark background regardless of `data-bs-theme`. Only the top
- * border color flips per theme.
+ * imposes the dark background regardless of `data-bs-theme`. Upstream's top
+ * border color flips per theme; the explorer collapses this to a single dark
+ * border since the rendered surface doesn't change.
  */
 
 .td-footer {
diff --git a/projects/84-ui-ux-design/NEXT-STEPS.md b/projects/84-ui-ux-design/NEXT-STEPS.md
index fa34a6cb..f32908e3 100644
--- a/projects/84-ui-ux-design/NEXT-STEPS.md
+++ b/projects/84-ui-ux-design/NEXT-STEPS.md
@@ -72,8 +72,8 @@ In order:
 - [x] PR 3 (`feat/84-pr3-subnav`) — opened, in review.
 - [x] PR 5 (`feat/84-pr5-typestripe`) — opened, in review.
 - [ ] Open PR 6 (`feat/84-pr6-footer`) — swap legacy `<Footer />` for `<FooterV1 />` +
-      `<CncfCallout />` in `<V1App />`; ship the seven inline brand SVGs (Bluesky, GitHub,
-      Mastodon, Slack, Stack Overflow, Trademark, plus the CNCF wordmark).
+      `<CncfCallout />` in `<V1App />`; ship the seven inline brand SVGs (Bluesky, GitHub, Mastodon,
+      Slack, Stack Overflow, Trademark, plus the CNCF wordmark).
 - [ ] PR 7 (Playwright visual regression baseline) — next after PR 6 lands.
 
 ---
@@ -94,8 +94,8 @@ Reviewable by one person.
 | 2b  | v1 scaffolding                                        | Introduce `src/v1/`; move dormant navbar/theme-toggle/icons into `src/v1/`; extract `<LegacyApp />` into `src/LegacyApp.tsx`; add `<V1App />` mirroring legacy routes (rendering existing page components under v1 chrome until Phase 2-5 swap them); `src/App.tsx` reduces to a single `isEnabled("V1_REDESIGN")` boundary read. v1 chrome reuses legacy `<Footer />` as a placeholder until PR 6. CSS scoped via `.v1-app` class wrapper. Canonical paths; per-deploy bundle via existing `netlify.toml` pattern. | PR 3 (SubNav sits beneath it) | ✅ Done (#470)              |
 | 3   | SubNav                                                | Breadcrumb component + optional right-side actions slot. Used by inner pages. Lives in `src/v1/components/layout/`.                                                                                                                                                                                                                                                                                                                                                                                                 | Phases 2-5                    | 🚧 In review                |
 | 4   | StatusPill + GlowBadge `secondary` + `error` variants | Add `<StatusPill>` covering all six OTel stability levels (development / alpha / beta / stable / deprecated / unmaintained). Leave legacy `StabilityBadge` untouched; migrate in a follow-up cleanup PR.                                                                                                                                                                                                                                                                                                            | Phases 3, 4                   | ✅ Done (#455)              |
-| 5   | TypeStripe + Card primitive update                    | 4px left-edge stripe primitive (5 colors) + extend `DetailCard` with the stripe slot (not `NavigationCard` — too specialized). Colors map (`type-stripe-colors.ts`) is split out so React Fast Refresh stays happy; `CollectorComponentType` derived from the canonical `CollectorComponent["type"]` in `src/types/collector.ts`.                                                                                                                                                                                    | Phases 3, 4                   | 🚧 In review                |
-| 6   | FooterV1 + CncfCallout                                | Two-cluster Docsy-style footer + CNCF callout above it. Inline SVGs for Bluesky, GitHub, Mastodon, Slack, Stack Overflow, Trademark (Lucide v1 dropped brand glyphs for licensing), plus the CNCF wordmark. Footer stays dark in both themes; CncfCallout uses OTel-purple `td-box--secondary`. Both live in `src/v1/components/layout/`; brand icons in `src/v1/components/icons/`.                                                                                                                                 | —                             | 🚧 Pending PR               |
+| 5   | TypeStripe + Card primitive update                    | 4px left-edge stripe primitive (5 colors) + extend `DetailCard` with the stripe slot (not `NavigationCard` — too specialized). Colors map (`type-stripe-colors.ts`) is split out so React Fast Refresh stays happy; `CollectorComponentType` derived from the canonical `CollectorComponent["type"]` in `src/types/collector.ts`.                                                                                                                                                                                   | Phases 3, 4                   | 🚧 In review                |
+| 6   | FooterV1 + CncfCallout                                | Two-cluster Docsy-style footer + CNCF callout above it. Inline SVGs for Bluesky, GitHub, Mastodon, Slack, Stack Overflow, Trademark (Lucide v1 dropped brand glyphs for licensing), plus the CNCF wordmark. Footer stays dark in both themes; CncfCallout uses OTel-purple `td-box--secondary`. Both live in `src/v1/components/layout/`; brand icons in `src/v1/components/icons/`.                                                                                                                                | —                             | 🚧 Pending PR               |
 | 7   | Playwright visual regression baseline                 | Configure Playwright. Snapshot each primitive in light + dark. Add `axe-core` for a11y.                                                                                                                                                                                                                                                                                                                                                                                                                             | Phase 1 cleanup               | —                           |
 | 8   | Cleanup                                               | Remove the `V1_REDESIGN` boundary read in `src/App.tsx`; delete the `<LegacyApp />` branch and the legacy `Header` / `Footer` plus replaced `src/features/...` content; remove the `V1_REDESIGN` entry from `lib/feature-flags.ts` and the `feat/84-*` pattern from `netlify.toml`; update `DESIGN.md` to reflect as-built.                                                                                                                                                                                         | Phase 2                       | —                           |
 
@@ -239,7 +239,7 @@ Surface early so it's not blocking when PR 04b is ready.
 | 2026-05-11 | PR 2 navbar implementation switched from Tailwind utilities to **scoped CSS partials** (`src/styles/navbar.css`, `src/styles/theme-toggle.css`) that mirror the upstream SCSS verbatim                                                                                                                                                                                                                                                                                                                                                                                                                                                | Tailwind utilities couldn't express `text-decoration-thickness` / `text-underline-offset` and the growing arbitrary-value soup was hard to keep in sync with opentelemetry.io. Pixel-anchored at 16px-rem inside `.td-navbar` to neutralise the explorer's global 14px rem. Restored `position: fixed` + `min-height: 64px` (was 104px, which is mobile-stacked metrics misapplied to desktop). Right-alignment now via `.td-navbar-nav-scroll { margin-left: auto }` wrapper, mirroring upstream. Hover renders a 3px orange underline at 0.5em offset. Theme-toggle icons switched from Lucide to inline Bootstrap-Icons SVGs (`sun-fill`, `moon-stars-fill`, `circle-half`); active row indicated by background colour only (no checkmark, matching upstream). Trigger icon mirrors current mode. |
 | 2026-05-12 | Pivot: `V1_REDESIGN` gates at the router boundary (single read in `App.tsx` swapping `<V1App />` for `<LegacyApp />`), not per-component. New `src/v1/` directory owns chrome + page-level features; primitives stay in `src/components/ui/`. Per-deploy bundle via existing `netlify.toml` pattern.                                                                                                                                                                                                                                                                                                                                  | Decided on the OpenTelemetry Communications SIG call ([Zoom recording](https://zoom.us/rec/play/6w6ij69psp17Vo3GaZeaarr7mDGOfrUNE2m7HuIDb1XCwKvmnBWzWkcli9lU3Q3xMyqeFa3aNxyFWJs.WcZZoY03UygQ-toH)); refined via grilling on 2026-05-13. See [`v1-routing-pivot.md`](./v1-routing-pivot.md). Supersedes the 2026-05-05 rows "Stage Phase 1 into 9 PRs gated by V1_REDESIGN" and "Migration strategy: feature-flagged side-by-side". PR 2 (#453) re-scoped to docs + dormant code; new PR 2b adds the scaffolding.                                                                                                                                                                                                                                                                                     |
 | 2026-05-13 | PR 2b shape locked via grilling: PR 6 stays separate; `<V1App />` mirrors legacy routes rendering existing page components inside v1 chrome (each phase swaps its route's component); boundary read uses `isEnabled("V1_REDESIGN")` and both branches ship in both bundles (computed-key env access skips Vite's constant-fold); `<LegacyApp />` lives at `src/LegacyApp.tsx`; v1 reuses legacy `<Footer />` as placeholder until PR 6; CSS scoped via `.v1-app` class applied both to `<html>` (via a single carve-out flag read in `main.tsx`, restoring the body-bg behavior reverted by PR 453) and to `<V1App />`'s wrapper div. | Trade-offs: convention consistency for the boundary read over per-deploy bundle separation (~5KB JS + ~11KB CSS unused per build, acceptable). The `main.tsx` carve-out exists so body bg paints against v1 surface tokens from the first paint — body itself lives outside `<V1App />`'s wrapper subtree, so the cascade only reaches body when `.v1-app` is on `<html>`. PR 8 cleanup removes both the carve-out and the App.tsx boundary read. Each Phase 2-5 PR edits `V1App.tsx`'s route table to swap in its v1 component; `LegacyApp.tsx`'s table is frozen until PR 8 deletes it. Resolves the foundation-audit "PR 2b decides CSS scoping" open question.                                                                                                                                   |
-| 2026-05-14 | PR 5 TypeStripe `ComponentType` renamed to `CollectorComponentType` and derived from `CollectorComponent["type"]` in `src/types/collector.ts`. `<DetailCard typeStripe>` mounts `<TypeStripe>` rather than re-implementing the stripe span inline. Standalone `<TypeStripe>` keeps only `aria-hidden` (no redundant `role="presentation"` on a `<span>`).                                                                                                                                                                                                                                                                              | Removes the React `ComponentType<P>` naming shadow and the duplicated string union (the registry data is the canonical source). Single rendering path for the stripe so future tweaks land in one place. Post-review cleanups from /simplify on `feat/84-pr5-typestripe`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| 2026-05-14 | PR 5 TypeStripe `ComponentType` renamed to `CollectorComponentType` and derived from `CollectorComponent["type"]` in `src/types/collector.ts`. `<DetailCard typeStripe>` mounts `<TypeStripe>` rather than re-implementing the stripe span inline. Standalone `<TypeStripe>` keeps only `aria-hidden` (no redundant `role="presentation"` on a `<span>`).                                                                                                                                                                                                                                                                             | Removes the React `ComponentType<P>` naming shadow and the duplicated string union (the registry data is the canonical source). Single rendering path for the stripe so future tweaks land in one place. Post-review cleanups from /simplify on `feat/84-pr5-typestripe`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | 2026-05-14 | PR 6 FooterV1 stays dark in both themes, mirroring opentelemetry.io's `.td-footer @extend .td-box--dark` rule; hover state uses OTel orange `#f5a800` rather than Docsy's auto-mixed blue.                                                                                                                                                                                                                                                                                                                                                                                                                                            | Upstream `_footer.scss` ships a `// TODO: don't impose .td-box--dark` comment, so dark-everywhere is intentional today. OTel-orange hover is a small deviation from Docsy traded for brand alignment with the rest of the explorer chrome.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | 2026-05-14 | PR 6 CncfCallout uses `td-box--secondary` (OTel purple `#4f62ad`) for the surface, not the mockup's neutral `box-muted`. CNCF wordmark is the upstream `static/img/logos/cncf-white.svg`, inlined as `<CncfLogo />` in `src/v1/components/icons/`.                                                                                                                                                                                                                                                                                                                                                                                    | Design brief (`ecosystem-explorer-v1-design-brief.md`) is the more recent intent; mockup was a sketch. The purple band carries brand presence and visually separates from the dark footer below. opentelemetry.io has no sitewide CNCF callout to mirror, so this is explorer-original chrome.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | 2026-05-14 | PR 6 includes the upstream "Site-build info" link (`fa-hammer`) pointing at `/site/`. The actual `/site/` page is a follow-up — clicking it on v1 deploys today renders the v1 NotFoundPage.                                                                                                                                                                                                                                                                                                                                                                                                                                          | Maintains 1:1 link-cluster parity with opentelemetry.io. The page is planned for the explorer rather than dropped or swapped; tracked as a follow-up after Phase 1.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |