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

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

@@ -0,0 +1,67 @@
+<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="Input anatomy">
+  <title>Input anatomy</title>
+  <desc>Labeled diagram of a KDC text input: label, container, leading icon, placeholder/value, helper text, error state.</desc>
+
+  <rect width="760" height="380" fill="#F7F8FA"/>
+
+  <!-- field label -->
+  <text x="220" y="120" fill="#111827" font-size="13" font-weight="600">Email address</text>
+  <text x="416" y="120" fill="#6B7280" font-size="13">Optional</text>
+
+  <!-- container -->
+  <rect x="220" y="132" width="320" height="40" rx="8" fill="#FFFFFF" stroke="#D9DCE3"/>
+
+  <!-- leading icon (envelope-ish) -->
+  <g transform="translate(232 144)" stroke="#6B7280" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <rect x="0" y="2" width="20" height="14" rx="2"/>
+    <path d="m0 4 10 7 10-7"/>
+  </g>
+
+  <!-- value text -->
+  <text x="262" y="158" fill="#111827" font-size="14">you@kdc.com</text>
+
+  <!-- trailing clear icon -->
+  <g transform="translate(516 144)" stroke="#6B7280" stroke-width="1.8" stroke-linecap="round" fill="none">
+    <circle cx="8" cy="8" r="8" stroke-opacity="0"/>
+    <path d="m4 4 8 8M12 4l-8 8"/>
+  </g>
+
+  <!-- helper text -->
+  <text x="220" y="190" fill="#6B7280" font-size="12">We'll never share your email.</text>
+
+  <!-- error variant -->
+  <text x="220" y="240" fill="#111827" font-size="13" font-weight="600">Email address</text>
+  <rect x="220" y="252" width="320" height="40" rx="8" fill="#FFFFFF" stroke="#DC2626" stroke-width="1.5"/>
+  <text x="232" y="278" fill="#DC2626" font-size="14">not-an-email</text>
+  <text x="220" y="310" fill="#DC2626" font-size="12">Enter a valid email address.</text>
+
+  <!-- annotation leaders -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="220" y1="118" x2="100" y2="80"/>
+    <line x1="220" y1="132" x2="80"  y2="160"/>
+    <line x1="240" y1="152" x2="120" y2="200"/>
+    <line x1="540" y1="152" x2="660" y2="80"/>
+    <line x1="220" y1="190" x2="100" y2="240"/>
+    <line x1="540" y1="252" x2="660" y2="220"/>
+    <line x1="540" y1="310" x2="660" y2="310"/>
+  </g>
+
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="100" y="74">1 · Label — typography.bodyS, semibold</text>
+    <text x="80"  y="154">2 · Container — surface.background, border.default, rounded.md</text>
+    <text x="120" y="218">3 · Leading icon — 20×20, text.muted</text>
+    <text x="660" y="74">4 · Trailing action (clear / reveal)</text>
+    <text x="100" y="234">5 · Helper text — typography.caption, text.muted</text>
+    <text x="660" y="214">6 · Error border — semantic.danger, 1.5px</text>
+    <text x="660" y="304">7 · Error message — semantic.danger</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 340)">
+    <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  ·  border → border.default</text>
+    <text x="380" y="16" font-size="12" fill="#374151">value → typography.bodyS · text.default</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">radius → rounded.md · padding 10 × 12 · height 40</text>
+    <text x="380" y="32" font-size="12" fill="#374151">error → semantic.danger</text>
+  </g>
+</svg>