Install

Two ways to use the system: the packages in a product codebase, and the DS Bridge plugin in Figma. Both read the same token files, so code and Figma never drift. For AI agents, see Agents.

Updated Oct 16, 2026

Not published on npm yet. The packages are built and checked, and the release workflow publishes them under the @bridge-ds scope once an npm token is set. Until then, install them from a clone of the repository, as shown below.

Packages

@bridge-ds/tokens 0.1.0
Every token as CSS variables (tokens.css) and TypeScript, plus the self-hosted fonts (fonts.css).
@bridge-ds/react 0.1.0
The React components. Behavior from Base UI, styling only through tokens.
@bridge-ds/core 0.1.0
For tools, not for product UI: config, token loading, alias resolution, contrast, diffs and the GitHub client.

Install from a clone

Build the packages and pack them as tarballs in .packs/:

Terminal

git clone https://github.com/peterbono/ai-design-system-demo
cd ai-design-system-demo
npm install
npm run pack:packages

In your product, install the tarballs. @bridge-ds/react needs React 18 or later.
Terminal
```
npm install /abs/path/ai-design-system-demo/.packs/bridge-ds-tokens-0.1.0.tgz \
  /abs/path/ai-design-system-demo/.packs/bridge-ds-react-0.1.0.tgz
```
Add .packs/bridge-ds-core-0.1.0.tgz only if you build tools on top of Bridge.

Use the components

Import the fonts, the tokens and the base styles once, then wrap the app in ThemeProvider:

App.tsx

import '@bridge-ds/tokens/fonts.css';   // IBM Plex Sans + Mono, self-hosted
import '@bridge-ds/tokens/tokens.css';  // every token as a CSS variable
import '@bridge-ds/react/styles.css';   // base styles

import { Button, Field, Input, ThemeProvider } from '@bridge-ds/react';

export function App() {
  return (
    <ThemeProvider asRoot theme="light" brand="bridge" density="comfortable">
      <Field label="Repository" description="Owner and name, like acme/design-tokens.">
        <Input placeholder="acme/design-tokens" />
      </Field>
      <Button>Connect repository</Button>
    </ThemeProvider>
  );
}

Theme, brand and density

ThemeProvider sets data-theme, data-brand and data-density together and passes them to portaled overlays. Without React, or for plain CSS, set the three attributes yourself and read the tokens as CSS variables:

<html data-theme="light" data-brand="bridge" data-density="comfortable">

Themes: light, dark. Brands: bridge, ocean. Densities: comfortable, compact. See every combination in the theme playground.

Figma plugin

DS Bridge connects Figma Variables to the repository. Pull brings the latest tokens from main into Figma Variables. Push sends your Figma edits back as a pull request for review, with a three-way diff and the contrast gate. It works on the free Figma plan and never writes to main.

From the repository root, build the plugin:
```
npm install
npm run plugin:build
```
In the Figma desktop app: Plugins, Development, Import plugin from manifest, and pick apps/figma-plugin/manifest.json.
Run it from Plugins, Development, DS Bridge, and paste a fine-grained GitHub token in its Settings tab.

Not in Figma Community yet: publishing needs a plugin id issued by Figma. Full guide in apps/figma-plugin, source on GitHub, details in the plugin README.