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
@@ -0,0 +1,3 @@
|
||||
# backgrounds
|
||||
|
||||
Drop production-ready backgrounds here. Prefer SVG for vector and AVIF/WebP for raster.
|
||||
@@ -0,0 +1,10 @@
|
||||
# Inter
|
||||
|
||||
Place the licensed Inter font files here:
|
||||
|
||||
- Inter-Regular.woff2
|
||||
- Inter-Medium.woff2
|
||||
- Inter-SemiBold.woff2
|
||||
- Inter-Bold.woff2
|
||||
|
||||
Include the upstream LICENSE alongside the binaries.
|
||||
@@ -0,0 +1,10 @@
|
||||
# Roboto-Mono
|
||||
|
||||
Place the licensed Roboto-Mono font files here:
|
||||
|
||||
- Roboto-Mono-Regular.woff2
|
||||
- Roboto-Mono-Medium.woff2
|
||||
- Roboto-Mono-SemiBold.woff2
|
||||
- Roboto-Mono-Bold.woff2
|
||||
|
||||
Include the upstream LICENSE alongside the binaries.
|
||||
@@ -0,0 +1,18 @@
|
||||
/* KDC Design System — font-face declarations.
|
||||
Self-host these files from /assets/fonts/. */
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("./Inter/Inter-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Mono";
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
src: url("./Roboto-Mono/Roboto-Mono-Regular.woff2") format("woff2");
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
# Icons
|
||||
|
||||
The KDC icon library, organized by visual style:
|
||||
|
||||
- `ui/` — generic interface icons (24x24, stroke, currentColor).
|
||||
- `outline/` — outlined version of the icon set.
|
||||
- `filled/` — filled version of the icon set.
|
||||
- `social/` — third-party brand icons (use per their respective brand rules).
|
||||
@@ -0,0 +1,7 @@
|
||||
# Icons · filled
|
||||
|
||||
Place 24x24 SVG icons for the **filled** set here. Each icon should:
|
||||
|
||||
- Use `viewBox="0 0 24 24"`
|
||||
- Stroke or fill `currentColor`
|
||||
- Have descriptive `<title>` and `aria-*` attributes when used directly
|
||||
@@ -0,0 +1,7 @@
|
||||
# Icons · outline
|
||||
|
||||
Place 24x24 SVG icons for the **outline** set here. Each icon should:
|
||||
|
||||
- Use `viewBox="0 0 24 24"`
|
||||
- Stroke or fill `currentColor`
|
||||
- Have descriptive `<title>` and `aria-*` attributes when used directly
|
||||
@@ -0,0 +1,7 @@
|
||||
# Icons · social
|
||||
|
||||
Place 24x24 SVG icons for the **social** set here. Each icon should:
|
||||
|
||||
- Use `viewBox="0 0 24 24"`
|
||||
- Stroke or fill `currentColor`
|
||||
- Have descriptive `<title>` and `aria-*` attributes when used directly
|
||||
@@ -0,0 +1,7 @@
|
||||
# Icons · ui
|
||||
|
||||
Place 24x24 SVG icons for the **ui** set here. Each icon should:
|
||||
|
||||
- Use `viewBox="0 0 24 24"`
|
||||
- Stroke or fill `currentColor`
|
||||
- Have descriptive `<title>` and `aria-*` attributes when used directly
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
After Width: | Height: | Size: 215 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||||
|
After Width: | Height: | Size: 220 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
|
After Width: | Height: | Size: 245 B |
@@ -0,0 +1,3 @@
|
||||
# illustrations
|
||||
|
||||
Drop production-ready illustrations here. Prefer SVG for vector and AVIF/WebP for raster.
|
||||
@@ -0,0 +1,3 @@
|
||||
# images
|
||||
|
||||
Drop production-ready images here. Prefer SVG for vector and AVIF/WebP for raster.
|
||||
@@ -0,0 +1,3 @@
|
||||
# patterns
|
||||
|
||||
Drop production-ready patterns here. Prefer SVG for vector and AVIF/WebP for raster.
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
|
||||
<defs><pattern id="d" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="2" cy="2" r="1.5" fill="#D9DCE3"/>
|
||||
</pattern></defs>
|
||||
<rect width="40" height="40" fill="url(#d)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 288 B |
Reference in New Issue
Block a user