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/tooltips/README.md

@@ -0,0 +1,25 @@
+# Tooltips
+
+Specification for the **tooltips** primitive.
+
+## Anatomy
+TODO — drop `anatomy.svg` next to this file.
+
+## Variants
+- default
+- (list per-component variants)
+
+## States
+default · hover · focus-visible · active/pressed · disabled · loading
+
+## Tokens used
+See `design.md` → `components.tooltips.*`.
+
+## Accessibility
+- All interactive instances are keyboard-reachable.
+- Focus state has ≥ 3:1 contrast against its background.
+- Pair color with an icon or text to convey meaning.
+
+## Do / Don't
+- ✅ Use the canonical token references.
+- ❌ Don't hardcode colors, sizes, or radii.

components/tooltips/anatomy.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 340" width="760" height="340" font-family="Inter, Arial, sans-serif" role="img" aria-label="Tooltip anatomy">
+  <title>Tooltip anatomy</title>
+  <desc>Labeled diagram of a KDC tooltip: trigger, container, arrow, label text, offset.</desc>
+
+  <rect width="760" height="340" fill="#F7F8FA"/>
+
+  <!-- trigger (icon button) -->
+  <rect x="356" y="200" width="48" height="48" rx="8" fill="#FFFFFF" stroke="#D9DCE3"/>
+  <g transform="translate(368 212)" stroke="#374151" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="11"/>
+    <path d="M12 17V11M12 7h.01"/>
+  </g>
+
+  <!-- tooltip container above -->
+  <g>
+    <rect x="306" y="146" width="148" height="36" rx="6" fill="#111827"/>
+    <polygon points="380,182 374,190 386,190" fill="#111827"/>
+    <text x="380" y="170" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="500">Save and continue</text>
+  </g>
+
+  <!-- offset indicator -->
+  <line x1="380" y1="190" x2="380" y2="200" stroke="#0B5FFF" stroke-width="1" stroke-dasharray="2 2"/>
+
+  <!-- annotations -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="306" y1="160" x2="180" y2="120"/>
+    <line x1="380" y1="190" x2="500" y2="240"/>
+    <line x1="380" y1="170" x2="200" y2="200"/>
+    <line x1="356" y1="220" x2="200" y2="260"/>
+    <line x1="380" y1="195" x2="540" y2="200"/>
+  </g>
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="180" y="114">1 · Container — neutral.900, rounded.sm, elevation.2</text>
+    <text x="500" y="254">2 · Arrow — 8×6 caret, same fill as container</text>
+    <text x="200" y="194">3 · Label — typography.caption, text.inverse, single line preferred</text>
+    <text x="200" y="254">4 · Trigger — focusable element (button / icon / link)</text>
+    <text x="540" y="194">5 · Offset — 8px gap from trigger</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 290)">
+    <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">container.bg → neutral.900  ·  text → text.inverse  ·  radius → rounded.sm</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">padding → 6 × 10  ·  delay.show → 200ms  ·  delay.hide → 0ms  ·  z-index above modals</text>
+  </g>
+</svg>