Your design system, one source of truth.
This Library shows the latest release, v0.1.0, rebuilt from the repository on every merge. What you read here is what ships. To change something, open it in the Studio: every change goes through a draft, a review and a merge.
Free and open source, by Florian Gouloubi. 535 tokens, 46 components, 2 brands, 2 themes and 2 densities.
What's new
All release notes- New
bridge audit counts every visible UI instance: router links outside a DS component's `render` prop (react-router, ra-core `LinkBase`, next/link), anchors with `href`, images and chart libraries (recharts, Nivo, Chart.js..., foreign with no DS equivalent). Providers and other non-visual parts no longer count as DS instances.
- New
Packages are publishable under the `@bridge-ds` npm scope (renamed from `@demo-ds` and `@bridge`). Each ships built ES modules, type declarations and, for React, one `styles.css`; the monorepo keeps resolving TypeScript sources through the `source` export condition. `@bridge-ds/core` adds branch preview helpers (`previewUrl`, `snapshotUrl`, `previewComment`) and a `previews` section in `bridge.config.json`. `@bridge-ds/react` adds an opt-in staging token override: `ThemeProvider` `tokenOverride` loads an allowlisted `tokens.css` from `?bridge-tokens=`, off by default and refused in production builds unless enabled.
- New
Measure design system adoption in product code. `@bridge-ds/core/audit` finds hardcoded colors, lengths, radii, shadows, durations, z-index and fonts in CSS, SCSS, style/sx/styled/theme objects, CSS-in-JS and Tailwind classes, suggests the closest token (deltaE in OKLab across every mode, nearest scale step), and counts DS components against foreign UI libraries, native elements and re-created components. `bridge audit <path>` reports token and component adoption as JSON (versioned schema) and Markdown, compares with a baseline, fails CI under a threshold, and `--fix --write` replaces exact CSS matches with `var(--token)`. The MCP server adds `bridge_audit` and the `migrate-file-to-ds` prompt. New `@bridge-ds/stylelint-plugin` (`bridge/use-tokens`) and `@bridge-ds/eslint-plugin` (`no-hardcoded-style-values`, `prefer-ds-components`).
- New
One `bridge.config.json` and one schema (`packages/core/bridge.config.schema.json`) for the Figma plugin, the docs site, the CLI and the MCP server: tiers, ordered layers with mode placeholders, modes with parity, contrast, components, docs, changesets and governance (protected branches, branch prefix, labels, guardrails, design and tech owners). The MCP server now runs on `@bridge-ds/core` (layered token sets, minimal-diff edits, contrast, diff, PR body, GitHub client, local git writer) and every surface shares one risk classifier: a token added, changed, renamed or removed is Tier 3 (renames and removals major), a description-only edit is Tier 1 patch.
- New
History and rollback. `bridge_get_history` and `bridge_get_token_history` read what changed in the tokens (versions, merged PRs and commits, who, when, why, tier, breaking), and `bridge_plan_revert` and `bridge_propose_revert` undo a change against the current base branch, with conflicts shown when a token changed again later, or restore one token to an older value. The CLI adds `bridge history [token]` and `bridge revert <pr|commit> [--dry-run]`. Built on the new history model and revert planner in `@bridge-ds/core`.
- New
Bridge MCP server and CLI. `@bridge-ds/mcp` connects Claude Code, Claude Desktop or any MCP client to a DTCG design system repo (local folder or GitHub): 15 tools to read tokens per mode, search, validate, check contrast, read components and docs, propose token changes as branches or draft PRs (never on main), review PRs and scaffold components, plus resources and prompts. `@bridge-ds/cli` adds `bridge init`, `check`, `tokens`, `diff`, `propose` and `mcp`.
In the Library
Foundations
Tokens
Where to start
-
Designers
Color roles, type and spacing, with every value shown in both themes. Pull the same tokens into Figma with the plugin.
Start with color -
Engineers
Install the packages, then build with components that read CSS variables only. Props come straight from the TypeScript.
Install -
AI agents
The same docs as plain text in llms.txt, and an MCP server so your Claude builds with real tokens and proposes changes by pull request.
Connect an agent
Want to change a token or a component? Every page here has an Edit in Studio action that opens it in a draft. Designers can also propose from Figma with the DS Bridge plugin.