@gv-tech/design-system 2.3.0 → 2.5.0

package/docs/update-plan.md

@@ -0,0 +1,268 @@
+# Monorepo Update Plan — Incremental Nx Adoption
+
+**Date:** 2026-02-17
+**Status:** Phase 1 Complete — Parity Extracted, Sites Isolated
+**Supersedes:** Portions of [architecture-pivot.md](./architecture-pivot.md) relating to tooling choices
+
+---
+
+## Summary
+
+We are adopting **Option 1** (one design system, two implementations) with an **incremental Nx adoption** strategy. This document is the actionable plan that bridges the existing architecture ADR and the Phase 1 tracker.
+
+> [!IMPORTANT]
+> **Key constraints (decided):**
+>
+> - **release-please stays** as the release orchestrator — no Nx Release migration now.
+> - **Cloudflare Pages stays** for deployment of the playground/docs site.
+> - **Nx is adopted incrementally** — task running and caching only; no release tooling changes.
+
+---
+
+## Phase 0 — Foundation (No Breaking Changes)
+
+Phase 0 sets up Yarn workspaces + Nx without changing any existing build, deploy, or release behavior.
+
+### 0.1 Enable Yarn Workspaces
+
+Convert to a workspaces-aware root by adding `workspaces` to the root `package.json`:
+
+```jsonc
+// package.json (root additions)
+{
+  "private": true, // required for workspaces root
+  "workspaces": ["packages/*", "apps/*"],
+}
+```
+
+> [!NOTE]
+> The existing `@gv-tech/design-system` package currently publishes from root. During Phase 0 we keep publishing from root — the `workspaces` field simply enables cross-package resolution for new packages. The `private: true` field must be added carefully since the root package currently publishes to npm. See [Decision 1](#decision-1-root-privatetrue-timing) below.
+
+**`.yarnrc.yml`** — no changes needed (`nodeLinker: node-modules` already set).
+
+### 0.2 Add Nx (Tasks & Caching Only)
+
+```bash
+# Install Nx as a devDependency
+yarn add -D nx @nx/js
+```
+
+Create `nx.json` at the repo root:
+
+```jsonc
+{
+  "$schema": "node_modules/nx/schemas/nx-schema.json",
+  "defaultBase": "main",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": ["{workspaceRoot}/tsconfig.json"],
+    "production": ["default", "!{projectRoot}/**/*.test.*"],
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"],
+      "cache": true,
+    },
+    "test": {
+      "inputs": ["default", "^production"],
+      "cache": true,
+    },
+    "lint": {
+      "inputs": ["default"],
+      "cache": true,
+    },
+  },
+}
+```
+
+> [!TIP]
+> Nx infers tasks from each package's `package.json` scripts — no Nx executors or `project.json` files are needed initially. Running `npx nx build @gv-tech/design-system` will call the existing `yarn build` script.
+
+### 0.3 Create Directory Scaffolding
+
+```text
+gvtech-design/
+├── apps/
+│   └── playground-web/          ← Will hold the docs/playground site (Phase 1)
+├── packages/
+│   ├── design-tokens/           ← Phase 1
+│   ├── ui-core/                 ← Phase 1
+│   ├── ui-web/                  ← Phase 1+
+│   └── ui-native/               ← Phase 1+
+├── src/                          ← Existing code stays here during Phase 0
+├── nx.json                       ← NEW
+├── package.json                  ← Updated with workspaces
+└── ...existing files
+```
+
+Directories can be created empty with a `.gitkeep` initially — no code moves in Phase 0.
+
+### 0.4 Update CI (`.github/workflows/ci.yml`)
+
+Add Nx caching without changing existing behavior:
+
+```yaml
+# After yarn install step, add:
+- name: Restore Nx Cache
+  uses: actions/cache@v4
+  with:
+    path: .nx/cache
+    key: ${{ runner.os }}-nx-${{ hashFiles('yarn.lock') }}-${{ github.sha }}
+    restore-keys: |
+      ${{ runner.os }}-nx-${{ hashFiles('yarn.lock') }}-
+      ${{ runner.os }}-nx-
+```
+
+Existing `yarn lint`, `yarn test:ci`, `yarn build`, and `yarn build:site` scripts continue to run as-is. No Nx commands in CI yet — that comes when packages have their own scripts.
+
+### 0.5 Deployment — No Changes
+
+| Setting             | Current Value                          | Phase 0 Change |
+| :------------------ | :------------------------------------- | :------------- |
+| Build command       | `yarn build:site`                      | None           |
+| Output directory    | `dist-site`                            | None           |
+| Wrangler config     | `pages_build_output_dir = "dist-site"` | None           |
+| Cloudflare root dir | Repository root                        | None           |
+
+### 0.6 Release — No Changes
+
+| Setting              | Current Value                        | Phase 0 Change |
+| :------------------- | :----------------------------------- | :------------- |
+| Release orchestrator | `release-please-action@v4.4`         | None           |
+| Manifest             | `.release-please-manifest.json`      | None           |
+| Config               | `release-please-config.json`         | None           |
+| Publish command      | `npm publish --provenance` from root | None           |
+
+### Phase 0 PR Checklist
+
+- [x] Add `"workspaces": ["packages/*", "apps/*"]` to root `package.json`
+- [x] Decided: skip `"private": true` for now (Option B — Yarn 4 allows workspaces without it)
+- [x] `yarn add -D nx @nx/js` (Nx 22.5.1)
+- [x] Create `nx.json` with target defaults and caching config
+- [x] Create empty `packages/` and `apps/` directories with `.gitkeep`
+- [x] Add `.nx/` to `.gitignore`
+- [x] Add Nx cache restore steps to `ci.yml` (test + build jobs)
+- [x] Remove `turbo.json` reference from `architecture-pivot.md` (we're using Nx, not Turbo)
+- [x] Verify: `yarn install` ✅
+- [x] Verify: `yarn build` ✅ (library → `dist/`)
+- [x] Verify: `yarn build:site` ✅ (site → `dist-site/`)
+- [x] Verify: `yarn test:ci` ✅ (120 tests, 49 files)
+- [x] Verify: `yarn lint` ✅
+- [x] Verify: Cloudflare Pages preview deploy ✅ ([verified](https://653e2c83.gvtech-design.pages.dev/web/getting-started))
+
+---
+
+## Phase 1 — Extract Packages
+
+Phase 1 extracts actual code into the workspace packages. The root package continues to re-export from sub-packages for backward compatibility.
+
+### 1.1 `packages/design-tokens`
+
+- Move `src/theme/tokens.ts` (palette + theme) into `packages/design-tokens/src/`
+- Add spacing, typography, shadows, radii exports
+- Create `package.json` with `name: "@gv-tech/design-tokens"`
+- Root `src/theme/tokens.ts` becomes a re-export from `@gv-tech/design-tokens`
+
+### 1.2 `packages/ui-core`
+
+- Create component contracts (props, variants, sizes) in `packages/ui-core/src/contracts/`
+- Phase 1 components: Button, Text, Input, Checkbox, Radio, Card, Dialog/Sheet, Toast
+- Create `package.json` with `name: "@gv-tech/ui-core"`
+
+### 1.3 `packages/ui-web` and `packages/ui-native`
+
+- Move `.web.tsx` implementations to `packages/ui-web/`
+- Move `.native.tsx` implementations to `packages/ui-native/`
+- Both import contracts from `@gv-tech/ui-core` and tokens from `@gv-tech/design-tokens`
+
+### 1.4 `apps/playground-web`
+
+- Move the existing Vite site config into `apps/playground-web/`
+- Update `wrangler.toml` and Cloudflare Pages config to build from `apps/playground-web/`
+- Keep using Vite — no framework change
+
+### 1.5 Update release-please (if sub-packages are published)
+
+If sub-packages (`design-tokens`, `ui-core`) need npm publishing:
+
+- Add entries to `release-please-config.json` under `packages`
+- Add entries to `.release-please-manifest.json`
+- release-please supports monorepo manifests natively
+
+> [!WARNING]
+> Only configure release-please for sub-packages when they are ready to publish. The root `@gv-tech/design-system` package continues to be the primary published artifact through Phase 1.
+
+---
+
+## Decisions Needed
+
+### Decision 1: Root `private:true` Timing
+
+The root `package.json` currently publishes as `@gv-tech/design-system`. Adding `"private": true` (required for Yarn workspaces root) would prevent npm publishing from root.
+
+| Option                                            | Description                                                                              | Recommendation                              |
+| :------------------------------------------------ | :--------------------------------------------------------------------------------------- | :------------------------------------------ |
+| **A) Add `private:true` now**                     | Makes root a pure workspace root. Publishing moves to sub-packages.                      | ❌ Too early — sub-packages don't exist yet |
+| **B) Skip `private:true`, use workspaces anyway** | Yarn 4 allows workspaces without `private:true` at root. Publishing continues from root. | ✅ **Recommended for Phase 0**              |
+| **C) Add `private:true` in Phase 1**              | Add when sub-packages are ready to publish independently.                                | ✅ Natural transition point                 |
+
+> **Recommendation:** Option B for Phase 0 → Option C when sub-packages are publishable.
+
+### Decision 2: Convert to Yarn Workspaces Now or Later
+
+| Option                   | Pros                                                                                                                           | Cons                                                                                    |
+| :----------------------- | :----------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| **Now (Phase 0)**        | New packages can immediately cross-reference each other; `yarn install` resolves them. Clean foundation before any code moves. | Slightly more work upfront in the "no-op" PR.                                           |
+| **Later (follow-up PR)** | Phase 0 PR stays minimal.                                                                                                      | Have to retrofit workspaces when creating the first package — more merge-conflict risk. |
+
+> **Recommendation:** Convert now. Adding `workspaces` to `package.json` is a one-line change and doesn't break anything when there are no packages yet.
+
+---
+
+## Nx Release — Future Evaluation
+
+> [!NOTE]
+> Nx Release is explicitly **out of scope** for Phase 0 and Phase 1. After Phase 1 is complete, evaluate whether Nx Release provides value over release-please for:
+>
+> - Coordinated multi-package versioning
+> - Monorepo-aware changelogs
+> - Publish orchestration across sub-packages
+>
+> **No action required now.**
+
+---
+
+## Risk Matrix
+
+| Risk                                      | Likelihood | Impact | Mitigation                                            |
+| :---------------------------------------- | :--------- | :----- | :---------------------------------------------------- |
+| Yarn workspaces breaks `yarn install`     | Low        | High   | Test in CI on the Phase 0 PR before merging           |
+| Cloudflare Pages can't find build output  | Low        | High   | No build path changes in Phase 0; test preview deploy |
+| Nx overhead for small team                | Medium     | Low    | Nx is opt-in; existing scripts still work without it  |
+| release-please confused by new packages   | Low        | Medium | Don't add packages to manifest until ready to publish |
+| Import paths break during code extraction | Medium     | Medium | Root re-exports from sub-packages for backward compat |
+
+---
+
+## Timeline (Suggested)
+
+| Phase        | Scope                                                | Estimated Duration     |
+| :----------- | :--------------------------------------------------- | :--------------------- |
+| **Phase 0**  | Workspaces + Nx setup, no code moves                 | 1 PR, ~1 day           |
+| **Phase 1a** | Extract `design-tokens` + `ui-core`                  | 1–2 PRs, ~1 week       |
+| **Phase 1b** | Extract `ui-web` + `ui-native` (Phase 1 components)  | 2–3 PRs, ~2 weeks      |
+| **Phase 1c** | Move playground to `apps/`, update Cloudflare config | 1 PR, ~1 day           |
+| **Evaluate** | Nx Release vs release-please decision                | After Phase 1 complete |
+
+---
+
+## References
+
+- [architecture-pivot.md](./architecture-pivot.md) — ADR for the cross-platform design system decision
+- [phase-1-tracker.md](./phase-1-tracker.md) — Component-level progress tracker
+- [universal-implementation.md](./universal-implementation.md) — Implementation guide and parity matrix
+- [Nx + Yarn Workspaces](https://nx.dev/recipes/adopting-nx/adding-to-monorepo) — Official Nx integration docs
+- [release-please monorepo](https://github.com/googleapis/release-please/blob/main/docs/manifest-releaser.md) — Manifest-based multi-package releases
+- [Cloudflare Pages monorepo builds](https://developers.cloudflare.com/pages/configuration/monorepos/) — Subdirectory build support
+- [release-tooling-evaluation.md](./release-tooling-evaluation.md) — Evaluation of Release-Please vs. Nx Release

package/eslint.config.mjs

@@ -8,6 +8,6 @@ export default [
   ...recommended,
   // Add project-specific overrides here
   {
-    ignores: ['**/eslint.config.mjs', '**/.yarn/**', 'dist-site/**'],
+    ignores: ['**/eslint.config.mjs', '**/.yarn/**', '**/dist-site/**'],
   },
 ];

package/nx.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "node_modules/nx/schemas/nx-schema.json",
+  "defaultBase": "main",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": ["{workspaceRoot}/tsconfig.json"],
+    "production": [
+      "default",
+      "!{projectRoot}/**/*.test.*",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/src/test-setup.[jt]s",
+      "!{projectRoot}/test-setup.[jt]s"
+    ]
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"],
+      "cache": true
+    },
+    "test": {
+      "inputs": ["default", "^production"],
+      "cache": true
+    },
+    "lint": {
+      "inputs": ["default"],
+      "cache": true
+    }
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/expo/plugin",
+      "options": {
+        "startTargetName": "start",
+        "buildTargetName": "build",
+        "prebuildTargetName": "prebuild",
+        "serveTargetName": "serve",
+        "installTargetName": "install",
+        "exportTargetName": "export",
+        "submitTargetName": "submit",
+        "runIosTargetName": "run-ios",
+        "runAndroidTargetName": "run-android",
+        "buildDepsTargetName": "build-deps",
+        "watchDepsTargetName": "watch-deps"
+      }
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "Garcia Ventures react design system",
   "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
@@ -17,30 +17,43 @@
       "import": "./dist/design-system.css",
       "default": "./dist/design-system.css"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/components/ui/*/index.d.ts",
+      "react-native": "./dist/components/ui/*/index.native.js",
+      "import": "./dist/*.es.js",
+      "default": "./dist/*.es.js"
+    }
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "style": "dist/design-system.css",
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
   "scripts": {
-    "build": "yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
+    "build": "rm -f tsconfig.tsbuildinfo && yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
     "build:registry": "tsx scripts/build-registry.ts",
-    "build:site": "yarn build:registry && vite build",
-    "dev": "vite",
+    "build:site": "yarn workspace playground-web build",
+    "dev": "yarn workspace playground-web dev",
     "format": "prettier --write .",
     "format:ci": "prettier --check .",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --cache --fix",
     "lint:report": "eslint . --cache -o ./eslintReport.html -f html",
+    "native": "npx nx run native-playground:start",
+    "native:android": "npx nx run native-playground:start --android",
+    "native:clear": "npx nx run native-playground:start --android --clear",
     "prepare": "husky",
-    "setup:ui": "tsx scripts/import-all-shadcn.ts",
     "start": "vite",
     "test": "vitest",
     "test:ci": "CI=true vitest --run --reporter=dot",
     "test:watch": "vitest --watch",
-    "validate": "node ./scripts/validate.js",
-    "validate:fix": "node ./scripts/validate.js --fix"
+    "validate": "tsx ./scripts/validate.ts",
+    "validate:fix": "tsx ./scripts/validate.ts --fix",
+    "validate:no-cache": "tsx ./scripts/validate.ts --no-cache"
   },
   "lint-staged": {
     "*.(js|ts|mjs|cjs)?(x)": [
@@ -63,55 +76,40 @@
     ]
   },
   "prettier": "@eng618/prettier-config",
+  "resolutions": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
   "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "4.1.18",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.563.0",
-    "react-day-picker": "^9.13.2",
-    "react-hook-form": "^7.71.1",
-    "react-icons": "^5.5.0",
-    "react-resizable-panels": "^4.6.2",
-    "recharts": "2.15.4",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "@expo/metro-config": "~54.0.9",
+    "@expo/metro-runtime": "~6.1.2",
+    "expo": "~54.0.0",
+    "expo-splash-screen": "~31.0.11",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.8",
+    "lucide-react-native": "^0.574.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-native": "0.81.5",
+    "react-native-svg": "^15.15.3",
+    "react-native-svg-transformer": "~1.5.1",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@eng618/prettier-config": "^2.7.0",
+    "@expo/cli": "~54.0.16",
     "@gv-tech/eslint-config": "^0.1.8",
+    "@nx/expo": "22.5.1",
+    "@nx/jest": "22.5.1",
+    "@nx/js": "^22.5.1",
+    "@rn-primitives/slot": "^1.2.0",
+    "@swc-node/register": "~1.11.1",
+    "@swc/core": "~1.15.5",
+    "@swc/helpers": "~0.5.18",
+    "@tailwindcss/postcss": "4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -119,8 +117,10 @@
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@types/react-native": "^0.73.0",
+    "@types/react-native-web": "^0.19.2",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "axe-core": "^4.11.1",
     "eslint": "^10.0.0",
@@ -130,14 +130,18 @@
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
+    "metro-config": "~0.83.0",
+    "metro-resolver": "~0.83.0",
     "next-themes": "^0.4.6",
+    "nx": "^22.5.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prop-types": "^15.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-is": "^19.2.4",
+    "react-icons": "^5.5.0",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-web": "^0.21.2",
+    "react-router-dom": "^7.13.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
     "tailwindcss": "4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
@@ -145,11 +149,15 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "lucide-react-native": "^0.475.0",
+    "nativewind": "^4.1.23",
     "next-themes": "^0.4.0",
     "prop-types": "^15.8.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "react-is": "^16 || ^17 || ^18 || ^19"
+    "react-is": "^16 || ^17 || ^18 || ^19",
+    "react-native": "^0.77.0",
+    "react-native-svg": "^15.11.1"
   },
   "packageManager": "yarn@4.12.0",
   "engines": {

package/packages/design-tokens/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/design-tokens-v0.0.1...design-tokens-v0.1.0) (2026-02-20)
+
+
+### Features
+
+* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/packages/design-tokens/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@gv-tech/design-tokens",
+  "version": "0.1.0",
+  "description": "Shared design tokens for the GV Tech design system — palette, theme, spacing, typography, shadows",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "echo 'No tests yet'",
+    "typecheck": "yarn tsc --noEmit"
+  }
+}

