@nadicodeai/design-system
v0.12.0
Published
The `@nadicodeai/design-system` package. [`DESIGN.md`](./DESIGN.md) is the normative contract for reusable design tokens, mode behavior, CSS architecture, and generated output. The canonical human brand book lives in the monorepo at `brand/brand-book/inde
Readme
NadicodeAI Design System
The @nadicodeai/design-system package. DESIGN.md is the normative contract for reusable design tokens, mode behavior, CSS architecture, and generated output. The canonical human brand book lives in the monorepo at brand/brand-book/index.html.
This README is a package map and the setup guide for static or non-React consumers. React consumers use the UI package's single stylesheet interface and follow @nadicodeai/ui/docs/consuming-cross-repo.md. They do not compose design-system stylesheets themselves.
Static and non-React consumption
Import the complete CSS module once:
@import "@nadicodeai/design-system/css";That interface includes the generated tokens, mode aliases, semantic role maps, page geometry, type utilities, motion primitives, and framework-agnostic CSS components. Apply .dark to the document root or to a scoped static composition to select dark mode. The generation and cascade mechanics live only in DESIGN.md, "CSS Architecture & Token Pipeline".
Geist and Geist Mono (SIL Open Font License 1.1) are optional package assets. A static consumer that does not supply its own font loading can import the @font-face shim:
@import "@nadicodeai/design-system/assets/fonts/geist.css";Individual font files are also exposed under @nadicodeai/design-system/assets/fonts/* if the consumer needs to write its own @font-face declarations.
Package surface
package.json owns the current public export paths. DESIGN.md
owns what those exports mean and how the CSS cascade, modes, tokens, layout,
components, motion, and assets behave. The runnable examples/
consume only those public exports and are the inspection surface. This README
does not maintain a parallel inventory.
CSS partials and generated adapter files are implementation details. React components and compositions are discovered through the UI package rather than inferred from this CSS package.
Consumer overrides belong in an explicit later layer:
@layer page;
@layer page {
/* Page-specific overrides. */
}The exact layer order and ownership rules are defined in DESIGN.md.
Optional chat auto-play
Static chat markup needs no JavaScript. To opt a data-nc-autoplay thread into
progressive playback, include the public
@nadicodeai/design-system/css/chat-autoplay.js export. The chat-thread
entry in DESIGN.md owns the behavior and
accessibility contract.
Worked example (static HTML)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Geist + Geist Mono, then the bundle -->
<link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/assets/fonts/geist.css" />
<link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/css" />
<!-- In a bundler, prefer a CSS entry: @import "@nadicodeai/design-system/css"; -->
</head>
<body>
<main class="nc-page-system">
<div class="nc-page-frame">
<section class="nc-page-row">
<div class="nc-row-lane nc-row-lane-active">
<!-- A playing chat thread: opt in with data-nc-autoplay -->
<div class="nc-chat-thread" data-nc-autoplay>
<div class="nc-chat-thread-body">
<div class="nc-chat-bubble-user">Which contract template should I use?</div>
<div class="nc-chat-bubble-agent" data-accent="green">
Use the approved 2026 revision in Drive · Legal · Templates. It already has the updated privacy clauses.
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Optional: omit this script and the thread above stays a full static conversation. -->
<script src="https://unpkg.com/@nadicodeai/design-system/css/chat-autoplay.js"></script>
</body>
</html>examples/chat-showcase.html is the live proof page for the chat CSS components and auto-play enhancer.
Use the monorepo's brand/brand-book/ for NadicodeAI story, positioning, buyer, promise, method, use cases, technology story, trust doctrine, identity, voice, visual direction, sales behavior, language, and boundaries.