diff --git a/ui/src/pages/DesignGuide.tsx b/ui/src/pages/DesignGuide.tsx
index 0d2f0c59e45..a184b0896c1 100644
--- a/ui/src/pages/DesignGuide.tsx
+++ b/ui/src/pages/DesignGuide.tsx
@@ -126,6 +126,23 @@ import { Identity } from "@/components/Identity";
 import { IssueReferencePill } from "@/components/IssueReferencePill";
 import { MembershipAction } from "@/components/MembershipAction";
 import { IssueOutputSection } from "@/components/issue-output/IssueOutputSection";
+import {
+  EnvInputsList,
+  ExternalSourcesList,
+  RequiredSkillsList,
+  StepSkillPlan,
+  StepSourcePolicy,
+  TeamCard,
+  TeamHierarchyPreview,
+  TeamRow,
+} from "@/pages/TeamCatalog";
+import {
+  onboardingTeams,
+  optionalTeam,
+  sampleSkillPreparations,
+  sampleTeam,
+  warnTeam,
+} from "@/pages/TeamCatalog.fixtures";
 import type { IssueWorkProduct } from "@paperclipai/shared";
 
 /* ------------------------------------------------------------------ */
@@ -221,6 +238,24 @@ function SubSection({ title, children }: { title: string; children: React.ReactN
   );
 }
 
+// Onboarding seam (design §6 + §12.5): the TeamCard tile in its "Pick a starter
+// team" 3-col grid, with the first defaultInstall tile selected.
+function TeamCardShowcase() {
+  const [selectedId, setSelectedId] = useState(onboardingTeams[0]?.id ?? null);
+  return (
+    <div className="grid max-w-2xl gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {onboardingTeams.map((team) => (
+        <TeamCard
+          key={team.id}
+          team={team}
+          selected={team.id === selectedId}
+          onSelect={() => setSelectedId(team.id)}
+        />
+      ))}
+    </div>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Color swatch                                                       */
 /* ------------------------------------------------------------------ */
@@ -259,6 +294,9 @@ export function DesignGuide() {
     { key: "status", label: "Status", value: "Active" },
     { key: "priority", label: "Priority", value: "High" },
   ]);
