Read only
BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Read only. Browse everything here. Connect GitHub to propose, review, merge or revert.

Overview

What waits for a decision, how healthy the system is, and what changed lately. Every number comes from the repository as it was built, plus open pull requests read live from GitHub.

To review

All reviews

Drafts in this browser: 0

Tokens 535 217 primitive, 96 brand, 101 semantic, 109 component Modes 8 2 brands x 2 themes x 2 densities Components 46 44 with usage guidance Contrast AA 100% All 220 checks pass Open reviews   Last change Oct 17, 2026, a9b7663

Token and contrast charts

Tokens by type

Explorer
Color: 359 (67%) Dimension: 101 (19%) Number: 27 (5%) Duration: 16 (3%) Shadow: 14 (3%) Easing: 8 (1%) Font family: 5 (1%) Font weight: 5 (1%)
  • Color 359 67%
  • Dimension 101 19%
  • Number 27 5%
  • Duration 16 3%
  • Shadow 14 3%
  • Easing 8 1%
  • Font family 5 1%
  • Font weight 5 1%

Categories and layers

Foundations
Tokens per category, primitive and semantic
CategoryPrimitiveSemanticTotal
Color 109 primitive 70 semantic 179 109/70
Typography 25 primitive 25 25/0
Spacing 16 primitive 16 16/0
Radius and borders 12 primitive 12 12/0
Elevation 6 primitive 3 semantic 9 6/3
Focus 3 semantic 3 0/3
Motion 14 primitive 10 semantic 24 14/10
Sizes and layers 35 primitive 12 semantic 47 35/12

Contrast checks

Checks
100% of 220 checks pass WCAG AA
Bridge light
55/55
Bridge dark
55/55
Ocean light
55/55
Ocean dark
55/55
passes AA fails AA 100 also reach AAA

Health

4 items

No deprecated tokens. Checked on every build from the token files, component CSS and contrast pairs.

Activity

Versions
  1. New Oct 17, 2026

    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.

    .changeset/audit-honest-instances.md

  2. New Oct 17, 2026

    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.

    .changeset/branch-previews-publishable.md

  3. New Oct 17, 2026

    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`).

    .changeset/bridge-audit.md

  4. New Oct 17, 2026

    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.

    .changeset/bridge-core-shared-config.md

  5. New Oct 17, 2026

    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`.

    .changeset/bridge-history.md

  6. New Oct 17, 2026

    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`.

    .changeset/bridge-mcp-v0.md

How a change travels

The same path for every change, whoever writes it: a designer in Figma, an engineer, or an AI agent.

Read the governance
  1. 1 Propose in Figma DS Bridge turns a variable or component change into a pull request.
  2. 2 Pull request A diff on a branch, with a risk tier and a changelog entry.
  3. 3 CI guardrails Tokens build, types check, no raw colors, Storybook builds.
  4. 4 Design and tech review Both themes, contrast and focus checked. Token changes need both owners.
  5. 5 Merge A person who owns the area merges. Agents never do.
  6. 6 Docs update This app, llms.txt and Figma variables rebuild from the same files.

Connect GitHub

Reading pull requests works without a token. To approve, comment, merge or propose token changes, paste a fine-grained personal access token limited to peterbono/ai-design-system-demo.

  1. Create a token on GitHub, repository access: only ai-design-system-demo.
  2. Permissions: Pull requests read and write, Contents read and write, Commit statuses and Checks read.
  3. Paste it below. It stays in this browser (localStorage) and is only sent to api.github.com.