Draft
Centered card
One focused task in one card: sign in, approve access.
One focused task in a single card in the middle of the page: logging in, approving an app's access, a public member card.
Use it for
- Sign in.
- Approve access (connect an AI app).
- A public, signed-out view of one member.
Built on this
| Screen | Route | Fit |
|---|---|---|
| Log in | /login | Exact |
| Connect an app | /connect | Exact |
| Member card (public) | /to/[username] (signed out) | Exact |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Connect Claude to your Bridge network?
Claude will be able to:
- Search the people and organizations you know
- Read your intros and their status
- Find who can introduce you
You can disconnect it at any time in Settings → AI apps.
Anatomy
- Logo. Centered above the card.
- Card. One big glass card on Bridge's background: a 22px title, what happens, the full-width primary action (Cancel under it).
Measurements
| What | Value | From |
|---|---|---|
| Width | 448px (max-w-md); 576px for the public member card | Bridge OS `(auth)/layout.tsx`, `public-profile-view.tsx` |
Responsive
| Width | What happens |
|---|---|
| Any width | The card fills the width with 16px sides on phones. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Card | Skeleton the card's size | — | In the card, with what to do |
Do and don't
| Do | Don't |
|---|---|
| One task per card. | Add navigation or extra links. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- Log in has no card and a 28px title; Connect puts the logo on the left and the buttons on the right. Both move to this shape.
Sources
- Survey of Bridge OS routes (2026-11-02)
- Bridge OS
connect-consent.tsx,(auth)/login/page.tsx; pick 2026-11-02.