commit 16989d834cb5517fad3b297d18b1092997f90e01 Author: Paul Roberts Date: Wed Apr 29 19:01:53 2026 +0000 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) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..aa5bd88 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,14 @@ +name: Lint +on: + push: + branches: [main] + pull_request: +jobs: + lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: { node-version: 20 } + - run: npm ci || npm install + - run: npm run lint diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..68e59f7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +node_modules/ +dist/ +build/ +.cache/ +.DS_Store +*.log +.env +.env.local +coverage/ +.idea/ +.vscode/ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..98cee38 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,10 @@ +# Changelog + +All notable changes to the KDC Design System will be documented in this file. +The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and +this project adheres to [Semantic Versioning](https://semver.org/). + +## [Unreleased] + +### Added +- Initial repository scaffold: `design.md`, brand, foundations, components, themes, templates, docs. diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000..e7c6a3c --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1,4 @@ +* @kdc/design-system-maintainers +/brand/ @kdc/brand +/foundations/ @kdc/design-system-maintainers +/components/ @kdc/design-system-maintainers diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..bc9f302 --- /dev/null +++ b/LICENSE @@ -0,0 +1,4 @@ +Copyright (c) KDC. All rights reserved. + +Placeholder license file. Replace with the appropriate license (MIT, Apache-2.0, +proprietary EULA, etc.) before public release. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7caa7c6 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +# KDC Design System + +The official design system for KDC — tokens, components, brand assets, and guidelines for building consistent KDC product and brand experiences. + +> The single source of truth lives in [`design.md`](./design.md), which encodes the design tokens (colors, typography, spacing, radii, components) in the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) format. + +## Repository structure + +``` +KDCDesignSystem/ +├── design.md # Canonical token + guidelines spec +├── brand/ # Logos, wordmarks, brand guidelines +├── tokens/ # Generated/exported design tokens +├── foundations/ # Color, type, spacing, motion, grid, breakpoints +├── assets/ # Fonts, icons, illustrations, images, patterns +├── components/ # Per-component specs and anatomy +├── themes/ # Light, dark, high-contrast theme overrides +├── templates/ # Web, mobile, email, print, presentation +├── docs/ # Getting started, principles, a11y, voice & tone +├── examples/ # Reference implementations +└── scripts/ # Token build / export scripts +``` + +## Quick start + +1. Read [`docs/getting-started/README.md`](./docs/getting-started/README.md). +2. Skim [`design.md`](./design.md) for the token vocabulary. +3. Pick your platform under [`examples/`](./examples/). + +## Status + +Version: **alpha**. Tokens and components are still settling — expect breaking changes. + +## Contributing + +See [`docs/contributing/README.md`](./docs/contributing/README.md). diff --git a/assets/backgrounds/README.md b/assets/backgrounds/README.md new file mode 100644 index 0000000..e540edf --- /dev/null +++ b/assets/backgrounds/README.md @@ -0,0 +1,3 @@ +# backgrounds + +Drop production-ready backgrounds here. Prefer SVG for vector and AVIF/WebP for raster. diff --git a/assets/fonts/Inter/Inter-Bold.woff2 b/assets/fonts/Inter/Inter-Bold.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Inter/Inter-Medium.woff2 b/assets/fonts/Inter/Inter-Medium.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Inter/Inter-Regular.woff2 b/assets/fonts/Inter/Inter-Regular.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Inter/Inter-SemiBold.woff2 b/assets/fonts/Inter/Inter-SemiBold.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Inter/LICENSE.txt b/assets/fonts/Inter/LICENSE.txt new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Inter/README.md b/assets/fonts/Inter/README.md new file mode 100644 index 0000000..6078d6c --- /dev/null +++ b/assets/fonts/Inter/README.md @@ -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. diff --git a/assets/fonts/Roboto-Mono/LICENSE.txt b/assets/fonts/Roboto-Mono/LICENSE.txt new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Roboto-Mono/README.md b/assets/fonts/Roboto-Mono/README.md new file mode 100644 index 0000000..175d820 --- /dev/null +++ b/assets/fonts/Roboto-Mono/README.md @@ -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. diff --git a/assets/fonts/Roboto-Mono/Roboto-Mono-Bold.woff2 b/assets/fonts/Roboto-Mono/Roboto-Mono-Bold.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Roboto-Mono/Roboto-Mono-Medium.woff2 b/assets/fonts/Roboto-Mono/Roboto-Mono-Medium.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Roboto-Mono/Roboto-Mono-Regular.woff2 b/assets/fonts/Roboto-Mono/Roboto-Mono-Regular.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/Roboto-Mono/Roboto-Mono-SemiBold.woff2 b/assets/fonts/Roboto-Mono/Roboto-Mono-SemiBold.woff2 new file mode 100644 index 0000000..e69de29 diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css new file mode 100644 index 0000000..c6d4758 --- /dev/null +++ b/assets/fonts/fonts.css @@ -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"); +} diff --git a/assets/icons/README.md b/assets/icons/README.md new file mode 100644 index 0000000..8258507 --- /dev/null +++ b/assets/icons/README.md @@ -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). diff --git a/assets/icons/filled/README.md b/assets/icons/filled/README.md new file mode 100644 index 0000000..b994fc4 --- /dev/null +++ b/assets/icons/filled/README.md @@ -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 `` and `aria-*` attributes when used directly diff --git a/assets/icons/outline/README.md b/assets/icons/outline/README.md new file mode 100644 index 0000000..c075967 --- /dev/null +++ b/assets/icons/outline/README.md @@ -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 diff --git a/assets/icons/social/README.md b/assets/icons/social/README.md new file mode 100644 index 0000000..6fb7db7 --- /dev/null +++ b/assets/icons/social/README.md @@ -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 diff --git a/assets/icons/ui/README.md b/assets/icons/ui/README.md new file mode 100644 index 0000000..de14bdb --- /dev/null +++ b/assets/icons/ui/README.md @@ -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 diff --git a/assets/icons/ui/check.svg b/assets/icons/ui/check.svg new file mode 100644 index 0000000..535c01f --- /dev/null +++ b/assets/icons/ui/check.svg @@ -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> diff --git a/assets/icons/ui/chevron-down.svg b/assets/icons/ui/chevron-down.svg new file mode 100644 index 0000000..646b69e --- /dev/null +++ b/assets/icons/ui/chevron-down.svg @@ -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> diff --git a/assets/icons/ui/close.svg b/assets/icons/ui/close.svg new file mode 100644 index 0000000..c57fb4a --- /dev/null +++ b/assets/icons/ui/close.svg @@ -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> diff --git a/assets/icons/ui/search.svg b/assets/icons/ui/search.svg new file mode 100644 index 0000000..0d0fa3a --- /dev/null +++ b/assets/icons/ui/search.svg @@ -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> diff --git a/assets/illustrations/README.md b/assets/illustrations/README.md new file mode 100644 index 0000000..5d22956 --- /dev/null +++ b/assets/illustrations/README.md @@ -0,0 +1,3 @@ +# illustrations + +Drop production-ready illustrations here. Prefer SVG for vector and AVIF/WebP for raster. diff --git a/assets/images/README.md b/assets/images/README.md new file mode 100644 index 0000000..050b9cc --- /dev/null +++ b/assets/images/README.md @@ -0,0 +1,3 @@ +# images + +Drop production-ready images here. Prefer SVG for vector and AVIF/WebP for raster. diff --git a/assets/patterns/README.md b/assets/patterns/README.md new file mode 100644 index 0000000..1fb7be5 --- /dev/null +++ b/assets/patterns/README.md @@ -0,0 +1,3 @@ +# patterns + +Drop production-ready patterns here. Prefer SVG for vector and AVIF/WebP for raster. diff --git a/assets/patterns/dot-grid.svg b/assets/patterns/dot-grid.svg new file mode 100644 index 0000000..868bc39 --- /dev/null +++ b/assets/patterns/dot-grid.svg @@ -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> diff --git a/brand/README.md b/brand/README.md new file mode 100644 index 0000000..a6440f6 --- /dev/null +++ b/brand/README.md @@ -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. diff --git a/brand/brand-guidelines/README.md b/brand/brand-guidelines/README.md new file mode 100644 index 0000000..e9356e9 --- /dev/null +++ b/brand/brand-guidelines/README.md @@ -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) diff --git a/brand/icon-set/kdc-glyph.svg b/brand/icon-set/kdc-glyph.svg new file mode 100644 index 0000000..2f71602 --- /dev/null +++ b/brand/icon-set/kdc-glyph.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="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> diff --git a/brand/logos-source/kdc-logo.ai b/brand/logos-source/kdc-logo.ai new file mode 100644 index 0000000..e69de29 diff --git a/brand/logos-source/kdc-logo.fig b/brand/logos-source/kdc-logo.fig new file mode 100644 index 0000000..e69de29 diff --git a/brand/logos-source/kdc-logo.sketch b/brand/logos-source/kdc-logo.sketch new file mode 100644 index 0000000..e69de29 diff --git a/brand/logos/favicon/apple-touch-icon.png b/brand/logos/favicon/apple-touch-icon.png new file mode 100644 index 0000000..e69de29 diff --git a/brand/logos/favicon/favicon.ico b/brand/logos/favicon/favicon.ico new file mode 100644 index 0000000..e69de29 diff --git a/brand/logos/favicon/favicon.svg b/brand/logos/favicon/favicon.svg new file mode 100644 index 0000000..f4668c5 --- /dev/null +++ b/brand/logos/favicon/favicon.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> diff --git a/brand/logos/monochrome/kdc-logo-black.svg b/brand/logos/monochrome/kdc-logo-black.svg new file mode 100644 index 0000000..1b3de45 --- /dev/null +++ b/brand/logos/monochrome/kdc-logo-black.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> diff --git a/brand/logos/monochrome/kdc-logo-white.svg b/brand/logos/monochrome/kdc-logo-white.svg new file mode 100644 index 0000000..ef7d6e0 --- /dev/null +++ b/brand/logos/monochrome/kdc-logo-white.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> diff --git a/brand/logos/primary/kdc-logo-primary-ondark.svg b/brand/logos/primary/kdc-logo-primary-ondark.svg new file mode 100644 index 0000000..e871d4f --- /dev/null +++ b/brand/logos/primary/kdc-logo-primary-ondark.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> diff --git a/brand/logos/primary/kdc-logo-primary-onlight.svg b/brand/logos/primary/kdc-logo-primary-onlight.svg new file mode 100644 index 0000000..c0504e3 --- /dev/null +++ b/brand/logos/primary/kdc-logo-primary-onlight.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> diff --git a/brand/logos/primary/kdc-logo-primary.svg b/brand/logos/primary/kdc-logo-primary.svg new file mode 100644 index 0000000..bf44f5d --- /dev/null +++ b/brand/logos/primary/kdc-logo-primary.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> diff --git a/brand/logos/secondary/kdc-logo-stacked.svg b/brand/logos/secondary/kdc-logo-stacked.svg new file mode 100644 index 0000000..bf44f5d --- /dev/null +++ b/brand/logos/secondary/kdc-logo-stacked.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> diff --git a/brand/wordmarks/kdc-wordmark.svg b/brand/wordmarks/kdc-wordmark.svg new file mode 100644 index 0000000..c0504e3 --- /dev/null +++ b/brand/wordmarks/kdc-wordmark.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> diff --git a/components/alerts/README.md b/components/alerts/README.md new file mode 100644 index 0000000..26a0f2f --- /dev/null +++ b/components/alerts/README.md @@ -0,0 +1,25 @@ +# Alerts + +Specification for the **alerts** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.alerts.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/alerts/anatomy.svg b/components/alerts/anatomy.svg new file mode 100644 index 0000000..24ad537 --- /dev/null +++ b/components/alerts/anatomy.svg @@ -0,0 +1,73 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 360" width="760" height="360" font-family="Inter, Arial, sans-serif" role="img" aria-label="Alert anatomy"> + <title>Alert anatomy + Labeled diagram of a KDC alert: container, leading icon, title, body, action link, dismiss button, semantic variants. + + + + + + + + + + + + + + + Storage almost full + You're using 92% of your 50GB plan. Upgrade to keep syncing. + + Upgrade plan → + + + + + + + + + + + + + + + + + 1 · Container — semantic.* @ 8% bg, semantic.* @ 40% border + 2 · Accent stripe — 4px, semantic color at full strength (optional) + 3 · Leading icon — 24×24, semantic on-color + 4 · Title — typography.bodyS, bold + 5 · Action link — typography.bodyS, brand.primary, optional + 6 · Dismiss — 20×20, top-right, optional + + + + + VARIANTS + + + Info + + + + Success + + + + Warning + + + + Danger + + + + + + Tokens + radius → rounded.md · padding → spacing.4 (16px) · icon-gap → spacing.3 + role → "alert" (assertive) for danger, "status" (polite) for success/info + + diff --git a/components/badges/README.md b/components/badges/README.md new file mode 100644 index 0000000..d9a40c0 --- /dev/null +++ b/components/badges/README.md @@ -0,0 +1,25 @@ +# Badges + +Specification for the **badges** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.badges.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/badges/anatomy.svg b/components/badges/anatomy.svg new file mode 100644 index 0000000..946e98d --- /dev/null +++ b/components/badges/anatomy.svg @@ -0,0 +1,55 @@ + + Badge anatomy + Labeled diagram of a KDC badge: container, dot, label, semantic variants (neutral, success, warning, danger, info). + + + + + + + + Active + + + + + + Neutral + + Success + + Warning + + Danger + + Info + + 3 + + + + + + + + + + + + 1 · Container — rounded.full, 20–24 high + 2 · Dot — 8×8, semantic color (optional) + 3 · Label — typography.caption, semibold, semantic text color + 4 · Padding — 2 × 8 (text-only), 2 × 6 (with dot) + 5 · Count badge — same shape, fixed-width, inverse text + + + VARIANTS + Pair each background with the matching foreground for AA contrast. + + + + Tokens + radius → rounded.full · typography → caption · height → 20–24 + success → semantic.success @ 16% bg / @ 100% text (apply same recipe per variant) + + diff --git a/components/buttons/README.md b/components/buttons/README.md new file mode 100644 index 0000000..0c18af7 --- /dev/null +++ b/components/buttons/README.md @@ -0,0 +1,25 @@ +# Buttons + +Specification for the **buttons** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.buttons.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/buttons/anatomy.svg b/components/buttons/anatomy.svg new file mode 100644 index 0000000..7d4d8ca --- /dev/null +++ b/components/buttons/anatomy.svg @@ -0,0 +1,53 @@ + + Button anatomy + Labeled diagram of a KDC primary button: focus ring, container, corner radius, leading icon, label, and padding. + + + + + + + + + + + + + + + + + Save changes + + + + + + + + + + + + + + + 1 · Focus ring — 2px, offset 4px, brand.primary @ 45% + 2 · Leading icon — 24×24, currentColor + 3 · Container — colors.brand.primary, height 56 + 4 · Corner radius — rounded.md (8px) + 5 · Label — typography.bodyM, semibold, text.inverse + 6 · Padding — 12 × 20 + + + + + Tokens + container.bg → colors.brand.primary + label → typography.bodyM · colors.text.inverse + radius → rounded.md (8px) + padding → spacing.3 / spacing.5 (12 × 20) + focus → brand.primary @ 45%, 2px, offset 4px + + diff --git a/components/cards/README.md b/components/cards/README.md new file mode 100644 index 0000000..969a4bd --- /dev/null +++ b/components/cards/README.md @@ -0,0 +1,25 @@ +# Cards + +Specification for the **cards** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.cards.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/cards/anatomy.svg b/components/cards/anatomy.svg new file mode 100644 index 0000000..7a64251 --- /dev/null +++ b/components/cards/anatomy.svg @@ -0,0 +1,57 @@ + + Card anatomy + Labeled diagram of a KDC card: container, media, title, body text, metadata, action area. + + + + + + + + + + + + + + + Card title + + + A short summary of what this card + represents — keep it under two lines. + + + Updated 2 days ago · 3 min read + + + + Read more + + + + + + + + + + + + + 1 · Container — surface.background, rounded.lg, elevation.1 + 2 · Media area — image / accent / illustration + 3 · Title — typography.headingM + 4 · Body — typography.bodyS, text.muted + 5 · Metadata — typography.caption, text.muted + 6 · Action area — primary or ghost button + + + + + Tokens + container.bg → surface.background · radius → rounded.lg (12px) + padding → spacing.6 (24px) + elevation → elevation.1 · border → border.default (optional) + + diff --git a/components/dropdowns/README.md b/components/dropdowns/README.md new file mode 100644 index 0000000..b41c3cf --- /dev/null +++ b/components/dropdowns/README.md @@ -0,0 +1,25 @@ +# Dropdowns + +Specification for the **dropdowns** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.dropdowns.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/dropdowns/anatomy.svg b/components/dropdowns/anatomy.svg new file mode 100644 index 0000000..c8a528b --- /dev/null +++ b/components/dropdowns/anatomy.svg @@ -0,0 +1,87 @@ + + Dropdown / Menu anatomy + Labeled diagram of a KDC dropdown menu: trigger, menu surface, item, leading icon, shortcut, divider, group label, destructive item, hover state. + + + + + + Actions + + + + + + + + + + + PROJECT + + + + + + + Rename + ⌘R + + + + + + + + Duplicate + ⌘D + + + + + + DANGER + + + + + + + Delete + ⌫ + + + + + + + Archive (coming soon) + + + + + + + + + + + + + + 1 · Trigger — disclosure caret indicates menu + 2 · Surface — surface.background, rounded.lg, elevation.2 + 3 · Group label — typography.caption, uppercase, text.muted + 4 · Hover state — surface.subtle, full-width + 5 · Shortcut — typography.caption, right-aligned + 6 · Destructive item — semantic.danger text + icon + 7 · Disabled — text.muted, non-interactive, skipped by keyboard + + + + + Tokens + surface.bg → surface.background · radius → rounded.lg · elevation → elevation.2 + item.height → 32 · item.padding → 8 × 12 · divider → border.default + + diff --git a/components/forms/README.md b/components/forms/README.md new file mode 100644 index 0000000..3e1c6d5 --- /dev/null +++ b/components/forms/README.md @@ -0,0 +1,25 @@ +# Forms + +Specification for the **forms** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.forms.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/forms/anatomy.svg b/components/forms/anatomy.svg new file mode 100644 index 0000000..8fd311d --- /dev/null +++ b/components/forms/anatomy.svg @@ -0,0 +1,62 @@ + + Form anatomy + Labeled diagram of a KDC form: fieldset legend, field group with label, input, helper, required marker, submit/cancel actions. + + + + + + + + Account details + Used for sign-in and notifications. + + + Full name + * + + Patrick Kitchens + As it should appear on your invoices. + + + Email + * + + pwrkitchens + Enter a valid email address. + + + + + Cancel + + Save + + + + + + + + + + + + + + 1 · Fieldset / section — legend + helper + 2 · Field label — typography.bodyS, semibold + 3 · Required marker — semantic.danger + 4 · Helper text — typography.caption, text.muted + 5 · Error border — semantic.danger, 1.5px + 6 · Error message — typography.caption, semantic.danger + 7 · Actions — primary right-most, cancel ghost + + + + + Tokens + field.gap → spacing.2 (8px) between label/input/helper + stack.gap → spacing.5 (20px) between fields · section.padding → spacing.6 (24px) + + diff --git a/components/inputs/README.md b/components/inputs/README.md new file mode 100644 index 0000000..f1de5a9 --- /dev/null +++ b/components/inputs/README.md @@ -0,0 +1,25 @@ +# Inputs + +Specification for the **inputs** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.inputs.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/inputs/anatomy.svg b/components/inputs/anatomy.svg new file mode 100644 index 0000000..723431a --- /dev/null +++ b/components/inputs/anatomy.svg @@ -0,0 +1,67 @@ + + Input anatomy + Labeled diagram of a KDC text input: label, container, leading icon, placeholder/value, helper text, error state. + + + + + Email address + Optional + + + + + + + + + + + + you@kdc.com + + + + + + + + + We'll never share your email. + + + Email address + + not-an-email + Enter a valid email address. + + + + + + + + + + + + + + 1 · Label — typography.bodyS, semibold + 2 · Container — surface.background, border.default, rounded.md + 3 · Leading icon — 20×20, text.muted + 4 · Trailing action (clear / reveal) + 5 · Helper text — typography.caption, text.muted + 6 · Error border — semantic.danger, 1.5px + 7 · Error message — semantic.danger + + + + + Tokens + container.bg → surface.background · border → border.default + value → typography.bodyS · text.default + radius → rounded.md · padding 10 × 12 · height 40 + error → semantic.danger + + diff --git a/components/modals/README.md b/components/modals/README.md new file mode 100644 index 0000000..2296f67 --- /dev/null +++ b/components/modals/README.md @@ -0,0 +1,25 @@ +# Modals + +Specification for the **modals** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.modals.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/modals/anatomy.svg b/components/modals/anatomy.svg new file mode 100644 index 0000000..a63a959 --- /dev/null +++ b/components/modals/anatomy.svg @@ -0,0 +1,63 @@ + + Modal anatomy + Labeled diagram of a KDC modal: scrim, container, header, body, footer actions, close button. + + + + + + + + + Delete project + This action cannot be undone. + + + + + + + + + + + Are you sure you want to delete + "Marketing Q3"? All associated data + will be permanently removed. + + + + + + + Cancel + + Delete + + + + + + + + + + + + + 1 · Scrim — neutral.900 @ 55% + 2 · Container — surface.background, rounded.xl, elevation.3 + 3 · Header — title + optional subtitle + 4 · Close — top-right, 20×20 + 5 · Body — typography.bodyM, scrolls if tall + 6 · Footer — actions right-aligned, primary last + + + + + Tokens + container.bg → surface.background · radius → rounded.xl (16px) + width → 480px (default modal) + scrim → neutral.900 @ 55% · elevation → elevation.3 + + diff --git a/components/navigation/README.md b/components/navigation/README.md new file mode 100644 index 0000000..511bb03 --- /dev/null +++ b/components/navigation/README.md @@ -0,0 +1,25 @@ +# Navigation + +Specification for the **navigation** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.navigation.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/navigation/anatomy.svg b/components/navigation/anatomy.svg new file mode 100644 index 0000000..20d32b6 --- /dev/null +++ b/components/navigation/anatomy.svg @@ -0,0 +1,61 @@ + + Navigation (top bar) anatomy + Labeled diagram of a KDC top navigation bar: logo, primary nav, search, user menu, active indicator. + + + + + + + + + + KDC + + + Home + Projects + Reports + Team + + + + + + + + + + Search… + + + + PK + + + + + + + + + + + + + 1 · Logo / brand mark + 2 · Primary nav — typography.bodyS + 3 · Active indicator — 3px bar, brand.primary + 4 · Search — pill, rounded.full, surface.subtle + 5 · User menu (avatar) + 6 · Bottom border — border.default + + + + + Tokens + bar.bg → surface.background · height 64 · border-bottom → border.default + item → typography.bodyS · active → brand.primary · inactive → text.default/muted + search → rounded.full, surface.subtle, border.default + + diff --git a/components/tables/README.md b/components/tables/README.md new file mode 100644 index 0000000..f597f68 --- /dev/null +++ b/components/tables/README.md @@ -0,0 +1,25 @@ +# Tables + +Specification for the **tables** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.tables.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/tables/anatomy.svg b/components/tables/anatomy.svg new file mode 100644 index 0000000..aad93b1 --- /dev/null +++ b/components/tables/anatomy.svg @@ -0,0 +1,81 @@ + + Table anatomy + Labeled diagram of a KDC data table: header row, sortable header, body row, zebra/hover, row selection, status cell, pagination. + + + + + + + + + + + + + + + + NAME ↑ + EMAIL + STATUS + ROLE + + + + + + Patrick Kitchens + pwr@kdc.com + + Active + Owner + + + + + Ada Lovelace + ada@kdc.com + + Pending + Editor + + + + + Grace Hopper + grace@kdc.com + + Failed + Viewer + + + + Showing 1–3 of 124 + ‹ 1 2 3 4 › + + + + + + + + + + + + 1 · Header row — surface.subtle, caption, uppercase + 2 · Sortable column — arrow indicates direction + 3 · Status pill — semantic colors (success/warning/danger) + 4 · Selected row — brand.primary @ 8% tint + 5 · Selection checkbox — header toggles all + 6 · Footer — count + pagination controls + + + + + Tokens + row.height → 40 · cell.padding → 12 × 16 · divider → border.default + selected.bg → brand.primary @ 8% · hover.bg → surface.subtle + + diff --git a/components/tabs/README.md b/components/tabs/README.md new file mode 100644 index 0000000..fd5b436 --- /dev/null +++ b/components/tabs/README.md @@ -0,0 +1,25 @@ +# Tabs + +Specification for the **tabs** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.tabs.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/tabs/anatomy.svg b/components/tabs/anatomy.svg new file mode 100644 index 0000000..d015b8d --- /dev/null +++ b/components/tabs/anatomy.svg @@ -0,0 +1,54 @@ + + Tabs anatomy + Labeled diagram of a KDC tab list: tab list, individual tab, active indicator, hover, disabled, panel, optional badge. + + + + + + + + + Overview + + + Activity + + + 12 + + + Members + Billing + + + + + Overview + Panel content for the active tab. + + + + + + + + + + + + 1 · Tab list — bottom border separates from panel + 2 · Active indicator — 3px bar, brand.primary + 3 · Active label — brand.primary, semibold + 4 · Optional count — pill, surface.muted + 5 · Disabled tab — text.muted @ 60%, no hover + 6 · Panel — labelled by active tab via aria-controls + + + + + Tokens + tab.height → 40 · tab.padding → 8 × 16 · active.bar → 3px brand.primary + label → typography.bodyS · inactive → text.default · disabled → text.muted @ 60% + + diff --git a/components/tooltips/README.md b/components/tooltips/README.md new file mode 100644 index 0000000..839c5cd --- /dev/null +++ b/components/tooltips/README.md @@ -0,0 +1,25 @@ +# Tooltips + +Specification for the **tooltips** primitive. + +## Anatomy +TODO — drop `anatomy.svg` next to this file. + +## Variants +- default +- (list per-component variants) + +## States +default · hover · focus-visible · active/pressed · disabled · loading + +## Tokens used +See `design.md` → `components.tooltips.*`. + +## Accessibility +- All interactive instances are keyboard-reachable. +- Focus state has ≥ 3:1 contrast against its background. +- Pair color with an icon or text to convey meaning. + +## Do / Don't +- ✅ Use the canonical token references. +- ❌ Don't hardcode colors, sizes, or radii. diff --git a/components/tooltips/anatomy.svg b/components/tooltips/anatomy.svg new file mode 100644 index 0000000..1c29d34 --- /dev/null +++ b/components/tooltips/anatomy.svg @@ -0,0 +1,46 @@ + + Tooltip anatomy + Labeled diagram of a KDC tooltip: trigger, container, arrow, label text, offset. + + + + + + + + + + + + + + + Save and continue + + + + + + + + + + + + + + + 1 · Container — neutral.900, rounded.sm, elevation.2 + 2 · Arrow — 8×6 caret, same fill as container + 3 · Label — typography.caption, text.inverse, single line preferred + 4 · Trigger — focusable element (button / icon / link) + 5 · Offset — 8px gap from trigger + + + + + Tokens + container.bg → neutral.900 · text → text.inverse · radius → rounded.sm + padding → 6 × 10 · delay.show → 200ms · delay.hide → 0ms · z-index above modals + + diff --git a/design.md b/design.md new file mode 100644 index 0000000..4d0d1b7 --- /dev/null +++ b/design.md @@ -0,0 +1,287 @@ +--- +version: alpha +name: KDC Design System +description: The official design system for KDC — tokens, components, and guidelines for building consistent KDC product and brand experiences. +colors: + brand.primary: "rgb(11, 95, 255)" + brand.primaryHover: "#0848C2" + brand.primaryPressed: "#063494" + brand.secondary: "#FF6B00" + brand.accent: "#00C2A8" + neutral.0: "#FFFFFF" + neutral.50: "#F7F8FA" + neutral.100: "#EDEFF3" + neutral.200: "#D9DCE3" + neutral.300: "#B8BDC9" + neutral.500: "#6B7280" + neutral.700: "#374151" + neutral.900: "#111827" + neutral.1000: "#000000" + semantic.success: "#16A34A" + semantic.warning: "#F59E0B" + semantic.danger: "#DC2626" + semantic.info: "#0EA5E9" + surface.background: "{colors.neutral.0}" + surface.subtle: "{colors.neutral.50}" + surface.muted: "{colors.neutral.100}" + text.default: "{colors.neutral.900}" + text.muted: "{colors.neutral.500}" + text.inverse: "{colors.neutral.0}" + border.default: "{colors.neutral.200}" + border.strong: "{colors.neutral.300}" +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" +rounded: + none: "0px" + xs: "2px" + sm: "4px" + md: "8px" + lg: "12px" + xl: "16px" + "2xl": "24px" + full: "9999px" +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" +components: + button.primary: + backgroundColor: "{colors.brand.primary}" + textColor: "{colors.text.inverse}" + typography: "{typography.bodyM}" + rounded: "{rounded.md}" + padding: "12px 20px" + height: "40px" + button.primaryHover: + backgroundColor: "{colors.brand.primaryHover}" + textColor: "{colors.text.inverse}" + button.primaryPressed: + backgroundColor: "{colors.brand.primaryPressed}" + textColor: "{colors.text.inverse}" + button.secondary: + backgroundColor: "{colors.surface.subtle}" + textColor: "{colors.text.default}" + typography: "{typography.bodyM}" + rounded: "{rounded.md}" + padding: "12px 20px" + height: "40px" + button.ghost: + backgroundColor: "transparent" + textColor: "{colors.brand.primary}" + typography: "{typography.bodyM}" + rounded: "{rounded.md}" + padding: "12px 20px" + height: "40px" + input.default: + backgroundColor: "{colors.surface.background}" + textColor: "{colors.text.default}" + typography: "{typography.bodyM}" + rounded: "{rounded.md}" + padding: "10px 12px" + height: "40px" + card.default: + backgroundColor: "{colors.surface.background}" + textColor: "{colors.text.default}" + rounded: "{rounded.lg}" + padding: "24px" + badge.default: + backgroundColor: "{colors.surface.muted}" + textColor: "{colors.text.default}" + typography: "{typography.caption}" + rounded: "{rounded.full}" + padding: "2px 8px" + height: "20px" + modal.default: + backgroundColor: "{colors.surface.background}" + textColor: "{colors.text.default}" + rounded: "{rounded.xl}" + padding: "24px" + width: "480px" +--- + +## Overview + +The KDC Design System (KDS) is the source of truth for the visual and interaction language across all KDC products, marketing, and brand surfaces. It exists to make consistency cheap, accessibility default, and good design fast. + +**Brand pillars** + +- **Clear** — communication is direct and free of jargon. +- **Confident** — strong typography, decisive color, generous whitespace. +- **Human** — warm accents and approachable voice balance the precision. + +KDS targets WCAG 2.2 AA at minimum across all components and themes. + +## Colors + +Color is organized in three layers: + +1. **Brand** — primary identity colors (`brand.primary`, `brand.secondary`, `brand.accent`). +2. **Neutral** — a 12-step gray ramp powering surfaces, text, and borders. +3. **Semantic** — meaning-bearing colors for status: success, warning, danger, info. + +Always reference *role* tokens (`text.default`, `surface.subtle`, `border.default`) in product code rather than raw palette values, so themes can swap without churn. + +Contrast minimums: + +- Body text on background: ≥ 4.5:1 +- Large text and UI icons: ≥ 3:1 +- Disabled/decorative content is exempt but should still be perceivable. + +## Typography + +The primary typeface is **Inter** (variable, 100–900). The monospace companion is **Roboto Mono**, used only for code, tabular figures, and technical content. + +The scale is a modular 8-step ramp (`caption` → `display`). Use semantic tokens (`headingL`, `bodyM`) — never hardcode `font-size`. Body copy defaults to `bodyM`/16px with a 1.5 line-height for readability. Display sizes use tighter tracking (`-0.02em`) to prevent airy letterspacing at large sizes. + +Web fonts are self-hosted from `assets/fonts/` and preloaded for the two most common weights (400, 600). + +## Layout + +KDS is built on a **4px base unit**. All spacing, sizing, and layout dimensions are multiples of 4. The `spacing` scale exposes the curated set most commonly needed (`1`–`24`). + +**Grid** + +- 12-column responsive grid. +- Gutters: 16px (mobile) / 24px (tablet) / 32px (desktop). +- Max content width: 1200px, centered. + +**Breakpoints** + +| Token | Min width | +|-------|-----------| +| sm | 640px | +| md | 768px | +| lg | 1024px | +| xl | 1280px | +| 2xl | 1536px | + +Layouts should be mobile-first and use logical properties (`inline-start`, `block-end`) for RTL readiness. + +## Elevation & Depth + +Elevation is conveyed through a small set of layered shadows plus subtle background shifts. Avoid using elevation for decoration — reserve it for affordance and hierarchy. + +| Level | Use | Shadow | +|-------|-----|--------| +| 0 | flush surfaces, page background | none | +| 1 | cards, list rows | `0 1px 2px rgba(17,24,39,0.06)` | +| 2 | dropdowns, popovers | `0 4px 12px rgba(17,24,39,0.10)` | +| 3 | modals, dialogs | `0 16px 32px rgba(17,24,39,0.16)` | +| 4 | toasts, command bars | `0 24px 48px rgba(17,24,39,0.20)` | + +In dark theme, shadows are de-emphasized and elevation is communicated primarily through lighter surface tints. + +## Shapes + +Corner radius is calibrated to component density: + +- `xs` (2px) — chips, inline tags +- `sm` (4px) — inputs, small controls +- `md` (8px) — buttons, default surfaces +- `lg` (12px) — cards, sections +- `xl` (16px) — modals, sheets +- `2xl` (24px) — marketing surfaces, feature panels +- `full` — pills, avatars, circular buttons + +Avoid mixing more than two radii in a single composition. + +## Components + +The component library lives under `components/` with one folder per primitive. Each folder ships: + +- A spec (`README.md`) documenting variants, states, props, and a11y notes. +- Anatomy SVG/PNG. +- Implementation references (web/mobile, where applicable). + +Core primitives shipped today: + +- **Buttons** — primary, secondary, ghost, destructive; sizes sm/md/lg; loading & disabled states. +- **Inputs** — text, textarea, select, checkbox, radio, switch. +- **Cards** — default, elevated, outlined. +- **Modals** — dialog, sheet, drawer. +- **Navigation** — top bar, side nav, tabs, breadcrumbs, pagination. +- **Forms** — field, label, helper text, error message, fieldset. +- **Tables** — sortable, selectable, paginated. +- **Badges** — neutral, success, warning, danger, info. +- **Tooltips, Alerts, Tabs, Dropdowns**. + +Every interactive component must define: default, hover, focus-visible, active/pressed, disabled, and (where relevant) loading. + +## Do's and Don'ts + +**Do** + +- Use role tokens (`text.default`) over palette tokens (`neutral.900`). +- Pair every color with a contrast check before shipping. +- Lean on whitespace before adding rules, borders, or shadows. +- Keep motion under 250ms for UI feedback; ease-out for entrances, ease-in for exits. +- Provide focus-visible styles on every interactive element. + +**Don't** + +- Don't introduce off-system colors, fonts, or radii in product UI. +- Don't use color alone to convey meaning — always pair with icon or text. +- Don't stack more than two elevation levels in a single composition. +- Don't override component internals; extend via documented props/slots. +- Don't ship animations longer than 400ms on transactional UI. diff --git a/docs/accessibility/README.md b/docs/accessibility/README.md new file mode 100644 index 0000000..fcd67cb --- /dev/null +++ b/docs/accessibility/README.md @@ -0,0 +1,10 @@ +# Accessibility + +KDS targets **WCAG 2.2 AA**. + +- Color contrast: ≥ 4.5:1 body, ≥ 3:1 large text and UI. +- Focus-visible on every interactive element. +- Don't rely on color alone — pair with icon/text. +- Honor `prefers-reduced-motion` — disable non-essential motion. +- Provide accessible names for all icons used standalone. +- Test with keyboard, screen reader (NVDA / VoiceOver), and 200% zoom. diff --git a/docs/changelog/README.md b/docs/changelog/README.md new file mode 100644 index 0000000..2c6bd73 --- /dev/null +++ b/docs/changelog/README.md @@ -0,0 +1,3 @@ +# Changelog + +See the project-level [`CHANGELOG.md`](../../CHANGELOG.md). diff --git a/docs/contributing/README.md b/docs/contributing/README.md new file mode 100644 index 0000000..12735a1 --- /dev/null +++ b/docs/contributing/README.md @@ -0,0 +1,16 @@ +# Contributing + +1. Open an issue describing the proposed change (token, component, doc). +2. Branch from `main`: `git checkout -b feat/`. +3. Update `design.md` first — it is the source of truth. +4. Regenerate `tokens/` exports. +5. Add or update component documentation under `components//`. +6. Open a PR; the design-system maintainers (see `CODEOWNERS`) will review. + +## PR checklist + +- [ ] `design.md` updated +- [ ] Tokens regenerated +- [ ] Component spec updated (states + a11y) +- [ ] Changelog entry added under `[Unreleased]` +- [ ] Visual examples attached diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md new file mode 100644 index 0000000..1b0de9c --- /dev/null +++ b/docs/getting-started/README.md @@ -0,0 +1,17 @@ +# Getting Started + +1. **Read** [`design.md`](../../design.md) — the canonical token spec. +2. **Pick** a platform from [`examples/`](../../examples/). +3. **Install** the fonts from [`assets/fonts/`](../../assets/fonts/). +4. **Import** the tokens from [`tokens/`](../../tokens/). +5. **Layer** a theme from [`themes/`](../../themes/). + +## Local setup + +```bash +# install +npm install + +# regenerate tokens (when scripts/build-tokens.js is implemented) +npm run build:tokens +``` diff --git a/docs/principles/README.md b/docs/principles/README.md new file mode 100644 index 0000000..dbd4b1a --- /dev/null +++ b/docs/principles/README.md @@ -0,0 +1,7 @@ +# Design Principles + +1. **Clarity over cleverness** — the obvious solution is the right one. +2. **Consistency builds trust** — use system tokens, not bespoke values. +3. **Accessibility is the floor** — WCAG 2.2 AA is the minimum, not a goal. +4. **Whitespace is structural** — let layout breathe before adding rules. +5. **Motion is feedback** — animation explains state change, never decorates. diff --git a/docs/voice-and-tone/README.md b/docs/voice-and-tone/README.md new file mode 100644 index 0000000..bbc4101 --- /dev/null +++ b/docs/voice-and-tone/README.md @@ -0,0 +1,12 @@ +# Voice & Tone + +**Voice (constant):** clear, confident, human. +**Tone (situational):** warm in onboarding, terse in errors, neutral in data. + +## Writing rules + +- Sentence case for headings, buttons, and labels. +- Active voice. "Save changes" not "Changes will be saved". +- Lead with what the user gets, not what we did. +- Numbers as digits (`3 items`, not `three items`). +- One idea per sentence in error messages. diff --git a/examples/figma/README.md b/examples/figma/README.md new file mode 100644 index 0000000..65a542b --- /dev/null +++ b/examples/figma/README.md @@ -0,0 +1,4 @@ +# Examples · figma + +Minimal reference implementation showing how to consume KDS tokens, fonts, +and components on figma. diff --git a/examples/mobile/README.md b/examples/mobile/README.md new file mode 100644 index 0000000..d74c905 --- /dev/null +++ b/examples/mobile/README.md @@ -0,0 +1,4 @@ +# Examples · mobile + +Minimal reference implementation showing how to consume KDS tokens, fonts, +and components on mobile. diff --git a/examples/web/README.md b/examples/web/README.md new file mode 100644 index 0000000..36abdf6 --- /dev/null +++ b/examples/web/README.md @@ -0,0 +1,4 @@ +# Examples · web + +Minimal reference implementation showing how to consume KDS tokens, fonts, +and components on web. diff --git a/examples/web/index.html b/examples/web/index.html new file mode 100644 index 0000000..b8ae92c --- /dev/null +++ b/examples/web/index.html @@ -0,0 +1,18 @@ + + + + + + KDC Design System — Web Example + + + + + +
+