+  const [allowExternal, setAllowExternal] = useState(false);
+  const [allowUnpinned, setAllowUnpinned] = useState(false);
+  const [allowLocalPath, setAllowLocalPath] = useState(false);
 
   return (
     <div className="space-y-10 max-w-4xl">
@@ -1417,6 +1455,85 @@ export function DesignGuide() {
 
       {/* ============================================================ */}
       {/*  ICON REFERENCE                                               */}
+      {/* ============================================================ */}
+      {/*  TEAM CATALOG                                                 */}
+      {/* ============================================================ */}
+      <Section title="Team Catalog">
+        <p className="text-sm text-muted-foreground">
+          Components from the Team Catalog browse/install surface (<code className="font-mono text-xs">/teams</code>).
+          Fixtures are shared with the Storybook stories.
+        </p>
+
+        <SubSection title="TeamRow (browse list)">
+          <div className="w-[28rem] rounded-md border border-border">
+            <div className="px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              Bundled · 1
+            </div>
+            <TeamRow team={sampleTeam} selected onSelect={() => {}} />
+            <div className="px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              Optional · 2
+            </div>
+            <TeamRow team={optionalTeam} selected={false} onSelect={() => {}} />
+            <TeamRow team={warnTeam} selected={false} onSelect={() => {}} />
+          </div>
+        </SubSection>
+
+        <SubSection title="TeamCard (onboarding grid)">
+          <p className="text-xs text-muted-foreground">
+            Square tile for the onboarding &ldquo;Pick a starter team&rdquo; grid. Selected tile gets{" "}
+            <code className="font-mono">ring-2 ring-ring</code>. Drives the{" "}
+            <code className="font-mono">useInstallTeamCatalogEntry</code> simplified flow.
+          </p>
+          <TeamCardShowcase />
+        </SubSection>
+
+        <SubSection title="TeamHierarchyPreview">
+          <div className="max-w-md">
+            <TeamHierarchyPreview team={sampleTeam} />
+          </div>
+        </SubSection>
+
+        <SubSection title="RequiredSkillsList">
+          <div className="max-w-xl">
+            <RequiredSkillsList skills={sampleTeam.requiredSkills} />
+          </div>
+        </SubSection>
+
+        <SubSection title="EnvInputsList">
+          <div className="max-w-xl">
+            <EnvInputsList inputs={sampleTeam.envInputs} />
+          </div>
+        </SubSection>
+
+        <SubSection title="ExternalSourcesList">
+          <div className="max-w-xl">
+            <ExternalSourcesList sources={sampleTeam.sourceRefs} />
+          </div>
+        </SubSection>
+
+        <SubSection title="Source policy step (StepSourcePolicy)">
+          <div className="max-w-xl rounded-md border border-border p-4">
+            <StepSourcePolicy
+              team={warnTeam}
+              allowExternalSources={allowExternal}
+              allowUnpinnedOptionalSources={allowUnpinned}
+              allowLocalPathSources={allowLocalPath}
+              onChange={(key, value) => {
+                if (key === "external") setAllowExternal(value);
+                if (key === "unpinned") setAllowUnpinned(value);
+                if (key === "localPath") setAllowLocalPath(value);
+              }}
+            />
+          </div>
+        </SubSection>
+
+        <SubSection title="Skill plan step (StepSkillPlan)">
+          <div className="max-w-xl rounded-md border border-border p-4">
+            <StepSkillPlan team={sampleTeam} preparations={sampleSkillPreparations} />
+          </div>
+        </SubSection>
+      </Section>
+
       {/* ============================================================ */}
       <Section title="Common Icons (Lucide)">
         <div className="grid grid-cols-4 md:grid-cols-6 gap-4">
diff --git a/ui/storybook/stories/team-catalog.stories.tsx b/ui/storybook/stories/team-catalog.stories.tsx
index 012c5e84d2f..d45accae5f4 100644
--- a/ui/storybook/stories/team-catalog.stories.tsx
+++ b/ui/storybook/stories/team-catalog.stories.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type {
   Agent,
-  CatalogTeam,
   CatalogTeamImportPreviewResult,
   CompanyPortabilityCollisionStrategy,
 } from "@paperclipai/shared";
@@ -13,99 +12,25 @@ import {
   StepSkillPlan,
   StepSourcePolicy,
   StepTargetManager,
+  TeamCard,
   TeamDetailPane,
   TeamRow,
 } from "@/pages/TeamCatalog";
+import {
+  onboardingTeams,
+  optionalTeam,
+  sampleTeam as baseTeam,
+  warnTeam,
+} from "@/pages/TeamCatalog.fixtures";
 
 // ---------------------------------------------------------------------------
 // Fixtures
+//
+// Team fixtures (baseTeam/optionalTeam/warnTeam) are shared with the in-app
+// /design-guide showcase via @/pages/TeamCatalog.fixtures so the two surfaces
+// stay in sync. Preview/agent fixtures below are story-only.
 // ---------------------------------------------------------------------------
 
-const baseTeam: CatalogTeam = {
-  id: "paperclipai:bundled:company-defaults:core-exec-team",
-  key: "paperclipai/bundled/company-defaults/core-exec-team",
-  kind: "bundled",
-  category: "company-defaults",
-  slug: "core-exec-team",
-  name: "Core Exec Team",
-  description:
-    "A starter executive team: a CEO who manages a CTO and a CMO, plus a launch project and a weekly standup routine. Installs ready-to-run agents you can customize.",
-  path: "catalog/bundled/company-defaults/core-exec-team",
-  entrypoint: "TEAM.md",
-  schema: "agentcompanies/v1",
-  defaultInstall: true,
-  recommendedForCompanyTypes: ["company-root"],
-  tags: ["exec", "starter"],
-  counts: {
-    agents: 3,
-    projects: 1,
-    tasks: 1,
-    routines: 1,
-    localSkills: 1,
-    catalogSkills: 1,
-    externalSkillSources: 1,
-  },
-  rootAgentSlugs: ["ceo"],
-  agentSlugs: ["ceo", "cto", "cmo"],
-  projectSlugs: ["launch"],
-  requiredSkills: [
-    { type: "catalog", ref: "engineering/code-review", agentSlugs: ["cto"], resolved: true, catalogSkillKey: "engineering/code-review" },
-    { type: "github", ref: "acme/growth-playbook@v1.2.0", agentSlugs: ["cmo"], resolved: false, sourceRef: "v1.2.0" },
-  ],
-  envInputs: [
-    { key: "OPENAI_API_KEY", agentSlug: "cto", projectSlug: null, kind: "secret", requirement: "required" },
-    { key: "DEFAULT_TIMEZONE", agentSlug: null, projectSlug: "launch", kind: "plain", requirement: "optional" },
-  ],
-  sourceRefs: [
-    { type: "github", ref: "acme/growth-playbook@v1.2.0", pinned: true },
-    { type: "url", ref: "https://example.com/policies/brand.md", pinned: false },
-  ],
-  files: [
-    { path: "TEAM.md", kind: "team", sizeBytes: 2144, sha256: "a1" },
-    { path: "README.md", kind: "readme", sizeBytes: 980, sha256: "a2" },
-    { path: "agents/ceo/AGENTS.md", kind: "agent", sizeBytes: 1200, sha256: "a3" },
-    { path: "agents/cto/AGENTS.md", kind: "agent", sizeBytes: 1100, sha256: "a4" },
-    { path: "agents/cmo/AGENTS.md", kind: "agent", sizeBytes: 1050, sha256: "a5" },
-    { path: "projects/launch/PROJECT.md", kind: "project", sizeBytes: 640, sha256: "a6" },
-  ],
-  trustLevel: "external_sources",
-  compatibility: "compatible",
-  contentHash: "sha256:deadbeefdeadbeefdeadbeefdeadbeef",
-  packageName: "@paperclipai/teams-catalog",
-  packageVersion: "0.1.0",
-};
-
-const optionalTeam: CatalogTeam = {
-  ...baseTeam,
-  id: "paperclipai:optional:software-development:platform-pod",
-  key: "paperclipai/optional/software-development/platform-pod",
-  kind: "optional",
-  category: "software-development",
-  slug: "platform-pod",
-  name: "Platform Engineering Pod",
-  description: "An optional platform pod with a tech lead and two engineers.",
-  recommendedForCompanyTypes: [],
-  counts: { ...baseTeam.counts, agents: 4, routines: 2 },
-  rootAgentSlugs: ["tech-lead"],
-  agentSlugs: ["tech-lead", "eng-1", "eng-2", "sre"],
-  trustLevel: "markdown_only",
-  sourceRefs: [],
-};
-
-const warnTeam: CatalogTeam = {
-  ...baseTeam,
-  id: "paperclipai:optional:research:lab-with-local-source",
-  slug: "lab-with-local-source",
-  name: "Research Lab (local source)",
-  kind: "optional",
-  category: "research",
-  trustLevel: "scripts_executables",
-  sourceRefs: [
-    { type: "url", ref: "https://example.com/unpinned.md", pinned: false },
-    { type: "local_path", ref: "/Users/dev/skills/secret-sauce", pinned: false },
-  ],
-};
-
 const companyAgents: Agent[] = [
   makeAgent("agent-1", "Founder", "ceo"),
   makeAgent("agent-2", "Head of Eng", "engineer"),
@@ -348,6 +273,43 @@ export const InstallApplyProgress: Story = {
   ),
 };
 
+// Onboarding seam (design §6 + §12.5): the TeamCard tile rendered in the
+// 3-col "Pick a starter team" grid, with the first defaultInstall tile selected.
+export const OnboardingTeamGrid: Story = {
+  render: function Render() {
+    const [selectedId, setSelectedId] = useState(onboardingTeams[0]?.id ?? null);
+    return (
+      <Frame width="max-w-2xl">
+        <div className="space-y-1">
+          <h2 className="text-lg font-semibold">Pick a starter team</h2>
+          <p className="text-sm text-muted-foreground">
+            We&apos;ll set up agents, projects, and routines so you can start with a working team.
+          </p>
+        </div>
+        <div className="mt-4 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {onboardingTeams.map((team) => (
+            <TeamCard
+              key={team.id}
+              team={team}
+              selected={team.id === selectedId}
+              onSelect={() => setSelectedId(team.id)}
+            />
+          ))}
+        </div>
+      </Frame>
+    );
+  },
+};
+
+// A single TeamCard in its selected state.
+export const TeamCardSelected: Story = {
+  render: () => (
+    <div className="mx-auto w-64">
+      <TeamCard team={onboardingTeams[0]} selected onSelect={noop} />
+    </div>
+  ),
+};
+
 export const InstallSuccess: Story = {
   render: () => (
     <Frame>