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

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

@@ -0,0 +1,73 @@
+<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="Alert anatomy">
+  <title>Alert anatomy</title>
+  <desc>Labeled diagram of a KDC alert: container, leading icon, title, body, action link, dismiss button, semantic variants.</desc>
+
+  <rect width="760" height="360" fill="#F7F8FA"/>
+
+  <!-- focus alert (warning) -->
+  <g>
+    <rect x="100" y="80" width="560" height="80" rx="8" fill="#FFFBEB" stroke="#F59E0B" stroke-opacity="0.4"/>
+    <!-- accent stripe -->
+    <rect x="100" y="80" width="4" height="80" fill="#F59E0B"/>
+    <!-- leading icon -->
+    <g transform="translate(120 100)" stroke="#B45309" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 2 22 20H2z"/>
+      <path d="M12 9v5M12 17h.01"/>
+    </g>
+    <!-- title + body -->
+    <text x="156" y="108" fill="#111827" font-size="14" font-weight="700">Storage almost full</text>
+    <text x="156" y="128" fill="#374151" font-size="13">You're using 92% of your 50GB plan. Upgrade to keep syncing.</text>
+    <!-- action link -->
+    <text x="156" y="148" fill="#0B5FFF" font-size="13" font-weight="600">Upgrade plan →</text>
+    <!-- dismiss -->
+    <g transform="translate(628 96)" stroke="#6B7280" stroke-width="1.8" stroke-linecap="round" fill="none">
+      <path d="m4 4 12 12M16 4 4 16"/>
+    </g>
+  </g>
+
+  <!-- annotations -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="100" y1="80"  x2="80"  y2="40"/>
+    <line x1="104" y1="120" x2="40"  y2="180"/>
+    <line x1="132" y1="108" x2="60"  y2="60"/>
+    <line x1="240" y1="108" x2="240" y2="40"/>
+    <line x1="240" y1="148" x2="240" y2="220"/>
+    <line x1="640" y1="100" x2="700" y2="40"/>
+  </g>
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="80"  y="34">1 · Container — semantic.* @ 8% bg, semantic.* @ 40% border</text>
+    <text x="40"  y="194">2 · Accent stripe — 4px, semantic color at full strength (optional)</text>
+    <text x="60"  y="54">3 · Leading icon — 24×24, semantic on-color</text>
+    <text x="240" y="34">4 · Title — typography.bodyS, bold</text>
+    <text x="240" y="234">5 · Action link — typography.bodyS, brand.primary, optional</text>
+    <text x="700" y="34" text-anchor="end">6 · Dismiss — 20×20, top-right, optional</text>
+  </g>
+
+  <!-- variants -->
+  <g transform="translate(100 220)">
+    <text x="0" y="0" fill="#6B7280" font-size="12" font-weight="700">VARIANTS</text>
+    <g transform="translate(0 12)">
+      <rect width="120" height="24" rx="6" fill="#E0F2FE" stroke="#0EA5E9" stroke-opacity="0.4"/>
+      <text x="60" y="16" text-anchor="middle" fill="#0369A1" font-size="11" font-weight="600">Info</text>
+    </g>
+    <g transform="translate(132 12)">
+      <rect width="120" height="24" rx="6" fill="#DCFCE7" stroke="#16A34A" stroke-opacity="0.4"/>
+      <text x="60" y="16" text-anchor="middle" fill="#16A34A" font-size="11" font-weight="600">Success</text>
+    </g>
+    <g transform="translate(264 12)">
+      <rect width="120" height="24" rx="6" fill="#FEF3C7" stroke="#F59E0B" stroke-opacity="0.4"/>
+      <text x="60" y="16" text-anchor="middle" fill="#B45309" font-size="11" font-weight="600">Warning</text>
+    </g>
+    <g transform="translate(396 12)">
+      <rect width="120" height="24" rx="6" fill="#FEE2E2" stroke="#DC2626" stroke-opacity="0.4"/>
+      <text x="60" y="16" text-anchor="middle" fill="#DC2626" font-size="11" font-weight="600">Danger</text>
+    </g>
+  </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">radius → rounded.md  ·  padding → spacing.4 (16px)  ·  icon-gap → spacing.3</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">role → "alert" (assertive) for danger, "status" (polite) for success/info</text>
+  </g>
+</svg>