chore: initial scaffold of KDC Design System
Lint / lint (push) Has been cancelled

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>
This commit is contained in:
Paul Roberts
2026-04-29 19:01:53 +00:00
commit 16989d834c
114 changed files with 2011 additions and 0 deletions
+11
View File
@@ -0,0 +1,11 @@
# Themes
Theme files override role tokens (`text.default`, `surface.*`, `border.*`)
without touching the underlying palette. To add a theme, copy `light/theme.json`
and supply your own values for each role token.
| Theme | File | Use |
|-------|------|-----|
| Light | `light/theme.json` | Default product theme. |
| Dark | `dark/theme.json` | Dimmed surfaces, reduced shadow weight. |
| High Contrast | `high-contrast/theme.json` | Accessibility: 7:1+ contrast. |
+13
View File
@@ -0,0 +1,13 @@
{
"name": "KDC Dark",
"colors": {
"surface.background": "#0B0D12",
"surface.subtle": "#12151B",
"surface.muted": "#1B1F27",
"text.default": "#F7F8FA",
"text.muted": "#B8BDC9",
"text.inverse": "#111827",
"border.default": "#2A2F3A",
"border.strong": "#3A4150"
}
}
+13
View File
@@ -0,0 +1,13 @@
{
"name": "KDC High Contrast",
"colors": {
"surface.background": "#000000",
"surface.subtle": "#000000",
"surface.muted": "#0A0A0A",
"text.default": "#FFFFFF",
"text.muted": "#EDEFF3",
"text.inverse": "#000000",
"border.default": "#FFFFFF",
"border.strong": "#FFFFFF"
}
}
+13
View File
@@ -0,0 +1,13 @@
{
"name": "KDC Light",
"colors": {
"surface.background": "#FFFFFF",
"surface.subtle": "#F7F8FA",
"surface.muted": "#EDEFF3",
"text.default": "#111827",
"text.muted": "#6B7280",
"text.inverse": "#FFFFFF",
"border.default": "#D9DCE3",
"border.strong": "#B8BDC9"
}
}