Drafts 0
BridgeComfortable

Previews use

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

Brand

Density

Checks

Contrast blocks the token build; validation findings do not block, but reviewers read them.

Contrast gate

100%

Passing 220 of 220 checks, 55 pairs in 4 brand and theme combinations

Token validation

4

4 findings Unknown references, deprecated and unused tokens, missing guidance

Contrast gate

Pairs listed in packages/tokens/src/contrast.checks.json, resolved for every brand and theme. Text needs 4.5:1, UI edges and focus rings 3:1.

  • Bridge light 55/55 Pass
  • Bridge dark 55/55 Pass
  • Ocean light 55/55 Pass
  • Ocean dark 55/55 Pass

Every pair passes AA in every brand and theme.

Token validation

Read from the token files, the component CSS and the docs at build time.

Run the same checks locally

CI runs these on every pull request. Run them before you push to see the same result.

Terminal
npm run bridge -- check    # config, token validation, contrast gate
npm run tokens:build       # DTCG to CSS and TS, fails on contrast

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.