@nadicodeai/design-system 0.1.0 → 0.2.0

package/AGENTS.md

@@ -14,7 +14,7 @@ Plain imperatives are the default. The few hard prohibitions below use `never`/`
 - Preserve approved `DESIGN.md` token and component families unless the user explicitly approves a palette/component migration. Website/kernel CSS is implementation evidence, not the complete palette authority; never delete tokens because current prototypes do not use them or because `@google/design.md lint` reports them as unused.
 - Name implemented grids, components, modules, and page elements as NadicodeAI-owned primitives; source brands such as Vercel or Attio may appear only in reference notes, never in component names, CSS comments, `data-module` values, or public-facing contracts.
 - Calculate page grids, module spans, seams, borders, and element placement from explicit grid math; never hand-place visual structure by eye.
-- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter ships light roles only with no `.dark` block; `@nadicodeai/ui/globals.css` may layer semantic `.dark` remaps from generated tokens without adding a new source-token group. Correctness is enforced by export-derived structural parity (`tests/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops in `tests/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0005 D4 keeps the generated-adapter no-dark-palette rule).
+- Author CSS-bundle work as a reusable design-system component architecture first, not as showcase/page-specific code. The design-system CSS lives in `src/css/` (`tokens.generated` [built from `DESIGN.md`] + `tokens.local` [hand-authored] / `reset`/`foundation`/`motion`/`layout`/`primitives` + `components/*`, mirrored to `dist/css/` and exported as `@nadicodeai/design-system/css`). Since the Tailwind+shadcn migration (ADR 0007) the bundle ships only framework-agnostic brand/display CSS components: the cascade is `@layer tokens, reset, foundation, motion, layout, primitives, components;` (no `sections` layer), and `components/*` holds the agent-chat CSS component family, the run-state `state-tag` family, and `image` — the generic marketing/SaaS component CSS and the whole `sections/*` layer retired to React shadcn components in `@nadicodeai/ui`. The delivery tiers map to real authoring homes: tokens → `tokens.generated`/`tokens.local`; page grammar → `layout.css`; CSS primitives/components → `primitives.css` + `components/*`; specimens → `examples/`. Contracted CSS components are paired with `DESIGN.md components:` entries; the three named CSS-internal components are deliberate no-token exceptions. Pages, site-specific page assemblies, and the standard/interactive/section UI belong to consuming surfaces (`../website/`, `../portal/`, sibling Nadia apps) and to the React package (`@nadicodeai/ui`), not this package. Study current source HTML/CSS for approved external references before implementing similar NadicodeAI primitives, then adapt the structure into NadicodeAI-owned tokens, primitives, and components. Specimen HTML demonstrates only already-defined primitives/components; it never invents component geometry, seams, borders, fillers, heights, or responsive behavior inline. The generated token layer (`tokens.generated.css`) and the Tailwind adapter (`nadicode.theme.css`) are emitted by Style Dictionary (`scripts/sd/`, driven from `scripts/build.ts`) as a complete projection of the `@google/design.md` export — never an allowlist or subset; responsive `@media` switching and composed/`calc` vars live in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` tokens only, while the `.nc-type-*` utility classes live in `foundation.css`. Emitted-but-unreferenced tokens are intentional (the contract drives emission, not consumption), and the generated Tailwind adapter owns standard shadcn role maps for both `:root` and `.dark` using only generated `--color-*`/`--radius-*` references; `@nadicodeai/ui/globals.css` keeps the Tailwind role bridge plus UI-local product aliases. Correctness is enforced by export-derived structural parity (`tests/token-structural-parity.test.ts` for the `--nc-*` layer; the per-token `@theme` value loops and light/dark role-integrity checks in `tests/tailwind-v4-theme.test.ts` for the adapter), the narrowed two-way parity between `DESIGN.md` component YAML/prose and the retained CSS component surface (`tests/components-yaml-matches-css.test.ts`, ADR 0007 D4), plus consumer discipline (`tests/consumer-css-discipline.test.ts`), not a byte snapshot (ADR 0006 supersedes ADR 0005 D1–D3/D5; ADR 0008 supersedes ADR 0005 D4).
 - Follow a source-first reference workflow for external visual references: inspect live/source DOM, stylesheet/CSSOM rules, inline styles, custom properties, computed styles, grid tracks, spans, seam ownership, colors, heights, and breakpoints before writing NadicodeAI code. Screenshots are verification evidence only after implementation; never use them as the source for authoring structure, geometry, or CSS.
 - Never derive reusable kernel geometry from screenshots, eyeballing, one-off browser coordinates, or local patch experiments. Browser measurements may verify an implementation after the source CSS/DOM model is understood, but they do not replace reading the source rules that create the behavior.
 - Map every imported visual behavior to either `DESIGN.md`, an existing kernel token/primitive, or an explicit user-approved change before implementation. If the reference leaves a required decision open, or if `DESIGN.md` does not decide it, ask before coding the missing decision, including height/row span, surface color, visual payload, content slots, crosshair placement, and responsive behavior.
@@ -33,6 +33,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 - Treat `src/assets/` as the source for exported brand SVG assets.
 - Treat `dist/icons/` as a generated icon set baked from the pinned `lucide-static` dependency by `npm run generate:icons` (also run inside `npm run build`) and exported via `./icons/*`; regenerate by bumping `lucide-static`, never hand-edit.
 - Treat `../docs/experiments/**` as the archived `design-canvas/` prototype source-of-record (the chat-motion/component prototypes that `src/css/motion.css`, `src/js/chat-autoplay.js`, and `tests/chat-showcase.test.ts` re-express); never treat it as the package build, runtime component surface, or normative brand contract.
+- Any change to package-consumed output (`DESIGN.md`, generated tokens, CSS bundle, Tailwind theme output, package exports, assets, package docs, or agent instructions) must end with an explicit npm release decision before handoff. If the change should reach external consumers, bump `@nadicodeai/design-system`, run `npm pack --dry-run -w @nadicodeai/design-system`, and follow `../docs/agents/npm-publishing.md`. When `@nadicodeai/ui` consumes the changed output, publish `@nadicodeai/design-system` first, then bump/update/publish `@nadicodeai/ui`. Never claim the package is shipped to npm until `npm view @nadicodeai/design-system version` reports the intended version.
 
 ## Task Routing
 
@@ -64,7 +65,7 @@ Generated-artifact and runtime-JS prohibitions live in the Forbidden Patterns ta
 | --- | --- | --- |
 | Editing `dist/**` or `src/css/tokens.generated.css` directly | Edit `DESIGN.md`, then run `npm run build`; hand-authored token CSS goes in `src/css/tokens.local.css` | Both are generated from `DESIGN.md`; hand edits are overwritten on the next build |
 | Hand-listing which tokens reach the CSS layer (an allowlist, "runtime subset", rename, or any `@media`/`calc` in `tokens.generated.css`) | Style Dictionary (`scripts/sd/`) emits a complete projection of the `@google/design.md` export: every token `--nc-<exact-name>: <exact-value>`, each name once. Responsive switching and composed/`calc` vars are hand-authored in `layout.css`/`tokens.local.css` and reference emitted `--nc-*` only | The export is the contract; a differing subset is drift. `token-structural-parity.test.ts` (export-derived) fails on any dropped/renamed/added/modified/duplicated var, a name collision, a non-px line-height, or any `@media`/`calc` in the generated layer (ADR 0006) |
-| Hardcoding a color/radius/dimension in `src/css`, `examples/`, or the Tailwind adapter that duplicates or extends a token — including a `var(--token, <hex==its value>)` fallback | Reference the emitted token: `var(--nc-<name>)` / `var(--color-<name>)`. A new value goes to `DESIGN.md` first. There is no exception island: the system ships zero out-of-contract values, and the generated Tailwind adapter ships no dark palette or `.dark` block; UI package `.dark` remaps must reference generated tokens or semantic roles | No second value source may exist; the no-raw-literal and no-second-value-source guards in `consumer-css-discipline.test.ts` forbid duplicate values, fallback-encoded or not (ADR 0006; generated-adapter no-dark per ADR 0005 D4) |
+| Hardcoding a color/radius/dimension in `src/css`, `examples/`, or the Tailwind adapter that duplicates or extends a token — including a `var(--token, <hex==its value>)` fallback | Reference the emitted token: `var(--nc-<name>)` / `var(--color-<name>)`. A new value goes to `DESIGN.md` first. There is no exception island: the system ships zero out-of-contract values, and the generated Tailwind adapter may ship light/dark role remaps only when every role value references generated `--color-*`/`--radius-*` tokens. Export-anchored generated aliases such as `--color-nadicode-muted` may duplicate the exported value only when a `var()` reference would collide with a downstream semantic bridge; these aliases must be generated from `DESIGN.md` through `scripts/sd/` and covered by tests. UI package `.dark` aliases must reference generated tokens or semantic roles | No second hand-authored value source may exist; the no-raw-literal and no-second-value-source guards in `consumer-css-discipline.test.ts` forbid duplicate values, fallback-encoded or not, outside the generated export-anchored aliases described here (ADR 0006; light/dark role maps per ADR 0008) |
 | "Cleaning up" emitted-but-unreferenced tokens or the responsive alias block | Leave them. Emitted-unreferenced tokens (orphans) are the intended steady state — the contract drives emission, not consumption. Never add an orphan-detection test or delete a token/alias because no prototype uses it | The contract is the palette authority; consumption is not. Deleting unused tokens is the exact silent-removal the boundary rules forbid (ADR 0006) |
 | Adding `render:showcase`, e2e, examples, registry, AI-Elements, or a second runtime JS file | Keep the package to `DESIGN.md`, assets, token/CSS exports, and the single vanilla `src/js/chat-autoplay.js` enhancer (exported via `./css/*`) | Those surfaces were intentionally removed; only the one dependency-free chat auto-play enhancer is carved out |
 | Inventing token or component behavior | Read `DESIGN.md` | The brand contract is single-source |

package/DESIGN.md

@@ -44,6 +44,28 @@ colors:
   state-review: "#f5a623"
   state-blocked: "#b80022"
   state-complete: "#008c45"
+  dark-canvas: "#101414"
+  dark-canvas-soft: "#151b19"
+  dark-canvas-soft-2: "#1d2522"
+  dark-ink: "#f5f7f4"
+  dark-body: "#c8d0cb"
+  dark-muted: "#8d9892"
+  dark-line: "#2c3632"
+  dark-seam: "#24302b"
+  dark-primary: "#ecf4ee"
+  dark-on-primary: "#101414"
+  dark-link: "#7ee7c6"
+  dark-link-deep: "#b8ffe5"
+  dark-link-bg-soft: "#163f34"
+  dark-error: "#ff7a8b"
+  dark-error-soft: "#4b1821"
+  dark-error-deep: "#ffb3bd"
+  dark-warning: "#ffd28a"
+  dark-warning-soft: "#4a3219"
+  dark-warning-deep: "#ffe6b8"
+  dark-cyan: "#83f7dc"
+  dark-cyan-soft: "#b8ffe5"
+  dark-cyan-deep: "#49c6a8"
 
 typography:
   display-xl:
@@ -377,6 +399,7 @@ The palette keeps the broad neutral, accent, state, and gradient families that N
 - **Flag Red** (`{colors.flag-red}`): a decorative Italian-flag red reserved for brand-asset decoration only (identity marks such as Nadia's flag-red bar). It is distinct from `{colors.error}`; never use `flag-red` for destructive, blocked, or validation states.
 - **Gradient Pairs** (`{colors.gradient-develop-*}`, `{colors.gradient-ship-*}`): reserved gradient vocabulary for artifact- and asset-level energy; do not use them to repair page structure or seams.
 - **Workflow States** (`{colors.state-ready}`, `{colors.state-running}`, `{colors.state-review}`, `{colors.state-blocked}`, `{colors.state-complete}`): left-border/state vocabulary for agentic work surfaces.
+- **Dark Primitives** (`{colors.dark-canvas}`, `{colors.dark-ink}`, `{colors.dark-line}`, and siblings): the source tokens for the generated shadcn `.dark` role map. They are mode-bearing primitives, not a separate component palette; consuming apps opt into them by applying a `.dark` ancestor through their runtime theme provider.
 
 Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
 

package/README.md

@@ -11,7 +11,7 @@ For Tailwind CSS v4 CSS-first projects, `npm run build` also emits `dist/tailwin
 @import "@nadicodeai/design-system/tailwind/theme.css";
 ```
 
-The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
+The CSS adapter provides shadcn-compatible semantic utilities such as `bg-background`, `text-foreground`, `bg-primary`, `text-primary-foreground`, `border-border`, and `ring-ring`. It publishes both `:root` light roles and `.dark` dark roles; consuming apps opt into dark mode by applying a `.dark` ancestor, normally through their own theme provider. NadicodeAI-specific spacing utilities are namespaced, for example `p-nadicode-lg` and `h-nadicode-h-cell-sm`, so standard Tailwind/shadcn classes such as `max-w-3xl` keep their normal Tailwind behavior. React consumers normally get this through `@nadicodeai/ui/globals.css`.
 
 Geist and Geist Mono (SIL Open Font License 1.1) ship inside the package under `src/assets/fonts/`. Consumers can pull the `@font-face` shim directly:
 
@@ -61,7 +61,7 @@ Because the order is declared data, consumer overrides are predictable: layer yo
 
 The `/css` bundle and the Tailwind `theme.css` adapter are complementary:
 
-- `@nadicodeai/design-system/tailwind/theme.css` publishes the shadcn `:root` token variables (the semantic `bg-background` / `text-foreground` / `border-border` family), so interactive shadcn app islands land on-brand when they need JS-driven accessibility behavior such as dialogs or comboboxes.
+- `@nadicodeai/design-system/tailwind/theme.css` publishes the shadcn `:root` and `.dark` token variables (the semantic `bg-background` / `text-foreground` / `border-border` family), so interactive shadcn app islands land on-brand when they need JS-driven accessibility behavior such as dialogs or comboboxes.
 - The `/css` bundle ships NadicodeAI's framework-agnostic page grammar, CSS components, brand motion contract, and agent-chat surfaces.
 - `@nadicodeai/ui` ships the React shadcn-style components and reusable section/app compositions on top of those tokens and CSS components.
 

package/dist/css/tokens.generated.css

@@ -41,6 +41,28 @@
   --nc-state-review: #f5a623;
   --nc-state-blocked: #b80022;
   --nc-state-complete: #008c45;
+  --nc-dark-canvas: #101414;
+  --nc-dark-canvas-soft: #151b19;
+  --nc-dark-canvas-soft-2: #1d2522;
+  --nc-dark-ink: #f5f7f4;
+  --nc-dark-body: #c8d0cb;
+  --nc-dark-muted: #8d9892;
+  --nc-dark-line: #2c3632;
+  --nc-dark-seam: #24302b;
+  --nc-dark-primary: #ecf4ee;
+  --nc-dark-on-primary: #101414;
+  --nc-dark-link: #7ee7c6;
+  --nc-dark-link-deep: #b8ffe5;
+  --nc-dark-link-bg-soft: #163f34;
+  --nc-dark-error: #ff7a8b;
+  --nc-dark-error-soft: #4b1821;
+  --nc-dark-error-deep: #ffb3bd;
+  --nc-dark-warning: #ffd28a;
+  --nc-dark-warning-soft: #4a3219;
+  --nc-dark-warning-deep: #ffe6b8;
+  --nc-dark-cyan: #83f7dc;
+  --nc-dark-cyan-soft: #b8ffe5;
+  --nc-dark-cyan-deep: #49c6a8;
 
   /* Spacing */
   --nc-xxs: 4px;

