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

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

@@ -0,0 +1,55 @@
+<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="Badge anatomy">
+  <title>Badge anatomy</title>
+  <desc>Labeled diagram of a KDC badge: container, dot, label, semantic variants (neutral, success, warning, danger, info).</desc>
+
+  <rect width="760" height="360" fill="#F7F8FA"/>
+
+  <!-- focus example badge with dot + label -->
+  <g transform="translate(280 130)">
+    <rect x="0" y="0" width="120" height="24" rx="12" fill="#DCFCE7"/>
+    <circle cx="12" cy="12" r="4" fill="#16A34A"/>
+    <text x="22" y="16" fill="#16A34A" font-size="12" font-weight="600">Active</text>
+  </g>
+
+  <!-- variants row -->
+  <g transform="translate(40 220)">
+    <g><rect x="0" y="0" width="80" height="22" rx="11" fill="#EDEFF3"/>
+       <text x="40" y="15" text-anchor="middle" fill="#111827" font-size="11" font-weight="600">Neutral</text></g>
+    <g transform="translate(96 0)"><rect width="80" height="22" rx="11" fill="#DCFCE7"/>
+       <text x="40" y="15" text-anchor="middle" fill="#16A34A" font-size="11" font-weight="600">Success</text></g>
+    <g transform="translate(192 0)"><rect width="80" height="22" rx="11" fill="#FEF3C7"/>
+       <text x="40" y="15" text-anchor="middle" fill="#B45309" font-size="11" font-weight="600">Warning</text></g>
+    <g transform="translate(288 0)"><rect width="80" height="22" rx="11" fill="#FEE2E2"/>
+       <text x="40" y="15" text-anchor="middle" fill="#DC2626" font-size="11" font-weight="600">Danger</text></g>
+    <g transform="translate(384 0)"><rect width="80" height="22" rx="11" fill="#E0F2FE"/>
+       <text x="40" y="15" text-anchor="middle" fill="#0369A1" font-size="11" font-weight="600">Info</text></g>
+    <g transform="translate(480 0)"><rect width="22" height="22" rx="11" fill="#DC2626"/>
+       <text x="11" y="15" text-anchor="middle" fill="#FFFFFF" font-size="11" font-weight="700">3</text></g>
+  </g>
+
+  <!-- annotations on the focus badge -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="280" y1="142" x2="180" y2="80"/>
+    <line x1="292" y1="142" x2="120" y2="120"/>
+    <line x1="320" y1="146" x2="180" y2="180"/>
+    <line x1="400" y1="142" x2="540" y2="80"/>
+    <line x1="400" y1="154" x2="540" y2="200"/>
+  </g>
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="180" y="74">1 · Container — rounded.full, 20–24 high</text>
+    <text x="120" y="114">2 · Dot — 8×8, semantic color (optional)</text>
+    <text x="180" y="194">3 · Label — typography.caption, semibold, semantic text color</text>
+    <text x="540" y="74">4 · Padding — 2 × 8 (text-only), 2 × 6 (with dot)</text>
+    <text x="540" y="194">5 · Count badge — same shape, fixed-width, inverse text</text>
+  </g>
+
+  <text x="40"  y="208" fill="#6B7280" font-size="12" font-weight="700">VARIANTS</text>
+  <text x="40"  y="270" fill="#6B7280" font-size="12">Pair each background with the matching foreground for AA contrast.</text>
+
+  <!-- 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.full  ·  typography → caption  ·  height → 20–24</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">success → semantic.success @ 16% bg / @ 100% text  (apply same recipe per variant)</text>
+  </g>
+</svg>