package/packages/design-tokens/src/index.ts

@@ -0,0 +1,35 @@
+// @gv-tech/design-tokens
+// Single source of truth for all design tokens in the GV Tech design system.
+// Consumed by both web (ui-web) and native (ui-native) implementations.
+
+// Color tokens
+export { palette } from './palette';
+export type { PaletteTokens } from './palette';
+
+export { theme } from './theme';
+export type { ThemeTokens } from './theme';
+
+// Layout tokens
+export { spacing } from './spacing';
+export type { SpacingTokens } from './spacing';
+
+export { radii, radiiNumeric } from './radii';
+export type { RadiiNumericTokens, RadiiTokens } from './radii';
+
+// Typography tokens
+export { typography } from './typography';
+export type { TypographyTokens } from './typography';
+
+// Elevation tokens
+export { shadows } from './shadows';
+export type { ShadowTokens } from './shadows';
+
+// Convenience re-export of all tokens as a single object.
+// Mirrors the legacy `tokens` export from `src/theme/tokens.ts`.
+import { palette } from './palette';
+import { theme } from './theme';
+
+export const tokens = {
+  palette,
+  theme,
+} as const;

package/packages/design-tokens/src/palette.ts

@@ -0,0 +1,36 @@
+// Primitive color palette for the GV Tech design system.
+// These are the raw color values. They should NOT be used directly in components —
+// use semantic tokens from `theme.ts` instead.
+
+export const palette = {
+  brand: {
+    blue: 'hsl(225 73% 57%)', // Royal Blue (Intellect)
+    green: 'hsl(151 66% 27%)', // #177245 (Stability)
+    floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
+  },
+  neutral: {
+    white: 'hsl(0 0% 100%)',
+    black: 'hsl(0 0% 0%)', // Pure Black
+    gray50: 'hsl(0 0% 96%)', // White Smoke
+    gray100: 'hsl(0 0% 92%)', // Gainsboro
+    gray200: 'hsl(0 0% 89%)', // Light Gray
+    gray300: 'hsl(0 0% 88%)', // French Gray
+    gray400: 'hsl(0 0% 70%)', // Silver
+    gray500: 'hsl(215 16% 47%)', // Steel Blue
+    gray600: 'hsl(222 47% 11%)', // Oxford Blue
+    gray700: 'hsl(0 0% 18%)', // Raisin Black
+    gray800: 'hsl(0 0% 15%)', // Jet
+    gray900: 'hsl(0 0% 14%)', // Eerie Black
+    gray950: 'hsl(0 0% 11%)', // Night (alt)
+    gray975: 'hsl(0 0% 9%)', // Night
+    gray990: 'hsl(0 0% 6%)', // Black (almost)
+  },
+  semantic: {
+    success: 'hsl(93 28% 54%)', // Asparagus / Pistachio
+    successDark: 'hsl(96 44% 61%)',
+    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
+    destructiveDark: 'hsl(0 62.8% 30.6%)', // Blood Red
+  },
+} as const;
+
+export type PaletteTokens = typeof palette;

package/packages/design-tokens/src/radii.ts

@@ -0,0 +1,26 @@
+// Border radius tokens for the GV Tech design system.
+
+export const radii = {
+  none: '0',
+  sm: 'calc(var(--radius) - 4px)',
+  md: 'calc(var(--radius) - 2px)',
+  lg: 'var(--radius)',
+  xl: 'calc(var(--radius) + 4px)',
+  '2xl': 'calc(var(--radius) + 8px)',
+  full: '9999px',
+} as const;
+
+// Numeric radius values (in px) for React Native, which doesn't support CSS calc().
+// Based on a default --radius of 0.5rem (8px).
+export const radiiNumeric = {
+  none: 0,
+  sm: 4, // 8 - 4
+  md: 6, // 8 - 2
+  lg: 8, // base
+  xl: 12, // 8 + 4
+  '2xl': 16, // 8 + 8
+  full: 9999,
+} as const;
+
+export type RadiiTokens = typeof radii;
+export type RadiiNumericTokens = typeof radiiNumeric;