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

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

@@ -0,0 +1,61 @@
+<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="Navigation anatomy">
+  <title>Navigation (top bar) anatomy</title>
+  <desc>Labeled diagram of a KDC top navigation bar: logo, primary nav, search, user menu, active indicator.</desc>
+
+  <rect width="760" height="360" fill="#F7F8FA"/>
+
+  <!-- top bar -->
+  <rect x="40" y="80" width="680" height="64" rx="0" fill="#FFFFFF"/>
+  <line x1="40" y1="144" x2="720" y2="144" stroke="#EDEFF3"/>
+
+  <!-- logo -->
+  <rect x="64" y="100" width="40" height="24" rx="6" fill="#0B5FFF"/>
+  <text x="84" y="117" text-anchor="middle" fill="#FFFFFF" font-size="12" font-weight="800">KDC</text>
+
+  <!-- primary nav -->
+  <text x="156" y="117" fill="#111827" font-size="14" font-weight="600">Home</text>
+  <text x="220" y="117" fill="#0B5FFF" font-size="14" font-weight="700">Projects</text>
+  <text x="296" y="117" fill="#374151" font-size="14">Reports</text>
+  <text x="364" y="117" fill="#374151" font-size="14">Team</text>
+  <!-- active indicator under Projects -->
+  <rect x="220" y="135" width="60" height="3" rx="1.5" fill="#0B5FFF"/>
+
+  <!-- search -->
+  <rect x="448" y="98" width="180" height="28" rx="14" fill="#F7F8FA" stroke="#D9DCE3"/>
+  <g transform="translate(458 106)" stroke="#6B7280" stroke-width="1.8" fill="none" stroke-linecap="round">
+    <circle cx="6" cy="6" r="5"/>
+    <path d="m10 10 4 4"/>
+  </g>
+  <text x="478" y="117" fill="#6B7280" font-size="12">Search…</text>
+
+  <!-- avatar -->
+  <circle cx="676" cy="112" r="14" fill="#00C2A8"/>
+  <text x="676" y="117" text-anchor="middle" fill="#FFFFFF" font-size="11" font-weight="700">PK</text>
+
+  <!-- annotation leaders -->
+  <g stroke="#374151" stroke-width="1" fill="none">
+    <line x1="84"  y1="100" x2="80"  y2="40"/>
+    <line x1="240" y1="100" x2="280" y2="40"/>
+    <line x1="250" y1="138" x2="320" y2="200"/>
+    <line x1="538" y1="112" x2="540" y2="40"/>
+    <line x1="676" y1="98"  x2="700" y2="40"/>
+    <line x1="380" y1="144" x2="380" y2="200"/>
+  </g>
+
+  <g fill="#111827" font-size="13" font-weight="600">
+    <text x="60"  y="34">1 · Logo / brand mark</text>
+    <text x="260" y="34">2 · Primary nav — typography.bodyS</text>
+    <text x="320" y="216">3 · Active indicator — 3px bar, brand.primary</text>
+    <text x="500" y="34">4 · Search — pill, rounded.full, surface.subtle</text>
+    <text x="660" y="34" text-anchor="end">5 · User menu (avatar)</text>
+    <text x="380" y="216">6 · Bottom border — border.default</text>
+  </g>
+
+  <!-- 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">bar.bg → surface.background  ·  height 64  ·  border-bottom → border.default</text>
+    <text x="0"   y="32" font-size="12" fill="#374151">item → typography.bodyS  ·  active → brand.primary  ·  inactive → text.default/muted</text>
+    <text x="0"   y="48" font-size="12" fill="#374151">search → rounded.full, surface.subtle, border.default</text>
+  </g>
+</svg>