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

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

@@ -0,0 +1,57 @@
+<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="Card anatomy">
+  <title>Card anatomy</title>
+  <desc>Labeled diagram of a KDC card: container, media, title, body text, metadata, action area.</desc>
+
+  <rect width="760" height="420" fill="#F7F8FA"/>
+
+  <!-- card container with subtle elevation -->
+  <g>
+    <rect x="220" y="80" width="320" height="280" rx="12" fill="#FFFFFF"/>
+    <rect x="220" y="80" width="320" height="280" rx="12" fill="none" stroke="#EDEFF3"/>
+  </g>
+
+  <!-- media area -->
+  <rect x="220" y="80" width="320" height="120" rx="12" fill="#0B5FFF"/>
+  <rect x="220" y="170" width="320" height="30" fill="#0B5FFF"/>
+
+  <!-- title -->
+  <text x="244" y="232" fill="#111827" font-size="18" font-weight="700">Card title</text>
+
+  <!-- body -->
+  <text x="244" y="258" fill="#374151" font-size="14">A short summary of what this card</text>
+  <text x="244" y="276" fill="#374151" font-size="14">represents — keep it under two lines.</text>
+
+  <!-- metadata -->
+  <text x="244" y="304" fill="#6B7280" font-size="12">Updated 2 days ago · 3 min read</text>
+
+  <!-- action -->
+  <rect x="244" y="320" width="100" height="28" rx="6" fill="#0B5FFF"/>
+  <text x="294" y="338" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">Read more</text>
+
+  <!-- annotations -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="220" y1="80"  x2="100" y2="60"/>
+    <line x1="380" y1="140" x2="640" y2="100"/>
+    <line x1="280" y1="232" x2="100" y2="220"/>
+    <line x1="380" y1="270" x2="640" y2="240"/>
+    <line x1="320" y1="304" x2="100" y2="320"/>
+    <line x1="344" y1="334" x2="640" y2="334"/>
+  </g>
+
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="100" y="54">1 · Container — surface.background, rounded.lg, elevation.1</text>
+    <text x="640" y="94">2 · Media area — image / accent / illustration</text>
+    <text x="100" y="214">3 · Title — typography.headingM</text>
+    <text x="640" y="234">4 · Body — typography.bodyS, text.muted</text>
+    <text x="100" y="314">5 · Metadata — typography.caption, text.muted</text>
+    <text x="640" y="328">6 · Action area — primary or ghost button</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">container.bg → surface.background  ·  radius → rounded.lg (12px)</text>
+    <text x="420" y="16" font-size="12" fill="#374151">padding → spacing.6 (24px)</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">elevation → elevation.1  ·  border → border.default (optional)</text>
+  </g>
+</svg>