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,15 @@
+# Tokens
+
+Machine-readable design tokens, exported from the canonical [`../design.md`](../design.md) source. These files are the integration point for downstream platforms (web/CSS, iOS, Android, Figma).
+
+| File | Purpose |
+|------|---------|
+| `colors.json` | Brand, neutral, and semantic colors. |
+| `typography.json` | Type ramp (display → caption + mono). |
+| `spacing.json` | 4px base spacing scale. |
+| `radius.json` | Corner radius scale. |
+| `elevation.json` | Shadow / depth tokens. |
+| `motion.json` | Duration + easing tokens. |
+| `breakpoints.json` | Responsive breakpoints. |
+
+> Tokens conform broadly to the [W3C Design Tokens Format](https://design-tokens.github.io/community-group/format/). Run `npm run build:tokens` to regenerate platform outputs once `scripts/build-tokens.js` is implemented.
@@ -0,0 +1,9 @@
+{
+  "breakpoints": {
+    "sm":  "640px",
+    "md":  "768px",
+    "lg":  "1024px",
+    "xl":  "1280px",
+    "2xl": "1536px"
+  }
+}
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "color": {
+    "brand": {
+      "primary":        { "$value": "#0B5FFF", "$type": "color" },
+      "primary-hover":  { "$value": "#0848C2", "$type": "color" },
+      "primary-pressed":{ "$value": "#063494", "$type": "color" },
+      "secondary":      { "$value": "#FF6B00", "$type": "color" },
+      "accent":         { "$value": "#00C2A8", "$type": "color" }
+    },
+    "neutral": {
+      "0":    { "$value": "#FFFFFF", "$type": "color" },
+      "50":   { "$value": "#F7F8FA", "$type": "color" },
+      "100":  { "$value": "#EDEFF3", "$type": "color" },
+      "200":  { "$value": "#D9DCE3", "$type": "color" },
+      "300":  { "$value": "#B8BDC9", "$type": "color" },
+      "500":  { "$value": "#6B7280", "$type": "color" },
+      "700":  { "$value": "#374151", "$type": "color" },
+      "900":  { "$value": "#111827", "$type": "color" },
+      "1000": { "$value": "#000000", "$type": "color" }
+    },
+    "semantic": {
+      "success": { "$value": "#16A34A", "$type": "color" },
+      "warning": { "$value": "#F59E0B", "$type": "color" },
+      "danger":  { "$value": "#DC2626", "$type": "color" },
+      "info":    { "$value": "#0EA5E9", "$type": "color" }
+    }
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "elevation": {
+    "0": { "shadow": "none" },
+    "1": { "shadow": "0 1px 2px rgba(17,24,39,0.06)" },
+    "2": { "shadow": "0 4px 12px rgba(17,24,39,0.10)" },
+    "3": { "shadow": "0 16px 32px rgba(17,24,39,0.16)" },
+    "4": { "shadow": "0 24px 48px rgba(17,24,39,0.20)" }
+  }
+}
@@ -0,0 +1,17 @@
+{
+  "motion": {
+    "duration": {
+      "instant": "0ms",
+      "fast":    "120ms",
+      "base":    "200ms",
+      "slow":    "320ms",
+      "slower":  "480ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.2, 0, 0, 1)",
+      "enter":    "cubic-bezier(0, 0, 0.2, 1)",
+      "exit":     "cubic-bezier(0.4, 0, 1, 1)",
+      "emphasis": "cubic-bezier(0.2, 0, 0, 1.2)"
+    }
+  }
+}
@@ -0,0 +1,12 @@
+{
+  "rounded": {
+    "none": "0px",
+    "xs":   "2px",
+    "sm":   "4px",
+    "md":   "8px",
+    "lg":   "12px",
+    "xl":   "16px",
+    "2xl":  "24px",
+    "full": "9999px"
+  }
+}
@@ -0,0 +1,17 @@
+{
+  "spacing": {
+    "0":  "0px",
+    "1":  "4px",
+    "2":  "8px",
+    "3":  "12px",
+    "4":  "16px",
+    "5":  "20px",
+    "6":  "24px",
+    "8":  "32px",
+    "10": "40px",
+    "12": "48px",
+    "16": "64px",
+    "20": "80px",
+    "24": "96px"
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "typography": {
+    "display":    { "fontFamily": "Inter", "fontSize": "48px", "fontWeight": 700, "lineHeight": "56px", "letterSpacing": "-0.02em" },
+    "headingXL":  { "fontFamily": "Inter", "fontSize": "32px", "fontWeight": 700, "lineHeight": "40px" },
+    "headingL":   { "fontFamily": "Inter", "fontSize": "24px", "fontWeight": 600, "lineHeight": "32px" },
+    "headingM":   { "fontFamily": "Inter", "fontSize": "20px", "fontWeight": 600, "lineHeight": "28px" },
+    "headingS":   { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 600, "lineHeight": "24px" },
+    "bodyL":      { "fontFamily": "Inter", "fontSize": "18px", "fontWeight": 400, "lineHeight": "28px" },
+    "bodyM":      { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 400, "lineHeight": "24px" },
+    "bodyS":      { "fontFamily": "Inter", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" },
+    "caption":    { "fontFamily": "Inter", "fontSize": "12px", "fontWeight": 500, "lineHeight": "16px", "letterSpacing": "0.02em" },
+    "mono":       { "fontFamily": "Roboto Mono", "fontSize": "14px", "fontWeight": 400, "lineHeight": "20px" }
+  }
+}