adobe · GarthDB · Feb 13, 2026 · Feb 13, 2026
diff --git a/docs/markdown/pages/components/index.md b/docs/markdown/pages/components/index.md
@@ -11,7 +11,7 @@ Component API schemas for Spectrum.
 <ul>
 {% for item in collections.components %}
   <li>
-    <a href="/components/{{ item.fileSlug }}/">{{ item.data.title | default: item.fileSlug }}</a>
+    <a href="/components/{{ item.fileSlug }}/">{{ item.data.title | default: item.fileSlug }}</a>{% if item.data.description %} — {{ item.data.description }}{% endif %}
   </li>
 {% endfor %}
 </ul>
diff --git a/docs/markdown/pages/index.md b/docs/markdown/pages/index.md
@@ -17,7 +17,4 @@ API documentation, design tokens, and registry for **Spectrum**, Adobe's design
 
 ## Tools
 
-* [S2 Tokens Viewer](/s2-tokens-viewer/) — Browse Spectrum 2 tokens
-* [S2 Visualizer](/s2-visualizer/) — Token dependency graph (Spectrum 2)
-* [Visualizer](/visualizer/) — Token dependency graph (Spectrum 1)
-* [Release Timeline](/release-timeline/) — Release history
+See the [Tools](/tools/) page for web-based tools and developer utilities.
diff --git a/docs/markdown/pages/tokens/index.md b/docs/markdown/pages/tokens/index.md
@@ -11,7 +11,7 @@ Design tokens (color, typography, layout, etc.).
 <ul>
 {% for item in collections.tokens %}
   <li>
-    <a href="/tokens/{{ item.fileSlug }}/">{{ item.data.title | default: item.fileSlug }}</a>
+    <a href="/tokens/{{ item.fileSlug }}/">{{ item.data.title | default: item.fileSlug }}</a>{% if item.data.description %} — {{ item.data.description }}{% endif %}
   </li>
 {% endfor %}
 </ul>
diff --git a/docs/markdown/tokens/color-aliases.md b/docs/markdown/tokens/color-aliases.md
@@ -1,6 +1,6 @@
 ---
-title: color aliases
-description: Design tokens from color-aliases.json
+title: Color aliases
+description: "Semantic color tokens that reference the palette (e.g. focus, overlay)."
 tags:
   - tokens
   - color-aliases

diff --git a/docs/markdown/tokens/color-component.md b/docs/markdown/tokens/color-component.md
@@ -1,6 +1,6 @@
 ---
-title: color component
-description: Design tokens from color-component.json
+title: Color component
+description: "Component-specific color tokens."
 tags:
   - tokens
   - color-component

diff --git a/docs/markdown/tokens/color-palette.md b/docs/markdown/tokens/color-palette.md
@@ -1,6 +1,6 @@
 ---
-title: color palette
-description: Design tokens from color-palette.json
+title: Color palette
+description: "Raw color values (hex/rgb) for the Spectrum palette."
 tags:
   - tokens
   - color-palette

diff --git a/docs/markdown/tokens/icons.md b/docs/markdown/tokens/icons.md
@@ -1,6 +1,6 @@
 ---
-title: icons
-description: Design tokens from icons.json
+title: Icons
+description: "Color tokens for Spectrum icons (primary, hover, down, background, disabled)."
 tags:
   - tokens
   - icons

diff --git a/docs/markdown/tokens/layout-component.md b/docs/markdown/tokens/layout-component.md
@@ -1,6 +1,6 @@
 ---
-title: layout component
-description: Design tokens from layout-component.json
+title: Layout component
+description: "Component-specific layout tokens."
 tags:
   - tokens
   - layout-component

diff --git a/docs/markdown/tokens/layout.md b/docs/markdown/tokens/layout.md
@@ -1,6 +1,6 @@
 ---
-title: layout
-description: Design tokens from layout.json
+title: Layout
+description: "Spacing, dimensions, corner radius, and other layout primitives."
 tags:
   - tokens
   - layout

diff --git a/docs/markdown/tokens/semantic-color-palette.md b/docs/markdown/tokens/semantic-color-palette.md
@@ -1,6 +1,6 @@
 ---
-title: semantic color palette
-description: Design tokens from semantic-color-palette.json
+title: Semantic color palette
+description: "Semantic palette tokens (e.g. semantic blue, semantic red)."
 tags:
   - tokens
   - semantic-color-palette

diff --git a/docs/markdown/tokens/typography.md b/docs/markdown/tokens/typography.md
@@ -1,6 +1,6 @@
 ---
