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

@@ -0,0 +1,25 @@
+# Tables
+
+Specification for the **tables** 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.tables.*`.
+
+## 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/tables/anatomy.svg

@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 420" width="760" height="420" font-family="Inter, Arial, sans-serif" role="img" aria-label="Table anatomy">
+  <title>Table anatomy</title>
+  <desc>Labeled diagram of a KDC data table: header row, sortable header, body row, zebra/hover, row selection, status cell, pagination.</desc>
+
+  <rect width="760" height="420" fill="#F7F8FA"/>
+
+  <!-- table container -->
+  <rect x="40" y="80" width="680" height="240" rx="12" fill="#FFFFFF"/>
+  <rect x="40" y="80" width="680" height="240" rx="12" fill="none" stroke="#EDEFF3"/>
+
+  <!-- header row -->
+  <rect x="40" y="80" width="680" height="40" rx="12" fill="#F7F8FA"/>
+  <rect x="40" y="100" width="680" height="20" fill="#F7F8FA"/>
+  <line x1="40" y1="120" x2="720" y2="120" stroke="#EDEFF3"/>
+
+  <!-- header checkbox -->
+  <rect x="60" y="94" width="14" height="14" rx="3" fill="#FFFFFF" stroke="#B8BDC9"/>
+  <!-- header labels -->
+  <text x="92"  y="105" fill="#374151" font-size="12" font-weight="700">NAME ↑</text>
+  <text x="280" y="105" fill="#6B7280" font-size="12" font-weight="700">EMAIL</text>
+  <text x="500" y="105" fill="#6B7280" font-size="12" font-weight="700">STATUS</text>
+  <text x="640" y="105" fill="#6B7280" font-size="12" font-weight="700">ROLE</text>
+
+  <!-- body row 1 (selected) -->
+  <rect x="40" y="120" width="680" height="40" fill="#EFF4FF"/>
+  <rect x="60" y="134" width="14" height="14" rx="3" fill="#0B5FFF"/>
+  <path d="M64 141l3 3 6-6" stroke="#FFFFFF" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="92"  y="145" fill="#111827" font-size="13">Patrick Kitchens</text>
+  <text x="280" y="145" fill="#374151" font-size="13">pwr@kdc.com</text>
+  <rect x="500" y="132" width="58" height="18" rx="9" fill="#DCFCE7"/>
+  <text x="529" y="145" text-anchor="middle" fill="#16A34A" font-size="11" font-weight="600">Active</text>
+  <text x="640" y="145" fill="#374151" font-size="13">Owner</text>
+
+  <!-- body row 2 -->
+  <line x1="40" y1="160" x2="720" y2="160" stroke="#EDEFF3"/>
+  <rect x="60" y="174" width="14" height="14" rx="3" fill="#FFFFFF" stroke="#B8BDC9"/>
+  <text x="92"  y="185" fill="#111827" font-size="13">Ada Lovelace</text>
+  <text x="280" y="185" fill="#374151" font-size="13">ada@kdc.com</text>
+  <rect x="500" y="172" width="68" height="18" rx="9" fill="#FEF3C7"/>
+  <text x="534" y="185" text-anchor="middle" fill="#B45309" font-size="11" font-weight="600">Pending</text>
+  <text x="640" y="185" fill="#374151" font-size="13">Editor</text>
+
+  <!-- body row 3 -->
+  <line x1="40" y1="200" x2="720" y2="200" stroke="#EDEFF3"/>
+  <rect x="60" y="214" width="14" height="14" rx="3" fill="#FFFFFF" stroke="#B8BDC9"/>
+  <text x="92"  y="225" fill="#111827" font-size="13">Grace Hopper</text>
+  <text x="280" y="225" fill="#374151" font-size="13">grace@kdc.com</text>
+  <rect x="500" y="212" width="64" height="18" rx="9" fill="#FEE2E2"/>
+  <text x="532" y="225" text-anchor="middle" fill="#DC2626" font-size="11" font-weight="600">Failed</text>
+  <text x="640" y="225" fill="#374151" font-size="13">Viewer</text>
+
+  <!-- pagination strip -->
+  <line x1="40" y1="280" x2="720" y2="280" stroke="#EDEFF3"/>
+  <text x="60"  y="304" fill="#6B7280" font-size="12">Showing 1–3 of 124</text>
+  <text x="600" y="304" fill="#374151" font-size="12">‹ 1 2 3 4 ›</text>
+
+  <!-- annotations -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="40"  y1="100" x2="40"  y2="40"/>
+    <line x1="120" y1="100" x2="200" y2="40"/>
+    <line x1="500" y1="140" x2="600" y2="40"/>
+    <line x1="60"  y1="140" x2="20"  y2="220"/>
+    <line x1="40"  y1="140" x2="20"  y2="180"/>
+    <line x1="40"  y1="280" x2="20"  y2="340"/>
+  </g>
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="40"  y="34">1 · Header row — surface.subtle, caption, uppercase</text>
+    <text x="200" y="34">2 · Sortable column — arrow indicates direction</text>
+    <text x="600" y="34">3 · Status pill — semantic colors (success/warning/danger)</text>
+    <text x="40"  y="240">4 · Selected row — brand.primary @ 8% tint</text>
+    <text x="40"  y="200">5 · Selection checkbox — header toggles all</text>
+    <text x="40"  y="356">6 · Footer — count + pagination controls</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 380)">
+    <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">row.height → 40  ·  cell.padding → 12 × 16  ·  divider → border.default</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">selected.bg → brand.primary @ 8%  ·  hover.bg → surface.subtle</text>
+  </g>
+</svg>