Build a screen
Build a whole Bridge page step by step: pick the app, pick the template, lay out the page, then fill each part.
Build a whole page
A Bridge page isn't one card or one table. It has a frame, a layout of parts, and things that sit on the page itself between the cards. This page builds one real page from start to finish, Bridge OS's organization page, in the order you'd build any page: app, template, layout, then each part.
1. Which app is it for?
2. Pick the template
Say what the page is for, then find that job in Picking a template. "Show one organization" is a Record page: Bridge's widest page (1600px), with the record's own card, tabs, and a side panel. Never invent a new page shape.
3. Lay out the page before filling it
Draw the parts first. Some are cards (glass): the About card, the tab's content, the side panel. Others sit on the page itself: the Back link and the tab row. The main column shares the width; the side panel is always 340px and moves under the main column on narrow screens. Try the widths.
The parts of a record page
← Back On the page
Goes back to where you came from
About card Card
The organization itself
Tabs On the page
People, Intros… on a divider line
The open tab's content Card
One card: a table or a list
Side panel, 340px Card
Meetings. Stays in view as you scroll.
4. The record's own card
A record page opens with the record itself, not a page title: logo, name (the page's heading), what it is, and how you're connected. The card is drawn straight away; only its inside waits for data, with a skeleton the same size. Try Slow and Fail in the sidebar.
About card
5. Tabs, then one card for the open tab
The tab row sits on a divider line on the page. Under it, one card holds the open tab's content, here a table of the people you know there. Each tab loads and shows its own empty state: open Intros. In Bridge OS the open tab is in the address (?tab=).
Tabs and the table under them
6. The side panel, and the whole page
The side panel holds what's useful next to everything else, here Meetings. It stays in view as you scroll. Put the parts together: each one loads on its own, so a slow table never holds up the About card. Try Slow and Fail again: every part keeps its place.
Meetings card
Meetings
The whole organization page
Other page shapes
The steps are the same for every page; the layout in step 3 comes from the template. Bridge OS uses these:
| Template | Shape | For example |
|---|---|---|
| Card dashboard | A page of glass cards that summarize an area: numbers, a chart, short lists. | Outcomes |
| Record page | 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. | Contact profile |
| Table page | A full list of one kind of thing: invites, intros. | Invites |
| Settings form | A narrow column of setting cards: a header, optional tabs, then cards of rows. | Settings |
| Feed | A stream of what happened, newest first, grouped by day, with filters above it and a side rail of related lists. | Activity |
| Public page | What signed-out visitors see: a hero that says what they'd get, one sign-in action, and a grid of cards. | Home (signed out) |
| Centered card | One focused task in a single card in the middle of the page: logging in, approving an app's access, a public member card.. | Log in |
| Admin table | Bridge's internal admin: a sidebar of sections, a header, and a table or a form. | Admin: apps |
Screen recipe: before a screen is done
Walk this list for every new or changed screen. It's the same list AI agents are given (see For agents).
- It sits in the app shell: the top bar and page background come from the shell; the page sets only its width (
LAYOUT_*). - Every control is a package component; nothing is hand-made. (One of each)
- No component is restyled:
classNameonly for layout. (The look comes from props) - Colors are tokens: no hex, no palette classes, no
dark:fixes. (Colors are tokens) - One blue button per group of actions. (One blue button per group)
- Every data region goes through DataState and loads on its own; make it slow and make it fail to check. (Each part loads on its own)
- Nothing jumps when data arrives: skeletons are measured. (Reserve the space)
- Counts come from the list they count; a failed count never shows 0. (Counts match what's shown)
- No glass inside glass. (Glass, once)
- Copy: sentence case, verbs on buttons, one date format, no words from the avoid list. (Sentence case)
- Text is 11px or larger (except the Badge); numbers in columns use
tabular-nums. (Nothing below 11px) - Tab through it: everything reachable, focus always visible, every control named. (Every control has a name)
- Check dark mode, 390px and 1440px.
Sources
- The page built here is Bridge OS's organization page (
/network/[domain], drawn byorg-network-content.tsx), rebuilt from @brdgapp/ui and the sample network. - Rules: The frame stays, Each part loads on its own, Reserve the space, One blue button per group.