-title: typography
-description: Design tokens from typography.json
+title: Typography
+description: "Font families, weights, sizes, letter spacing, and text alignment."
 tags:
   - tokens
   - typography

diff --git a/docs/site/eleventy.config.js b/docs/site/eleventy.config.js
@@ -37,6 +37,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addGlobalData("navigation", navigation);
 
   eleventyConfig.addPassthroughCopy({ "public/favicon.png": "favicon.png" });
+  eleventyConfig.addPassthroughCopy({
+    "public/adobe_logo.svg": "adobe_logo.svg",
+  });
   eleventyConfig.addPassthroughCopy({ "public/.nojekyll": ".nojekyll" });
 
   eleventyConfig.addCollection("components", function (api) {

diff --git a/docs/site/moon.yml b/docs/site/moon.yml
@@ -17,13 +17,22 @@ fileGroups:
     - "eleventy.config.js"
     - "package.json"
 tasks:
+  generateToolsPage:
+    command:
+      - pnpm
+      - run
+      - generate:tools
+    platform: node
+    outputs:
+      - "src/tools.md"
   copyContent:
     command:
       - node
       - scripts/copy-content.js
     platform: system
     deps:
       - "markdown-generator:generate"
+      - "~:generateToolsPage"
   build:
     command:
       - pnpm

diff --git a/docs/site/package.json b/docs/site/package.json
@@ -20,7 +20,8 @@
   "scripts": {
     "build": "eleventy",
     "start": "eleventy --serve",
-    "clean": "rimraf ../../site .cache"
+    "clean": "rimraf ../../site .cache",
+    "generate:tools": "node scripts/generate-tools-page.js"
   },
   "dependencies": {
     "@11ty/eleventy": "^3.0.0",

diff --git a/docs/site/public/adobe_logo.svg b/docs/site/public/adobe_logo.svg
diff --git a/docs/site/scripts/generate-tools-page.js b/docs/site/scripts/generate-tools-page.js
@@ -0,0 +1,151 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you 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 http://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 REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { readFileSync, readdirSync, writeFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const REPO_ROOT = join(__dirname, "../../..");
+const SITE_SRC = join(__dirname, "../src");
+const GITHUB_BASE = "https://github.com/adobe/spectrum-design-data";
+const NPM_BASE = "https://www.npmjs.com/package";
+
+/** Web tools: deployed apps with fixed path and optional display label. */
+const WEB_TOOLS_CONFIG = [
+  {
+    dir: "s2-tokens-viewer",
+    path: "/s2-tokens-viewer/",
+    label: "S2 Tokens Viewer",
+  },
+  { dir: "s2-visualizer", path: "/s2-visualizer/", label: "S2 Visualizer" },
+  { dir: "visualizer", path: "/visualizer/", label: "S1 Visualizer" },
+  {
+    dir: "release-timeline",
+    path: "/release-timeline/",
+    label: "Release Timeline",
+  },
+];
+
+const WEB_TOOLS_FALLBACK_DESCRIPTIONS = {
+  "s2-tokens-viewer": "Browse and inspect Spectrum 2 design token values",
+  "s2-visualizer":
+    "Interactive dependency graph for Spectrum 2 tokens showing ancestor/descendant relationships, value filters, and search",
+  visualizer: "Interactive dependency graph for Spectrum 1 (legacy) tokens",
+  "release-timeline":
+    "Interactive visualization of Spectrum Tokens release history across legacy, stable, beta, and snapshot formats",
+};
+
+function readJson(path) {
+  try {
+    return JSON.parse(readFileSync(path, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function getDescription(pkg, fallback) {
+  if (pkg?.description && typeof pkg.description === "string") {
+    return pkg.description.trim();
+  }
+  return fallback || "No description.";
+}
+
+function isPrivatePackage(pkg) {
+  return pkg?.private === true || pkg?.access === "restricted";
+}
+
+function buildWebToolsSection(docsDir) {
+  const lines = [
+    "## Web Tools",
+    "",
+    "Interactive tools deployed with this site:",
+    "",
+  ];
+  for (const { dir, path, label } of WEB_TOOLS_CONFIG) {
+    const pkgPath = join(docsDir, dir, "package.json");
+    const pkg = readJson(pkgPath);
+    const desc = getDescription(pkg, WEB_TOOLS_FALLBACK_DESCRIPTIONS[dir]);
+    lines.push(`* **[${label}](${path})** — ${desc}`);
+  }
+  return lines.join("\n");
+}
+
+function buildDeveloperToolsSection(toolsDir) {
+  const dirs = readdirSync(toolsDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name);
+
+  const entries = [];
+  for (const dir of dirs) {
+    const pkgPath = join(toolsDir, dir, "package.json");
+    const pkg = readJson(pkgPath);
+    if (!pkg?.name) continue;
+
+    const description = getDescription(pkg);
+    const name = pkg.name;
+    const url = isPrivatePackage(pkg)
+      ? `${GITHUB_BASE}/tree/main/tools/${dir}`
+      : `${NPM_BASE}/${encodeURIComponent(name)}`;
+
+    entries.push({ name, url, description });
+  }
+
+  entries.sort((a, b) =>
+    a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+  );
+
+  const lines = [
+    "## Developer Tools",
+    "",
+    "Packages under `tools/` in the repo:",
+    "",
+  ];
+
+  for (const { name, url, description } of entries) {
+    lines.push(`* **[${name}](${url})** — ${description}`);
+  }
+
+  return lines.join("\n");
+}
+
+function generateToolsPage() {
+  const docsDir = join(REPO_ROOT, "docs");
+  const toolsDir = join(REPO_ROOT, "tools");
+  const outPath = join(SITE_SRC, "tools.md");
+
+  const frontmatter = `---
+title: Tools
+layout: base.liquid
+permalink: /tools/
+---
+
+<!-- Generated by scripts/generate-tools-page.js - do not edit by hand. -->
+
+`;
+
+  const webSection = buildWebToolsSection(docsDir);
+  const devSection = buildDeveloperToolsSection(toolsDir);
+
+  const content = `${frontmatter}# Tools
+
+${webSection}
+
+${devSection}
+`;
+
+  writeFileSync(outPath, content, "utf-8");
+  console.log("Generated:", outPath);
+}
+
+generateToolsPage();
diff --git a/docs/site/src/assets/css/base/index.css b/docs/site/src/assets/css/base/index.css
@@ -73,6 +73,9 @@ menu,
 
 header {
   margin: var(--spacing-large) 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-default);
 }
 
 header a:has(h1) {
@@ -82,6 +85,7 @@ header a:has(h1) {
 header h1 {
   display: flex;
   gap: var(--spacing-default);
+  font-weight: 700 !important;
 }
 
 header h1 img {
@@ -90,8 +94,6 @@ header h1 img {
 
 @media screen and (max-width: 768px) {
   header {
-    justify-content: baseline;
-    flex-direction: column;
     align-items: start;
   }
 }
@@ -174,9 +176,15 @@ footer .footer-label {
 
 footer menu {
   justify-content: center;
+  flex-wrap: wrap;
   margin-bottom: var(--spacing-large);
 }
 
+footer menu a {
+  font-weight: normal;
+  white-space: nowrap;
+}
+
 footer p:not(.footer-label) {
   text-align: center;
   font-style: italic;

diff --git a/docs/site/src/data/navigation.js b/docs/site/src/data/navigation.js
@@ -12,16 +12,11 @@ governing permissions and limitations under the License.
 
 export default {
   top: [
-    { text: "Home", url: "/" },
     { text: "Components", url: "/components/" },
     { text: "Tokens", url: "/tokens/" },
     { text: "Registry", url: "/registry/" },
     { text: "AI", url: "/ai/" },
+    { text: "Tools", url: "/tools/" },
   ],
-  bottom: [
-    { text: "S2 Tokens Viewer", url: "/s2-tokens-viewer/" },
-    { text: "S2 Visualizer", url: "/s2-visualizer/" },
-    { text: "Visualizer", url: "/visualizer/" },
-    { text: "Release Timeline", url: "/release-timeline/" },
-  ],
+  bottom: [],
 };
diff --git a/docs/site/src/includes/layout/footer.liquid b/docs/site/src/includes/layout/footer.liquid
@@ -11,11 +11,10 @@ governing permissions and limitations under the License.
 -->
 
 <footer>
-  <p class="footer-label">Tools</p>
+  <p class="footer-label">Spectrum</p>
   <menu>
-    <li><a href="/s2-tokens-viewer/">S2 Tokens Viewer</a></li>
-    <li><a href="/s2-visualizer/">S2 Visualizer</a></li>
-    <li><a href="/visualizer/">S1 Visualizer</a></li>
-    <li><a href="/release-timeline/">Release Timeline</a></li>
+    <li><a href="https://react-spectrum.adobe.com" class="spectrum-Link">React Spectrum</a></li>
+    <li><a href="https://opensource.adobe.com/spectrum-web-components/" class="spectrum-Link">Spectrum Web Components</a></li>
+    <li><a href="https://spectrum.adobe.com" class="spectrum-Link">Spectrum Website</a></li>
   </menu>
 </footer>