Draft
Card dashboard
Glass cards that summarize an area: numbers, a chart, short lists.
A page of glass cards that summarize an area: numbers, a chart, short lists. The header has a title, a one-line subtitle and at most one action. Each card loads on its own.
Use it for
- Summarize an area at a glance (Outcomes).
- The landing view of a section with tabs (Network).
Built on this
| Screen | Route | Fit |
|---|---|---|
| Outcomes | /outcomes | Exact |
| Network (Invites tab) | /network | Exact |
| Network (Overview tab) | /network/overview | Exact |
| Apps (signed in) | /apps | Exact |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Outcomes
Insights from your network: how you know people, who opens doors for you, and how your reach grows.
Intros
Outcome value
Contact growth
New contacts added each week.
Your impact as a connector
What flows through you when you introduce people.
Anatomy
- Header. Title, subtitle, optional primary action.
- Tabs. Optional, under the header, for sibling views of the section.
- Card stack. Tiles 16px apart: pairs of cards (
sm:grid-cols-2), full-width cards for charts and lists. - Card. Header: a color square (each card its own color), title with ⓘ, optional subtitle, "View all →" or a range control on the right. Then numbers, a chart or a short list inside DataState.
- Numbers. Two that compare (made / received): label with an arrow above a 24px number, a line between. Three or more: StatBox tiles.
Measurements
| What | Value | From |
|---|---|---|
| Width | LAYOUT_STANDARD (1280px) | Bridge OS `widths.ts` |
| Page padding (from the shell) | 16px phone · 24px from 640px · 32px from 1024px; 32px top | Bridge OS `(shell)/layout.tsx` |
| Page title | 22px Bold, 4px to a 14px --text-body subtitle, 24px below the header | Bridge OS (6 pages); pick 2026-11-02 |
| Cards | Tiles: 12px corners, 20px inside, 16px apart. Header: 36px color square, 15px title, optional 13px subtitle | Picks 2026-11-02 (corners, space, headers) |
| Card colors | Tokens: --primary, --success, --warning, --purple, square at 8% | Bridge OS Outcomes; pick 2026-11-02 |
Responsive
| Width | What happens |
|---|---|
| Under 640px | One column; card pairs stack. |
| 640px and up | Card pairs side by side. |
| 1280px and up | Content stops widening at 1280px and centers. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Header | Shows at once | — | — |
| Each card | Same-size skeletons (StatBoxSkeleton, chart bars) | Says what will appear | Couldn't load {thing} + Try again; the card stays |
Do and don't
| Do | Don't |
|---|---|
| Let every card load on its own. | Hold the whole dashboard behind one spinner. |
| Explain each number with an ⓘ. | Show a number nobody can interpret. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- There's no shared page header in Bridge OS: each page writes its title, subtitle and Back link inline (see App kit).
- Network's title is 24px and its reach numbers 28px; Overview's two 16px cards should be 12px tiles.
- Card colors are hex in Bridge OS (two purples: #7450DA and #552BCB); they move to tokens.
- Network and Overview use
max-w-7xldirectly instead ofLAYOUT_STANDARD.
Sources
- Survey of Bridge OS routes (2026-11-02)
- Bridge OS
outcomes-page-content.tsx,balance-card.tsx,connectors-tab.tsx.