package/dist/tailwind/nadicode.tailwind.json

@@ -37,7 +37,29 @@
         "state-running": "#007a5e",
         "state-review": "#f5a623",
         "state-blocked": "#b80022",
-        "state-complete": "#008c45"
+        "state-complete": "#008c45",
+        "dark-canvas": "#101414",
+        "dark-canvas-soft": "#151b19",
+        "dark-canvas-soft-2": "#1d2522",
+        "dark-ink": "#f5f7f4",
+        "dark-body": "#c8d0cb",
+        "dark-muted": "#8d9892",
+        "dark-line": "#2c3632",
+        "dark-seam": "#24302b",
+        "dark-primary": "#ecf4ee",
+        "dark-on-primary": "#101414",
+        "dark-link": "#7ee7c6",
+        "dark-link-deep": "#b8ffe5",
+        "dark-link-bg-soft": "#163f34",
+        "dark-error": "#ff7a8b",
+        "dark-error-soft": "#4b1821",
+        "dark-error-deep": "#ffb3bd",
+        "dark-warning": "#ffd28a",
+        "dark-warning-soft": "#4a3219",
+        "dark-warning-deep": "#ffe6b8",
+        "dark-cyan": "#83f7dc",
+        "dark-cyan-soft": "#b8ffe5",
+        "dark-cyan-deep": "#49c6a8"
       },
       "fontFamily": {
         "display-xl": [

package/dist/tailwind/nadicode.theme.css

@@ -1,7 +1,7 @@
 /* Generated by Style Dictionary (scripts/sd) from the @google/design.md Tailwind export. */
 /* Do not edit directly. Run npm run build. */
 
-/* === SHADCN ADAPTER: light roles → references to faithful brand tokens (no dark layer). === */
+/* === SHADCN ADAPTER: light/dark roles → references to faithful brand tokens. === */
 :root {
   --radius: var(--radius-md);
   --background: var(--color-canvas);
@@ -10,12 +10,12 @@
   --card-foreground: var(--color-ink);
   --popover: var(--color-canvas);
   --popover-foreground: var(--color-ink);
-  --primary: var(--color-primary);
+  --primary: var(--color-ink);
   --primary-foreground: var(--color-on-primary);
   --secondary: var(--color-canvas-soft);
   --secondary-foreground: var(--color-ink);
   --muted: var(--color-canvas-soft);
-  --muted-foreground: var(--color-muted);
+  --muted-foreground: var(--color-nadicode-muted);
   --accent: var(--color-canvas-soft-2);
   --accent-foreground: var(--color-ink);
   --destructive: var(--color-error);
@@ -30,7 +30,7 @@
   --chart-5: var(--color-error);
   --sidebar: var(--color-canvas-soft);
   --sidebar-foreground: var(--color-ink);
-  --sidebar-primary: var(--color-primary);
+  --sidebar-primary: var(--color-ink);
   --sidebar-primary-foreground: var(--color-on-primary);
   --sidebar-accent: var(--color-canvas-soft-2);
   --sidebar-accent-foreground: var(--color-ink);
@@ -38,6 +38,42 @@
   --sidebar-ring: var(--color-link);
 }
 
+.dark {
+  --radius: var(--radius-md);
+  --background: var(--color-dark-canvas);
+  --foreground: var(--color-dark-ink);
+  --card: var(--color-dark-canvas-soft);
+  --card-foreground: var(--color-dark-ink);
+  --popover: var(--color-dark-canvas-soft);
+  --popover-foreground: var(--color-dark-ink);
+  --primary: var(--color-dark-primary);
+  --primary-foreground: var(--color-dark-on-primary);
+  --secondary: var(--color-dark-canvas-soft);
+  --secondary-foreground: var(--color-dark-ink);
+  --muted: var(--color-dark-canvas-soft);
+  --muted-foreground: var(--color-dark-muted);
+  --accent: var(--color-dark-canvas-soft-2);
+  --accent-foreground: var(--color-dark-ink);
+  --destructive: var(--color-dark-error);
+  --destructive-foreground: var(--color-dark-on-primary);
+  --border: var(--color-dark-line);
+  --input: var(--color-dark-line);
+  --ring: var(--color-dark-link);
+  --chart-1: var(--color-dark-link);
+  --chart-2: var(--color-dark-cyan);
+  --chart-3: var(--color-dark-warning);
+  --chart-4: var(--color-dark-link-deep);
+  --chart-5: var(--color-dark-error);
+  --sidebar: var(--color-dark-canvas-soft);
+  --sidebar-foreground: var(--color-dark-ink);
+  --sidebar-primary: var(--color-dark-primary);
+  --sidebar-primary-foreground: var(--color-dark-on-primary);
+  --sidebar-accent: var(--color-dark-canvas-soft-2);
+  --sidebar-accent-foreground: var(--color-dark-ink);
+  --sidebar-border: var(--color-dark-line);
+  --sidebar-ring: var(--color-dark-link);
+}
+
 :root {
   --nadicode-spacing-xxs: var(--spacing-nadicode-xxs);
   --nadicode-spacing-xs: var(--spacing-nadicode-xs);
@@ -136,7 +172,29 @@
   --color-state-review: #f5a623;
   --color-state-blocked: #b80022;
   --color-state-complete: #008c45;
-  --color-nadicode-muted: var(--color-muted);
+  --color-dark-canvas: #101414;
+  --color-dark-canvas-soft: #151b19;
+  --color-dark-canvas-soft-2: #1d2522;
+  --color-dark-ink: #f5f7f4;
+  --color-dark-body: #c8d0cb;
+  --color-dark-muted: #8d9892;
+  --color-dark-line: #2c3632;
+  --color-dark-seam: #24302b;
+  --color-dark-primary: #ecf4ee;
+  --color-dark-on-primary: #101414;
+  --color-dark-link: #7ee7c6;
+  --color-dark-link-deep: #b8ffe5;
+  --color-dark-link-bg-soft: #163f34;
+  --color-dark-error: #ff7a8b;
+  --color-dark-error-soft: #4b1821;
+  --color-dark-error-deep: #ffb3bd;
+  --color-dark-warning: #ffd28a;
+  --color-dark-warning-soft: #4a3219;
+  --color-dark-warning-deep: #ffe6b8;
+  --color-dark-cyan: #83f7dc;
+  --color-dark-cyan-soft: #b8ffe5;
+  --color-dark-cyan-deep: #49c6a8;
+  --color-nadicode-muted: #888888;
   --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif;
   --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif;
   --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif;

package/dist/tokens/nadicode.dtcg.json

@@ -399,6 +399,248 @@
           ],
           "hex": "#008c45"
         }
+      },
+      "dark-canvas": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.063,
+            0.078,
+            0.078
+          ],
+          "hex": "#101414"
+        }
+      },
+      "dark-canvas-soft": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.082,
+            0.106,
+            0.098
+          ],
+          "hex": "#151b19"
+        }
+      },
+      "dark-canvas-soft-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.114,
+            0.145,
+            0.133
+          ],
+          "hex": "#1d2522"
+        }
+      },
+      "dark-ink": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.961,
+            0.969,
+            0.957
+          ],
+          "hex": "#f5f7f4"
+        }
+      },
+      "dark-body": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.784,
+            0.816,
+            0.796
+          ],
+          "hex": "#c8d0cb"
+        }
+      },
+      "dark-muted": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.553,
+            0.596,
+            0.573
+          ],
+          "hex": "#8d9892"
+        }
+      },
+      "dark-line": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.173,
+            0.212,
+            0.196
+          ],
+          "hex": "#2c3632"
+        }
+      },
+      "dark-seam": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.141,
+            0.188,
+            0.169
+          ],
+          "hex": "#24302b"
+        }
+      },
+      "dark-primary": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.925,
+            0.957,
+            0.933
+          ],
+          "hex": "#ecf4ee"
+        }
+      },
+      "dark-on-primary": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.063,
+            0.078,
+            0.078
+          ],
+          "hex": "#101414"
+        }
+      },
+      "dark-link": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.494,
+            0.906,
+            0.776
+          ],
+          "hex": "#7ee7c6"
+        }
+      },
+      "dark-link-deep": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.722,
+            1,
+            0.898
+          ],
+          "hex": "#b8ffe5"
+        }
+      },
+      "dark-link-bg-soft": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.086,
+            0.247,
+            0.204
+          ],
+          "hex": "#163f34"
+        }
+      },
+      "dark-error": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.478,
+            0.545
+          ],
+          "hex": "#ff7a8b"
+        }
+      },
+      "dark-error-soft": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.294,
+            0.094,
+            0.129
+          ],
+          "hex": "#4b1821"
+        }
+      },
+      "dark-error-deep": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.702,
+            0.741
+          ],
+          "hex": "#ffb3bd"
+        }
+      },
+      "dark-warning": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.824,
+            0.541
+          ],
+          "hex": "#ffd28a"
+        }
+      },
+      "dark-warning-soft": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.29,
+            0.196,
+            0.098
+          ],
+          "hex": "#4a3219"
+        }
+      },
+      "dark-warning-deep": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.902,
+            0.722
+          ],
+          "hex": "#ffe6b8"
+        }
+      },
+      "dark-cyan": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.514,
+            0.969,
+            0.863
+          ],
+          "hex": "#83f7dc"
+        }
+      },
+      "dark-cyan-soft": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.722,
+            1,
+            0.898
+          ],
+          "hex": "#b8ffe5"
+        }
+      },
+      "dark-cyan-deep": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.286,
+            0.776,
+            0.659
+          ],
+          "hex": "#49c6a8"
+        }
       }
     },
     "spacing": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"