KDC Design System

+

A minimal page wired up to KDS tokens and fonts.

+ +
+ + diff --git a/examples/web/styles.css b/examples/web/styles.css new file mode 100644 index 0000000..e6dc410 --- /dev/null +++ b/examples/web/styles.css @@ -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); } diff --git a/foundations/breakpoints/README.md b/foundations/breakpoints/README.md new file mode 100644 index 0000000..3d7d4cf --- /dev/null +++ b/foundations/breakpoints/README.md @@ -0,0 +1,8 @@ +# Foundations · Breakpoints + +Reference documentation for the **breakpoints** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/colors/README.md b/foundations/colors/README.md new file mode 100644 index 0000000..18ac4d6 --- /dev/null +++ b/foundations/colors/README.md @@ -0,0 +1,8 @@ +# Foundations · Colors + +Reference documentation for the **colors** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/colors/swatches.md b/foundations/colors/swatches.md new file mode 100644 index 0000000..72a02e4 --- /dev/null +++ b/foundations/colors/swatches.md @@ -0,0 +1,13 @@ +# Color Swatches + +| Token | Hex | Preview | +|-------|-----|---------| +| `brand.primary` | `#0B5FFF` | 🟦 | +| `brand.secondary` | `#FF6B00` | 🟧 | +| `brand.accent` | `#00C2A8` | 🟩 | +| `neutral.0` | `#FFFFFF` | ⬜ | +| `neutral.900` | `#111827` | ⬛ | +| `semantic.success` | `#16A34A` | ✅ | +| `semantic.warning` | `#F59E0B` | ⚠️ | +| `semantic.danger` | `#DC2626` | 🛑 | +| `semantic.info` | `#0EA5E9` | ℹ️ | diff --git a/foundations/elevation/README.md b/foundations/elevation/README.md new file mode 100644 index 0000000..82454da --- /dev/null +++ b/foundations/elevation/README.md @@ -0,0 +1,8 @@ +# Foundations · Elevation + +Reference documentation for the **elevation** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/grid/README.md b/foundations/grid/README.md new file mode 100644 index 0000000..f00fb80 --- /dev/null +++ b/foundations/grid/README.md @@ -0,0 +1,8 @@ +# Foundations · Grid + +Reference documentation for the **grid** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/motion/README.md b/foundations/motion/README.md new file mode 100644 index 0000000..7fbeb08 --- /dev/null +++ b/foundations/motion/README.md @@ -0,0 +1,8 @@ +# Foundations · Motion + +Reference documentation for the **motion** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/radius/README.md b/foundations/radius/README.md new file mode 100644 index 0000000..402c60c --- /dev/null +++ b/foundations/radius/README.md @@ -0,0 +1,8 @@ +# Foundations · Radius + +Reference documentation for the **radius** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/spacing/README.md b/foundations/spacing/README.md new file mode 100644 index 0000000..efd4a6e --- /dev/null +++ b/foundations/spacing/README.md @@ -0,0 +1,8 @@ +# Foundations · Spacing + +Reference documentation for the **spacing** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/foundations/typography/README.md b/foundations/typography/README.md new file mode 100644 index 0000000..99fcde8 --- /dev/null +++ b/foundations/typography/README.md @@ -0,0 +1,8 @@ +# Foundations · Typography + +Reference documentation for the **typography** foundation. The canonical token values +live in [`../../design.md`](../../design.md) and the machine-readable export +in [`../../tokens/`](../../tokens/). + +This page is for human-facing rationale: when to use which token, examples, +and platform notes. diff --git a/package.json b/package.json new file mode 100644 index 0000000..fa0a0c6 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "@kdc/design-system", + "version": "0.1.0-alpha.0", + "description": "KDC Design System — tokens, components, and brand assets.", + "private": true, + "scripts": { + "build:tokens": "node scripts/build-tokens.js", + "lint": "echo \"TODO: configure linter\"", + "test": "echo \"TODO: configure tests\"" + }, + "license": "UNLICENSED" +} diff --git a/scripts/README.md b/scripts/README.md new file mode 100644 index 0000000..dcbb444 --- /dev/null +++ b/scripts/README.md @@ -0,0 +1,7 @@ +# Scripts + +Build / export tooling for the design system. + +| Script | Purpose | +|--------|---------| +| `build-tokens.js` | Convert `tokens/*.json` into platform outputs. | diff --git a/scripts/build-tokens.js b/scripts/build-tokens.js new file mode 100755 index 0000000..f77722a --- /dev/null +++ b/scripts/build-tokens.js @@ -0,0 +1,12 @@ +#!/usr/bin/env node +/** + * KDC Design System — token build script (placeholder). + * + * Reads tokens/*.json and emits platform-specific outputs: + * - dist/tokens.css (CSS custom properties) + * - dist/tokens.scss (Sass variables) + * - dist/tokens.ts (TypeScript constants) + * + * Replace this stub with a real implementation (e.g. Style Dictionary). + */ +console.log("[kds] build-tokens: not implemented yet"); diff --git a/templates/email/README.md b/templates/email/README.md new file mode 100644 index 0000000..19a83bf --- /dev/null +++ b/templates/email/README.md @@ -0,0 +1,4 @@ +# Templates · email + +Reference layouts for email experiences. Drop starter files here (HTML, MJML, +Keynote, InDesign, Figma) and document where each one applies. diff --git a/templates/mobile/README.md b/templates/mobile/README.md new file mode 100644 index 0000000..5d58f62 --- /dev/null +++ b/templates/mobile/README.md @@ -0,0 +1,4 @@ +# Templates · mobile + +Reference layouts for mobile experiences. Drop starter files here (HTML, MJML, +Keynote, InDesign, Figma) and document where each one applies. diff --git a/templates/presentation/README.md b/templates/presentation/README.md new file mode 100644 index 0000000..82057b3 --- /dev/null +++ b/templates/presentation/README.md @@ -0,0 +1,4 @@ +# Templates · presentation + +Reference layouts for presentation experiences. Drop starter files here (HTML, MJML, +Keynote, InDesign, Figma) and document where each one applies. diff --git a/templates/print/README.md b/templates/print/README.md new file mode 100644 index 0000000..c682775 --- /dev/null +++ b/templates/print/README.md @@ -0,0 +1,4 @@ +# Templates · print + +Reference layouts for print experiences. Drop starter files here (HTML, MJML, +Keynote, InDesign, Figma) and document where each one applies. diff --git a/templates/web/README.md b/templates/web/README.md new file mode 100644 index 0000000..bb2469a --- /dev/null +++ b/templates/web/README.md @@ -0,0 +1,4 @@ +# Templates · web + +Reference layouts for web experiences. Drop starter files here (HTML, MJML, +Keynote, InDesign, Figma) and document where each one applies. diff --git a/themes/README.md b/themes/README.md new file mode 100644 index 0000000..6b491c4 --- /dev/null +++ b/themes/README.md @@ -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. | diff --git a/themes/dark/theme.json b/themes/dark/theme.json new file mode 100644 index 0000000..08e7295 --- /dev/null +++ b/themes/dark/theme.json @@ -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" + } +} diff --git a/themes/high-contrast/theme.json b/themes/high-contrast/theme.json new file mode 100644 index 0000000..afce927 --- /dev/null +++ b/themes/high-contrast/theme.json @@ -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" + } +} diff --git a/themes/light/theme.json b/themes/light/theme.json new file mode 100644 index 0000000..0372100 --- /dev/null +++ b/themes/light/theme.json @@ -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" + } +} diff --git a/tokens/README.md b/tokens/README.md new file mode 100644 index 0000000..c686677 --- /dev/null +++ b/tokens/README.md @@ -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. diff --git a/tokens/breakpoints.json b/tokens/breakpoints.json new file mode 100644 index 0000000..f3dae76 --- /dev/null +++ b/tokens/breakpoints.json @@ -0,0 +1,9 @@ +{ + "breakpoints": { + "sm": "640px", + "md": "768px", + "lg": "1024px", + "xl": "1280px", + "2xl": "1536px" + } +} diff --git a/tokens/colors.json b/tokens/colors.json new file mode 100644 index 0000000..99cbeab --- /dev/null +++ b/tokens/colors.json @@ -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" } + } + } +} diff --git a/tokens/elevation.json b/tokens/elevation.json new file mode 100644 index 0000000..839eb5b --- /dev/null +++ b/tokens/elevation.json @@ -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)" } + } +} diff --git a/tokens/motion.json b/tokens/motion.json new file mode 100644 index 0000000..c04b956 --- /dev/null +++ b/tokens/motion.json @@ -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)" + } + } +} diff --git a/tokens/radius.json b/tokens/radius.json new file mode 100644 index 0000000..b18bf50 --- /dev/null +++ b/tokens/radius.json @@ -0,0 +1,12 @@ +{ + "rounded": { + "none": "0px", + "xs": "2px", + "sm": "4px", + "md": "8px", + "lg": "12px", + "xl": "16px", + "2xl": "24px", + "full": "9999px" + } +} diff --git a/tokens/spacing.json b/tokens/spacing.json new file mode 100644 index 0000000..3b0d6be --- /dev/null +++ b/tokens/spacing.json @@ -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" + } +} diff --git a/tokens/typography.json b/tokens/typography.json new file mode 100644 index 0000000..a05296a --- /dev/null +++ b/tokens/typography.json @@ -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" } + } +}