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,16 @@
+# Brand
+
+Logo lockups, wordmarks, and brand guidelines.
+
+| Path | Purpose |
+|------|---------|
+| `logos/primary/`   | Primary KDC mark — full color, on-light, on-dark variants. |
+| `logos/secondary/` | Stacked / vertical lockups for square placements. |
+| `logos/monochrome/`| Single-color black and white marks for print and embossing. |
+| `logos/favicon/`   | Browser, PWA, and OS icons. |
+| `wordmarks/`       | Typography-only KDC wordmark. |
+| `icon-set/`        | Small standalone brand glyphs. |
+| `logos-source/`    | Editable Adobe Illustrator / Figma / Sketch sources. |
+| `brand-guidelines/`| Voice, photography, illustration style, do/don'ts. |
+
+All logos in this folder are placeholders — replace with the official artwork before any production use.
@@ -0,0 +1,12 @@
+# Brand Guidelines
+
+Placeholder. Replace with the formal KDC brand book covering:
+
+- Mission, vision, and personality
+- Logo clear-space and minimum sizes
+- Approved color usage
+- Typography in marketing
+- Photography & illustration direction
+- Voice and tone
+- Co-branding rules
+- Do's and don'ts (with examples)
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="K">
+  <rect width="240" height="80" fill="#0B5FFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#FFFFFF">K</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="6" fill="#0B5FFF"/>
+  <text x="16" y="22" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="16" font-weight="800" fill="#FFFFFF">K</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#FFFFFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#000000">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#000000"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#FFFFFF">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#111827"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#FFFFFF">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#FFFFFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#0B5FFF">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#0B5FFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#FFFFFF">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#0B5FFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#FFFFFF">KDC</text>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" width="240" height="80" role="img" aria-label="KDC">
+  <rect width="240" height="80" fill="#FFFFFF"/>
+  <text x="120" y="46" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="20" font-weight="700" fill="#0B5FFF">KDC</text>
+</svg>