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

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

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 380" width="760" height="380" font-family="Inter, Arial, sans-serif" role="img" aria-label="Button anatomy">
+  <title>Button anatomy</title>
+  <desc>Labeled diagram of a KDC primary button: focus ring, container, corner radius, leading icon, label, and padding.</desc>
+
+  <!-- canvas -->
+  <rect width="760" height="380" fill="#F7F8FA"/>
+
+  <!-- focus ring (offset, dashed) -->
+  <rect x="294" y="166" width="232" height="68" rx="12"
+        fill="none" stroke="#0B5FFF" stroke-opacity="0.45" stroke-width="2" stroke-dasharray="4 4"/>
+
+  <!-- button container -->
+  <rect x="300" y="172" width="220" height="56" rx="8" fill="#0B5FFF"/>
+
+  <!-- leading icon (check) -->
+  <g transform="translate(324 188)" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M20 6 9 17l-5-5"/>
+  </g>
+
+  <!-- label -->
+  <text x="360" y="207" fill="#FFFFFF" font-size="18" font-weight="600">Save changes</text>
+
+  <!-- annotation leader lines -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="294" y1="166" x2="180" y2="90"/>           <!-- focus ring -->
+    <line x1="336" y1="200" x2="180" y2="140"/>          <!-- icon -->
+    <line x1="300" y1="172" x2="200" y2="270"/>          <!-- container -->
+    <line x1="520" y1="172" x2="640" y2="90"/>           <!-- corner radius -->
+    <line x1="430" y1="215" x2="560" y2="300"/>          <!-- label -->
+    <line x1="324" y1="228" x2="324" y2="270"/>          <!-- padding -->
+    <line x1="300" y1="265" x2="324" y2="265"/>
+  </g>
+
+  <!-- annotation text -->
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="180" y="84">1 · Focus ring — 2px, offset 4px, brand.primary @ 45%</text>
+    <text x="180" y="134">2 · Leading icon — 24×24, currentColor</text>
+    <text x="80"  y="284">3 · Container — colors.brand.primary, height 56</text>
+    <text x="640" y="84">4 · Corner radius — rounded.md (8px)</text>
+    <text x="560" y="316">5 · Label — typography.bodyM, semibold, text.inverse</text>
+    <text x="296" y="288" text-anchor="end">6 · Padding — 12 × 20</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 332)">
+    <text x="0"   y="0"  font-size="12" font-weight="700" fill="#111827">Tokens</text>
+    <text x="0"   y="18" font-size="12" fill="#374151">container.bg → colors.brand.primary</text>
+    <text x="260" y="18" font-size="12" fill="#374151">label → typography.bodyM · colors.text.inverse</text>
+    <text x="520" y="18" font-size="12" fill="#374151">radius → rounded.md (8px)</text>
+    <text x="0"   y="36" font-size="12" fill="#374151">padding → spacing.3 / spacing.5 (12 × 20)</text>
+    <text x="260" y="36" font-size="12" fill="#374151">focus → brand.primary @ 45%, 2px, offset 4px</text>
+  </g>
+</svg>