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

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

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 460" width="760" height="460" font-family="Inter, Arial, sans-serif" role="img" aria-label="Form anatomy">
+  <title>Form anatomy</title>
+  <desc>Labeled diagram of a KDC form: fieldset legend, field group with label, input, helper, required marker, submit/cancel actions.</desc>
+
+  <rect width="760" height="460" fill="#F7F8FA"/>
+
+  <!-- fieldset -->
+  <rect x="220" y="60" width="380" height="340" rx="12" fill="#FFFFFF" stroke="#EDEFF3"/>
+
+  <!-- legend -->
+  <text x="244" y="92" fill="#111827" font-size="16" font-weight="700">Account details</text>
+  <text x="244" y="112" fill="#6B7280" font-size="12">Used for sign-in and notifications.</text>
+
+  <!-- field 1 -->
+  <text x="244" y="148" fill="#111827" font-size="13" font-weight="600">Full name</text>
+  <text x="316" y="148" fill="#DC2626" font-size="13" font-weight="700">*</text>
+  <rect x="244" y="158" width="332" height="40" rx="8" fill="#FFFFFF" stroke="#D9DCE3"/>
+  <text x="256" y="184" fill="#111827" font-size="14">Patrick Kitchens</text>
+  <text x="244" y="216" fill="#6B7280" font-size="12">As it should appear on your invoices.</text>
+
+  <!-- field 2 (with error) -->
+  <text x="244" y="248" fill="#111827" font-size="13" font-weight="600">Email</text>
+  <text x="284" y="248" fill="#DC2626" font-size="13" font-weight="700">*</text>
+  <rect x="244" y="258" width="332" height="40" rx="8" fill="#FFFFFF" stroke="#DC2626" stroke-width="1.5"/>
+  <text x="256" y="284" fill="#111827" font-size="14">pwrkitchens</text>
+  <text x="244" y="316" fill="#DC2626" font-size="12">Enter a valid email address.</text>
+
+  <!-- actions -->
+  <line x1="244" y1="344" x2="576" y2="344" stroke="#EDEFF3"/>
+  <rect x="416" y="356" width="68" height="32" rx="6" fill="#F7F8FA" stroke="#D9DCE3"/>
+  <text x="450" y="376" text-anchor="middle" fill="#111827" font-size="12" font-weight="600">Cancel</text>
+  <rect x="496" y="356" width="80" height="32" rx="6" fill="#0B5FFF"/>
+  <text x="536" y="376" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="600">Save</text>
+
+  <!-- annotation leaders -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="220" y1="80"  x2="100" y2="60"/>
+    <line x1="244" y1="148" x2="100" y2="120"/>
+    <line x1="320" y1="148" x2="100" y2="160"/>
+    <line x1="244" y1="216" x2="100" y2="220"/>
+    <line x1="576" y1="298" x2="660" y2="280"/>
+    <line x1="576" y1="316" x2="660" y2="340"/>
+    <line x1="576" y1="372" x2="660" y2="380"/>
+  </g>
+
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="100" y="54">1 · Fieldset / section — legend + helper</text>
+    <text x="100" y="114">2 · Field label — typography.bodyS, semibold</text>
+    <text x="100" y="154">3 · Required marker — semantic.danger</text>
+    <text x="100" y="214">4 · Helper text — typography.caption, text.muted</text>
+    <text x="660" y="274">5 · Error border — semantic.danger, 1.5px</text>
+    <text x="660" y="334">6 · Error message — typography.caption, semantic.danger</text>
+    <text x="660" y="374">7 · Actions — primary right-most, cancel ghost</text>
+  </g>
+
+  <!-- token legend -->
+  <g transform="translate(40 420)">
+    <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">field.gap → spacing.2 (8px) between label/input/helper</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">stack.gap → spacing.5 (20px) between fields  ·  section.padding → spacing.6 (24px)</text>
+  </g>
+</svg>