Metrics and explainers
Numbers, charts and saying what they mean.
Numbers in Bridge are big, honest and explained. Every stat has a plain-language ⓘ, every chart works without a mouse, and a number never claims more than the data supports.
The problem
A bare number raises questions: what does it count, and over what time? On Outcomes, people read these numbers about their own network. A chart that quietly leaves contacts out, or a tile that shows 0 while it's still loading, tells them something untrue.
What to do
- Explain every number. Every Outcomes card has an InfoHint saying what its numbers count and how: "Accepted = reached the connected stage."
- Never claim more than the data. If a chart can show only part of the data, it says so and gives the left-out count. The headline is the last complete week, not the one still in progress.
- Readable without a mouse. Charts have a text summary, and the arrow keys step through the points, each one read out.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| A few headline totals on Outcomes | A grid of StatBox inside the card; the card's InfoHint defines each term | Your impact as a connector: Intros made, Accepted |
| A share of a total | The percentage as StatBox's third line (sub) | Accepted 38, 83% |
| A money value | StatBox with the formatted amount in display | Value created |
| Change over time | Hand-made SVG bars, one per period, with a SegmentedControl for the range | Contact growth: 12w, 26w, 52w |
| A count about a few people on screen | Say what it's out of, in the copy | You've met 3 of these 5 |
| The numbers are loading or failed | DataState inside the card: StatBoxSkeleton, or the error with Try again | Couldn't load your connector impact |
See it work
Live examples built from the package on the sample network. Click through them.
Stat tiles with one explainer for the card
Hover, tap or Tab to the ⓘ to read what each number counts. The percentage sits under the number it belongs to.
Your impact as a connector
What flows through you when you introduce people.
A chart with a range switch
Pick 12, 26 or 52 weeks. Tab to the chart and use ← → Home End to step through the weeks; each is read out. The contacts without a date are counted, not hidden.
Contact growth
New contacts added each week.
1,243 contacts with a known added-date
41 contacts have no recorded date and aren't counted here.
Loading and failure keep the card
Switch the state. The card's title and ⓘ stay; only the body changes. It never shows 0 while loading.
Your impact as a connector
What flows through you when you introduce people.
What to write
| Part | Rule | Example |
|---|---|---|
| Stat label | A short noun, sentence case. | Intros made |
| Third line | A percentage or a few words, muted. | 83% · rated great |
| Explainer (ⓘ) | What it counts and how. Define each term with "=". | Accepted = reached the connected stage. |
| Chart headline | The last complete period, and what the number is. | +14 new last week |
| What's left out | The count and the reason, under the chart. | 41 contacts have no recorded date and aren't counted here. |
| Part of a list | Say what it's out of. | You've met 3 of these 5 |
| Range options | Short and parallel. | 12w · 26w · 52w |
Approved, not built yet
- StatBox (number, label, ⓘ, skeleton) joins the package, so every stat looks and loads the same.
Accessibility
- InfoHint opens on hover, keyboard focus or tap, and its trigger is named by its text, so screen readers hear the explanation without opening it.
- A chart is an image with a summary (
role="img"and a label with the range and total). It can be focused, and each week is announced through a polite live region as you step. - The range switch needs an
aria-label("Time range"); the arrow keys move between its options. - Stat numbers use
tabular-nums, so numbers in a row line up. - Bars grow in once, when the chart first shows or the range changes, and not at all with reduced motion.
| Keys | What happens |
|---|---|
| Tab | Reaches each ⓘ, the range switch and the chart. |
| ← / → | On the chart: the previous or next week. On the range switch: the previous or next range. |
| Home / End | On the chart: the first or last week. |
| Esc | Closes an explainer, or clears the chart's selected week. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| StatBox | One number with its label and optional third line; StatBoxSkeleton while loading. |
| InfoHint, HoverTip and Tip | The ⓘ next to a card or stat title that says what the numbers count. |
| SegmentedControl | The chart's time range (12w, 26w, 52w). |
| DataState | The card's body while loading or after a failure; the frame stays. |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- Whether a stat shows change against an earlier period (for example "+5 since last month"), and how.
- Whether each StatBox carries its own ⓘ (the package's new
info) or the card's InfoHint covers the group, as Bridge OS does today.
Where Bridge OS differs today
Follow this page, not the gap.
- Network → Overview's stat cards and the old public pages use 28px numbers (
connectors-tab.tsx,dashboard.tsx); they move to StatBox's 22px. - Bridge OS's chart axis labels are 10px (DESIGN.md → Charts); the handbook's smallest text is 11px, which the example uses.
Sources
- Decision 2026-11-02 (stat numbers 22px); Bridge OS
stat-box.tsx - Bridge OS
outcomes-page-content.tsx - Bridge OS DESIGN.md → Charts
- Bridge OS DESIGN.md → Charts (honesty)
- Decision 2026-11-03 (Writing)
- Bridge OS
outcomes-page-content.tsx→ "Your impact as a connector" hint - Bridge OS
outcomes-page-content.tsx→ impact stat grid - Bridge OS
outcomes-page-content.tsx→ContactGrowthCard - Bridge OS CLAUDE.md → Outcomes tab → Contact growth card; DESIGN.md → Charts (pick the encoding)
- Bridge OS CLAUDE.md → Outcomes tab → Calendar meeting signal
- Bridge OS DESIGN.md → Charts;
contact-growth-chart.tsx - Handbook StatBox guidance → Do / Don't
- 01-decisions.md → Answers from Aman (Phase 3) → Shared states wrapper; Bridge OS
outcomes-page-content.tsx→CardError - Proposals approved by Aman 2026-11-02.