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>
2026-04-29 19:01:53 +00:00
commit 16989d834c
114 changed files with 2011 additions and 0 deletions
@@ -0,0 +1,4 @@
+# Examples · figma
+
+Minimal reference implementation showing how to consume KDS tokens, fonts,
+and components on figma.
@@ -0,0 +1,4 @@
+# Examples · mobile
+
+Minimal reference implementation showing how to consume KDS tokens, fonts,
+and components on mobile.
@@ -0,0 +1,4 @@
+# Examples · web
+
+Minimal reference implementation showing how to consume KDS tokens, fonts,
+and components on web.
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>KDC Design System — Web Example</title>
+    <link rel="icon" href="../../brand/logos/favicon/favicon.svg" />
+    <link rel="stylesheet" href="../../assets/fonts/fonts.css" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="container">
+      <h1 class="display">KDC Design System</h1>
+      <p class="body">A minimal page wired up to KDS tokens and fonts.</p>
+      <button class="btn-primary">Primary action</button>
+    </main>
+  </body>
+</html>
@@ -0,0 +1,31 @@
+:root {
+  --color-brand-primary: #0B5FFF;
+  --color-brand-primary-hover: #0848C2;
+  --color-text-default: #111827;
+  --color-surface-bg: #FFFFFF;
+  --radius-md: 8px;
+  --space-4: 16px;
+  --space-5: 20px;
+}
+
+body {
+  margin: 0;
+  font-family: "Inter", system-ui, sans-serif;
+  color: var(--color-text-default);
+  background: var(--color-surface-bg);
+}
+
+.container { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
+.display   { font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: -0.02em; }
+.body      { font-size: 16px; line-height: 24px; }
+
+.btn-primary {
+  background: var(--color-brand-primary);
+  color: #fff;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 12px 20px;
+  font: inherit;
+  cursor: pointer;
+}
+.btn-primary:hover { background: var(--color-brand-primary-hover); }