Public page
What signed-out visitors see: a hero and what they'd get.
What signed-out visitors see: a hero that says what they'd get, one sign-in action, and a grid of cards. It sells the product without hiding what it does.
Use it for
- The signed-out home, About, and signed-out versions of app pages.
Built on this
| Screen | Route | Fit |
|---|---|---|
| Home (signed out) | / | Exact |
| About | /about | Exact |
| Network (signed out) | /network (signed out) | Exact |
| App detail | /app/[id] | Closest — one 768px detail card; also opens as an overlay |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Bridge OS
Your network, working for you
See who can introduce you, make intros in seconds, and see what they led to.
Get startedMake intros
Apps for asking for, making and tracking intros.
Intros
An inbox that organises your intro emails. CC Bridge and it handles the rest.
Learn moreIntrolinks
Shareable links that let anyone in your network ask you for an intro.
Learn moreChrome Extension
Your Bridge network in the browser: quick intros and lookups.
Learn moreRaise
Help your portfolio fundraise without extra work.
Learn moreJobs Board
A talent network paired with your startups' open roles.
Learn morePerks
Discounts and offers for your portfolio companies and network.
Learn moreAnatomy
- Hero. An 11px blue capitals label, a 28px headline (36px from 640px), a 16px line, and one sign-in Button.
- Sections. A 22px heading and a 14px line, then a grid of app cards; sections split by a divider.
- App card. A tile: 44px app icon square, status Tag, 15px title, two lines, "Learn more →".
Measurements
| What | Value | From |
|---|---|---|
| Width | 1280px (max-w-7xl); About uses 1152px for reading | Bridge OS `dashboard.tsx`, `about-content.tsx` |
| Grid | sm:grid-cols-2 lg:grid-cols-3, 16px gaps | DESIGN.md → Card grids |
Responsive
| Width | What happens |
|---|---|
| Under 640px | One column. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Cards | — | — | — |
Do and don't
| Do | Don't |
|---|---|
| Show what signing in unlocks. | Show only a login gate. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- These pages copy the shell's top bar, footer and background by hand instead of sharing a layout.
- Their buttons are hand-made pills; they become Button. About and App detail have no h1.
- The home hero's gradient uses
--primary-bg-faint, which isn't defined, so it never draws.
Sources
- Survey of Bridge OS routes (2026-11-02)
- DESIGN.md → Auth-aware UI.