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

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

@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 440" width="760" height="440" font-family="Inter, Arial, sans-serif" role="img" aria-label="Modal anatomy">
+  <title>Modal anatomy</title>
+  <desc>Labeled diagram of a KDC modal: scrim, container, header, body, footer actions, close button.</desc>
+
+  <!-- scrim -->
+  <rect width="760" height="440" fill="#111827" fill-opacity="0.55"/>
+
+  <!-- modal container -->
+  <rect x="180" y="60" width="400" height="320" rx="16" fill="#FFFFFF"/>
+
+  <!-- header -->
+  <text x="204" y="100" fill="#111827" font-size="20" font-weight="700">Delete project</text>
+  <text x="204" y="118" fill="#6B7280" font-size="12">This action cannot be undone.</text>
+
+  <!-- close icon -->
+  <g transform="translate(540 80)" stroke="#6B7280" stroke-width="1.8" stroke-linecap="round" fill="none">
+    <path d="m4 4 12 12M16 4 4 16"/>
+  </g>
+
+  <!-- divider -->
+  <line x1="204" y1="138" x2="556" y2="138" stroke="#EDEFF3"/>
+
+  <!-- body -->
+  <text x="204" y="170" fill="#374151" font-size="14">Are you sure you want to delete</text>
+  <text x="204" y="190" fill="#374151" font-size="14">"Marketing Q3"? All associated data</text>
+  <text x="204" y="210" fill="#374151" font-size="14">will be permanently removed.</text>
+
+  <!-- footer divider -->
+  <line x1="204" y1="316" x2="556" y2="316" stroke="#EDEFF3"/>
+
+  <!-- footer actions -->
+  <rect x="396" y="332" width="68" height="32" rx="6" fill="#F7F8FA" stroke="#D9DCE3"/>
+  <text x="430" y="352" text-anchor="middle" fill="#111827" font-size="12" font-weight="600">Cancel</text>
+  <rect x="476" y="332" width="80" height="32" rx="6" fill="#DC2626"/>
+  <text x="516" y="352" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">Delete</text>
+
+  <!-- annotations -->
+  <g stroke="#FFFFFF" stroke-width="1" fill="none">
+    <line x1="100" y1="40"  x2="180" y2="40"/>
+    <line x1="180" y1="60"  x2="100" y2="100"/>
+    <line x1="380" y1="100" x2="660" y2="60"/>
+    <line x1="544" y1="86"  x2="660" y2="120"/>
+    <line x1="380" y1="200" x2="660" y2="200"/>
+    <line x1="380" y1="346" x2="660" y2="346"/>
+  </g>
+
+  <g fill="#FFFFFF" font-size="13" font-weight="600">
+    <text x="100" y="34">1 · Scrim — neutral.900 @ 55%</text>
+    <text x="100" y="116">2 · Container — surface.background, rounded.xl, elevation.3</text>
+    <text x="660" y="54">3 · Header — title + optional subtitle</text>
+    <text x="660" y="114">4 · Close — top-right, 20×20</text>
+    <text x="660" y="194">5 · Body — typography.bodyM, scrolls if tall</text>
+    <text x="660" y="340">6 · Footer — actions right-aligned, primary last</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 400)">
+    <text x="0"   y="0"  font-size="12" font-weight="700" fill="#FFFFFF">Tokens</text>
+    <text x="0"   y="16" font-size="12" fill="#EDEFF3">container.bg → surface.background  ·  radius → rounded.xl (16px)</text>
+    <text x="420" y="16" font-size="12" fill="#EDEFF3">width → 480px (default modal)</text>
+    <text x="0"   y="32" font-size="12" fill="#EDEFF3">scrim → neutral.900 @ 55%  ·  elevation → elevation.3</text>
+  </g>
+</svg>