Draft
Record page
One person or organization: identity card, sections, a 340px rail.
One person's or organization's page: an identity card at the top of the main column, sections or tabs below it, and a 340px rail on the right that stays in view. It's Bridge's widest page.
Use it for
- Show one person (a contact or member) or one organization.
- Your own profile.
Built on this
| Screen | Route | Fit |
|---|---|---|
| Contact profile | /contact/[refId] | Exact |
| Member profile (signed in) | /to/[username] | Exact |
| Your profile | /profile | Exact |
| Organization | /network/[domain] | Exact |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Leah Okonkwo
· 1stMutualPartner at Saltmarsh Partners
London Member for 2 years
Intros
Activity
Anatomy
- Back link. "← Back" when reached from a list.
- Identity card. A person: blue banner, 112px photo, 24px name, Make intro top right. An organization: 48px logo beside a 17px name. Both 24px inside.
- Main column. Cards 16px apart, or underline tabs on a divider line with one card for the open tab.
- Side panel. 340px, stays in view; scrolls as a whole when taller than the screen. Meetings, ICP.
Measurements
| What | Value | From |
|---|---|---|
| Width | LAYOUT_WIDE (1600px) | Bridge OS `widths.ts`; DESIGN.md → profile pages |
| Columns | lg:grid-cols-[minmax(0,1fr)_340px], 24px between | Bridge OS `authed-profile-view.tsx`, `org-network-content.tsx` |
| Page padding (from the shell) | 16px phone · 24px from 640px · 32px from 1024px; 32px top | Bridge OS `(shell)/layout.tsx` |
| Back link | "← Back" (goes back), 13px semibold muted, 24px below | Bridge OS Organization, Invites, Sharing; pick 2026-11-02 |
| Cards | Big cards: 16px corners, 24px inside, 16px apart. A card whose content runs edge to edge has a header strip instead (28px icon square, 14px title) | Picks 2026-11-02 (corners, space, headers) |
Responsive
| Width | What happens |
|---|---|
| Under 1024px | One column; the rail moves under the main column. |
| 1024px and up | Main column + 340px rail, the rail sticky. |
| 1600px and up | Stops widening; the main column takes all the extra width. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Identity card | Skeleton the card's size | — | "Couldn't load this profile" + Try again, in the card |
| Tabs / sections | Each section's own skeleton | Says what will appear | Per section |
| Rail | Card skeletons | Card stays, says what's coming | Per card |
Do and don't
| Do | Don't |
|---|---|
| Keep the rail to two or three short cards. | Put a table in the rail. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- Profile cards use a plain blue icon and 16px title; they get the color square and 15px title. Cards are 12px apart on profiles and 20px on your own; both become 16px.
- Organization's "View more" is hand-drawn; it becomes a Button.
- Pages inside the shell reach 1600px by breaking out of its 1280px cap (
mx-[calc(50%-50vw)]); a cleaner shell was deferred. - Profile pages use their own 12/16/20/28 type scale (recorded exception).
Sources
- Survey of Bridge OS routes (2026-11-02)
- DESIGN.md → Layout (width tiers, profile pages).