chore: initial scaffold of KDC Design System

Initial repository scaffold:
- design.md (google-labs-code/design.md format) as canonical token + guidelines source
- brand assets, foundations, tokens (W3C-style JSON)
- 12 component primitives, each with labeled anatomy.svg and spec README
- light / dark / high-contrast themes, web/mobile/email/print/presentation templates
- docs (getting started, principles, a11y, voice & tone, contributing)
- runnable web example, token build script stub, CI placeholder

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/tabs/anatomy.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 360" width="760" height="360" font-family="Inter, Arial, sans-serif" role="img" aria-label="Tabs anatomy">
+  <title>Tabs anatomy</title>
+  <desc>Labeled diagram of a KDC tab list: tab list, individual tab, active indicator, hover, disabled, panel, optional badge.</desc>
+
+  <rect width="760" height="360" fill="#F7F8FA"/>
+
+  <!-- tab list bar -->
+  <line x1="60" y1="160" x2="700" y2="160" stroke="#EDEFF3"/>
+
+  <!-- tabs -->
+  <g font-size="14">
+    <text x="80"  y="148" fill="#0B5FFF" font-weight="700">Overview</text>
+    <rect x="76"  y="156" width="84" height="3" rx="1.5" fill="#0B5FFF"/>
+
+    <text x="184" y="148" fill="#374151">Activity</text>
+    <g transform="translate(244 134)">
+      <rect width="22" height="18" rx="9" fill="#EDEFF3"/>
+      <text x="11" y="13" text-anchor="middle" fill="#111827" font-size="11" font-weight="700">12</text>
+    </g>
+
+    <text x="296" y="148" fill="#374151">Members</text>
+    <text x="384" y="148" fill="#B8BDC9">Billing</text>
+  </g>
+
+  <!-- panel -->
+  <rect x="60" y="180" width="640" height="100" rx="8" fill="#FFFFFF" stroke="#EDEFF3"/>
+  <text x="80" y="216" fill="#111827" font-size="14" font-weight="600">Overview</text>
+  <text x="80" y="240" fill="#374151" font-size="13">Panel content for the active tab.</text>
+
+  <!-- annotations -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="60"  y1="160" x2="40"  y2="100"/>
+    <line x1="118" y1="158" x2="60"  y2="60"/>
+    <line x1="120" y1="148" x2="200" y2="60"/>
+    <line x1="266" y1="143" x2="340" y2="60"/>
+    <line x1="396" y1="148" x2="540" y2="60"/>
+    <line x1="60"  y1="180" x2="40"  y2="300"/>
+  </g>
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="40"  y="94">1 · Tab list — bottom border separates from panel</text>
+    <text x="60"  y="54">2 · Active indicator — 3px bar, brand.primary</text>
+    <text x="200" y="54">3 · Active label — brand.primary, semibold</text>
+    <text x="340" y="54">4 · Optional count — pill, surface.muted</text>
+    <text x="540" y="54">5 · Disabled tab — text.muted @ 60%, no hover</text>
+    <text x="40"  y="316">6 · Panel — labelled by active tab via aria-controls</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 300)">
+    <text x="0"   y="0"  font-size="12" font-weight="700" fill="#111827">Tokens</text>
+    <text x="0"   y="16" font-size="12" fill="#374151">tab.height → 40  ·  tab.padding → 8 × 16  ·  active.bar → 3px brand.primary</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">label → typography.bodyS  ·  inactive → text.default  ·  disabled → text.muted @ 60%</text>
+  </g>
+</svg>