# Bridge design system

> Bridge's design system: the @brdgapp/ui component package (React, Tailwind, Base UI) and its handbook at https://apps-bridge-design-system-handbook.vercel.app. Every Bridge app installs the package and builds screens from its components, tokens, rules, patterns and templates. When code and the handbook disagree, the handbook (and DESIGN.md) wins.

## How to build with it

- Install `@brdgapp/ui`; import `@brdgapp/ui/globals.css` once, after `@import "tailwindcss"`.
- Import components file by file: `import { Button } from "@brdgapp/ui/components/button"`. There is no single index file.
- Use the package's `cn` from `@brdgapp/ui/lib/utils`; never a local copy or plain `clsx`.
- Colors only as role tokens: `bg-[var(--surface-secondary)]`, `text-[var(--text-muted)]`. No hex, no palette classes, no `dark:` fixes.
- Fills with white text use `--primary-solid` / `--danger-solid`.
- A component's look comes from its props (`variant`, `size`); `className` is for layout only.
- Links keep their meaning through `render`: `<Button render={<Link href="/x" />}>Go</Button>`.
- Every data region goes through `DataState` inside its card, with a skeleton the same size as the content.
- Cards are glass (`liquid-glass`). Big cards (record, table, settings, centred-card pages; side panels): 16px corners, 24px inside. Tiles (dashboards, feed, public, admin): 12px, 20px inside. 16px apart. Never glass inside glass.
- Page title 22px bold + 14px subtitle. Card header: 36px color square + 15px title; a header strip (28px square, 14px title) when the content runs edge to edge.
- Text: Mulish on the ladder 11 · 12 · 13 · 14 · 16 · 18 · 22 · 28 (36/48 display). 14px body, 13px for dense rows and tables, 12px meta, nothing below 11px (except the Badge), sentence case. Write the named sizes (`text-13`), not `text-[13px]`: they set the line height too. Text fields are `text-16 md:text-14`.
- Spacing: 4px steps; named distances 8 (inside a thing), 12 (related items), 16 (heading to content, between cards), 24 (dialogs), 32 (sections); page edges `px-4 sm:px-6 lg:px-8`. `gap` on the parent, no negative margins, no arbitrary values.
- Layout: an app with up to 4 top-level places has a 56px top bar; more than 4, or an admin tool, adds a 240px sidebar under it. Phones: up to 4 places as bottom tabs; a sidebar app opens its places from a menu button. A screen is a page (scrolls with the window) or a tool (fills the screen, panes scroll). Widths from `@brdgapp/ui/lib/layout` (`pageFrame("standard")`). Header: title and one line, actions right (one primary), tabs on records, a toolbar (search left, filters right) over lists. No `w-screen` breakouts or negative margins.
- Responsive: phone first; `sm:` 640, `md:` 768, `lg:` 1024, nothing wider. On phones: 44px targets (28px minimum everywhere), bottom sheets for pickers and filters (FilterPill and ColumnFilterMenu switch by themselves), no hover-only actions. `useIsMobile()` only when the structure changes.
- Shape: five corners. Round for buttons, search, pills, avatars; 4px tags and badges; 8px fields and icon squares; 12px tiles and menus; 16px big cards and dialogs. Inner corners smaller than outer. Nothing in between.
- Elevation: cards are glass (Card); never glass in glass, never a plain white card. Floating components bring their shadow and layer (80 menus/tips/sheets, 90 dialogs, 100 toasts); screens never write a raw shadow or z-index above z-10.
- Icons: Lucide only, at its own 2px line (no `strokeWidth`). One icon per meaning: call `find_icon` with the job and use what it returns (Plus add, X close, EllipsisVertical more, Pencil edit, Trash delete, ExternalLink another site, ArrowLeft back, LoaderCircle via `loading`, RefreshCw sync, CircleAlert error, TriangleAlert warning, Sparkles AI). A meaning Bridge doesn't have yet gets an untaken Lucide icon, added to the Iconography table in the same change. Beside words 2px bigger than the text (14 by 12–13px text, 16 by 14px, 18 by 16px); in a square or circle half its width; nothing over 24. Hidden beside words (`aria-hidden`), named when alone (IconButton `aria-label`). Company logos with BrandMark. No emoji in the interface.
- Motion: three speeds, 150 (hover, color, press), 200 (menus, sections, toasts), 300 (drawers, sheets, dialogs, entrances), on `ease-out` (the package sets it to Bridge's curve). Animate once; honour reduced motion (`useReducedMotion()` for Framer).

## Always

- Call `orient` first, then `plan_screen` for a new screen, then `get_page` for every template, pattern and component you will use.
- Import only from `@brdgapp/ui`. If search doesn't return a component for the job, don't invent one: use the closest, or say what's missing.
- Start every screen from a template (Picking a template); never invent a new page frame.
- Give every data region its loading, empty and error state through DataState.
- Write real copy in sentence case: real-sounding people, intros and organizations (the sample network: Ana Ruiz, Leah Okonkwo, Priya Natarajan…). Never Lorem, "Click here", "Submit" or Title Case.
- Run `check_code` on what you wrote, fix what it reports, then walk the screen recipe.

## Rules

- **One of each** (`one-of-each`): Bridge has one button, one label, one menu, one tooltip, one confirm dialog and one table. Before building a control, look for it here. Never hand-make a second version (a `<button>` with pill classes, a `<span>` chip, a new kebab), even if it looks the same today: copies drift.
- **The look comes from props** (`look-comes-from-props`): A component's appearance comes only from its own options (`variant`, `size`, `color`). `className` on a package component is for layout (`mt-4`, `shrink-0`, `w-full`), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.
- **Fix the system first** (`fix-the-system-first`): If the system can't express something a screen genuinely needs, extend the component (a new size, a new option) and document it in the same change, then use it. Never work around a gap at the call site. A 1–2px change from the old design is the expected cost of joining the system, not a reason to stay hand-made.
- **One icon set, one icon per meaning** (`one-icon-set`): Every icon is Lucide at its own 2px line. Each meaning has one icon, listed on Iconography; a meaning that isn't listed gets a Lucide icon nobody else uses, added to the list in the same change. No other icon set, no emoji in the interface, and no hand-drawn company logos: BrandMark draws them.
- **Share at two** (`share-at-two`): A component moves into the package once two places in one app need it, or as soon as a second app does. A near-copy becomes an option on the existing component, not a second component.
- **Colors are tokens** (`tokens-only`): Components use role tokens only: `bg-[var(--surface-secondary)]`, `text-[var(--text-muted)]`. Never hex, `rgb()` or Tailwind palette classes such as `bg-blue-500`, and never a `dark:` patch to fix a color: if dark mode looks wrong, fix the token.
- **Fill with -solid** (`fill-with-solid`): Anything with white text on a colored fill uses `--primary-solid` or `--danger-solid`. The brand `--primary` and `--error` are for text, icons and focus rings; as fills they fail contrast (white on `--error` is 4.41:1).
- **One blue button per group** (`one-blue-button`): In each group of actions, only the single most important one is a primary (filled blue) button. The others are secondary, ghost or link. When everything is blue, nothing stands out.
- **Never by color alone** (`not-by-colour-alone`): Status and meaning are never carried by color alone. A colored tag has a word; a status color comes with an icon or text; a chart says in words what it shows.
- **Glass, once** (`glass-surfaces`): Cards, panels, empty states and the navigation are frosted glass over the page background, never flat white boxes. A glass card never sits inside another glass card: inside a card, group things with dividers or a light bordered box.
- **Labels are boxes, controls are pills** (`labels-are-boxes`): Tags and badges have 4px corners and never become pills. Pills (`rounded-full`) are for things you press: buttons, filter chips, search fields, segmented controls.
- **The frame stays** (`frame-stays`): A card never disappears because its data is missing. Loading, empty and failed are three bodies inside the same frame (icon, title and hint stay put), and a failure offers Try again. Returning `null` on error deletes the feature from the page: the person can't tell broken from empty.
- **Each part loads on its own** (`each-part-loads-alone`): The page frame shows straight away; each card, table or list shows its own skeleton, then its data. Never hold the whole page behind one `if (isLoading) return <Skeleton />`: a slow part would block the fast ones.
- **Reserve the space** (`reserve-the-space`): Nothing that arrives later may push content down. A skeleton has the same height and shape as what it stands for, measured, not guessed. A visible jump after the first paint is a bug.
- **Counts match what's shown** (`counts-match`): A number on screen comes from the same filtered list that renders the items, never from a separate count that can disagree. Never show a silent 0 when a count failed to load.
- **Sentence case** (`sentence-case`): Buttons, titles, headings, tabs, labels and statuses use sentence case: only the first word and names get a capital. "Make intro", "Intro forwarded", "Stop sharing".
- **Nothing below 11px** (`text-floor`): No text is smaller than 11px, except the 8px uppercase Badge sticker. Use the scale: 24, 22, 16, 15, 14, 13 (body), 12, 11.
- **Numbers line up** (`numbers-line-up`): Numbers that change or get compared (stats, counts, dates in a column, page numbers) use `tabular-nums`, so digits keep their width and columns line up.
- **One way to write dates** (`one-way-to-write-dates`): "Today", "Yesterday", "4 days ago" under 7 days; then "Jul 20", and "Jul 20, 2025" in another year. Times are 12-hour (9:40 AM), in the viewer's own time zone. Use `formatDate` and `formatTime` from `@brdgapp/ui/lib/format`.
- **Say what happens** (`say-what-happens`): Buttons start with a verb and name the object: "Stop sharing", not "OK" or "Submit". A confirm dialog asks a question about the specific thing and its button repeats the verb. Errors say what happened and what to do next.
- **Every control has a name** (`every-control-named`): Every control says what it does to a screen reader. An icon-only button carries an `aria-label` naming the action ("Close", not "X"); a group of filters or a table has a name; a tooltip is never the only name.
- **Focus always shows** (`focus-always-shows`): Every control shows a visible ring when reached by keyboard (`focus-visible`). Never remove an outline without drawing a ring in its place.
- **Quiet motion** (`quiet-motion`): Motion marks arrivals and presses, not decoration. Respect reduced motion: CSS animations are cut by the stylesheet, and JavaScript animations check `useReducedMotion()`. Loading spinners keep turning.

**Never:**
- A hand-made button, chip or menu. Use Button, Tag or ActionMenu. (breaks `one-of-each`)
- Hex, rgb() or palette classes in a component. Use a role token. (breaks `tokens-only`)
- A `dark:` class to fix a color. Fix the token instead. (breaks `tokens-only`)
- Restyling a package component with className. Pick the variant and size. (breaks `look-comes-from-props`)
- Filling a button with `--primary` or `--error`. Use the -solid tokens. (breaks `fill-with-solid`)
- `error ? null`. Keep the frame; show the error body. (breaks `frame-stays`)
- `if (isLoading) return <Skeleton />` for a whole page. Let each part load on its own. (breaks `each-part-loads-alone`)
- Content that pops in and pushes the page down. Reserve its space with a same-height skeleton. (breaks `reserve-the-space`)
- Glass inside glass. Use dividers or a light bordered box inside a card. (breaks `glass-surfaces`)
- The browser's `title` attribute as an explanation. Use InfoHint or Tip. (breaks `one-of-each`)
- `window.confirm`. Use ConfirmDialog. (breaks `one-of-each`)
- Buttons labeled OK, Yes, Submit or Click here. Name the action. (breaks `say-what-happens`)
- "Are you sure?" as a dialog title. Ask about the specific thing. (breaks `say-what-happens`)
- "Oops", emoji or error codes in user-facing errors. Say what happened and what to do. (breaks `say-what-happens`)
- Text below 11px (other than the Badge). Use the type scale. (breaks `text-floor`)
- Title Case in the interface. Use sentence case. (breaks `sentence-case`)

## Pages

### Get started
- [Overview](https://apps-bridge-design-system-handbook.vercel.app/): What the Bridge design system is, where to start, the rules that catch most mistakes, and where the system stands.
- [Principles](https://apps-bridge-design-system-handbook.vercel.app/principles): The north star, the design principles, the named rules every screen is judged against, and what Bridge never does.
- [Using the system](https://apps-bridge-design-system-handbook.vercel.app/using-the-system): How to pick up the package in an app: imports, tokens, data states, feedback, theming, accessibility and where new code goes.
- [Build a screen](https://apps-bridge-design-system-handbook.vercel.app/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.
- [Repository](https://apps-bridge-design-system-handbook.vercel.app/repository): Where the code lives, how it follows shadcn's monorepo setup, how a component file is built and the commands you run.
- [Component lifecycle](https://apps-bridge-design-system-handbook.vercel.app/lifecycle): Statuses, how a component becomes shared, the checklist a reviewer walks, and which components the apps use.
- [Migrating a hand-made control](https://apps-bridge-design-system-handbook.vercel.app/migrating): Seven steps to move a hand-made button, tag or table onto the package.
- [For agents](https://apps-bridge-design-system-handbook.vercel.app/for-agents): How AI agents connect to the handbook, the habits they follow and a prompt to paste.

### Brand
- [Brand identity](https://apps-bridge-design-system-handbook.vercel.app/brand/identity): The logo and how to use it, how names are written, the app icons, and the sample network every example uses.
- [Voice and tone](https://apps-bridge-design-system-handbook.vercel.app/brand/voice-and-tone): How Bridge sounds, and how the tone shifts for success, errors and empty states.
- [Writing](https://apps-bridge-design-system-handbook.vercel.app/brand/writing): Copy rules for labels, buttons, errors and empty states, with words to avoid.

### Foundations
- [Design tokens](https://apps-bridge-design-system-handbook.vercel.app/foundations/tokens): How Bridge's tokens work, how they're named and read, every token in light and dark, and how to add one.
- [Color](https://apps-bridge-design-system-handbook.vercel.app/foundations/color): Bridge's colors from Arch: every token by job in light and dark, where each may appear, the contrast it meets, and the full Arch palette.
- [Typography](https://apps-bridge-design-system-handbook.vercel.app/foundations/typography): Mulish on one ladder of sizes, each with one job: how to pick a size, how type behaves on phones, and how it maps to Arch.
- [Spacing](https://apps-bridge-design-system-handbook.vercel.app/foundations/spacing): 4px steps and eight named distances, picked by how related two things are; control heights, rows and page edges.
- [Layout](https://apps-bridge-design-system-handbook.vercel.app/foundations/layout): A top bar for up to 4 places, a sidebar for more and for admin; two page shapes, five widths, the page header and every measurement of the frame.
- [Responsive](https://apps-bridge-design-system-handbook.vercel.app/foundations/responsive): Phone first: what changes at 640, 768 and 1024px, 44px touch targets, and pickers that open from the bottom on phones.
- [Shape](https://apps-bridge-design-system-handbook.vercel.app/foundations/shape): Five corners, each with a job: round to press, 4px labels, and boxes that get rounder as they get bigger.
- [Elevation](https://apps-bridge-design-system-handbook.vercel.app/foundations/elevation): Glass on the page, a lift under the pointer, and five shadows and seven layers for what floats above.
- [Motion](https://apps-bridge-design-system-handbook.vercel.app/foundations/motion): Quiet motion: three speeds on one curve, what moves and how, and reduced motion.
- [Iconography](https://apps-bridge-design-system-handbook.vercel.app/foundations/iconography): Lucide icons: one per meaning, how big, what color, and when an icon is named or hidden.
- [Illustration](https://apps-bridge-design-system-handbook.vercel.app/foundations/illustration): When illustration is used and how it looks.
- [Theming](https://apps-bridge-design-system-handbook.vercel.app/foundations/theming): Light and dark, and how tokens switch between them.
- [Accessibility](https://apps-bridge-design-system-handbook.vercel.app/foundations/accessibility): What the system handles for you, and what stays with you.
- [Interaction states](https://apps-bridge-design-system-handbook.vercel.app/foundations/interaction-states): Hover, focus, pressed, disabled, loading and selected.
- [Styles and utilities](https://apps-bridge-design-system-handbook.vercel.app/foundations/styles): The shared stylesheet, the cn helper and custom utilities.

### Components
- [All components](https://apps-bridge-design-system-handbook.vercel.app/components): Every component with its level, category and status.
- [Button](https://apps-bridge-design-system-handbook.vercel.app/components/button) (atom, experimental): Starts an action. Six variants, four sizes; one primary per group.
- [IconButton](https://apps-bridge-design-system-handbook.vercel.app/components/icon-button) (atom, experimental): An action shown only as an icon (close, more, copy). Always round; always named.
- [Tag](https://apps-bridge-design-system-handbook.vercel.app/components/tag) (atom, experimental): The soft color label for status, category and counts. Not a button; not a pill.
- [Badge](https://apps-bridge-design-system-handbook.vercel.app/components/badge) (atom, experimental): The tiny uppercase sticker, such as ALUM. For everything else, use Tag.
- [DataState](https://apps-bridge-design-system-handbook.vercel.app/components/data-state) (utility, experimental): Loading, empty and error for every data region. The frame stays; only the body changes.
- [ButtonGroup](https://apps-bridge-design-system-handbook.vercel.app/components/button-group) (molecule, experimental): Two or more related actions joined in one pill, such as Copy intro link · Make intro.
- [Tabs](https://apps-bridge-design-system-handbook.vercel.app/components/tabs) (molecule, experimental): Underline tabs that switch between views of one page.
- [SegmentedControl](https://apps-bridge-design-system-handbook.vercel.app/components/segmented-control) (molecule, experimental): A pill switcher for two to five modes of one view, such as a date range.
- [FilterChip](https://apps-bridge-design-system-handbook.vercel.app/components/filter-chip) (atom, experimental): A filter pill people switch on and off, with an optional count.
- [Switch](https://apps-bridge-design-system-handbook.vercel.app/components/switch) (atom, experimental): An on/off setting that takes effect immediately.
- [Input](https://apps-bridge-design-system-handbook.vercel.app/components/input) (atom, experimental): A one-line text field: names, emails, links.
- [Textarea](https://apps-bridge-design-system-handbook.vercel.app/components/textarea) (atom, experimental): A text field for more than one line: notes, bios, messages.
- [Checkbox](https://apps-bridge-design-system-handbook.vercel.app/components/checkbox) (atom, experimental): A box people tick: choosing rows, one option in a form, or several from a list.
- [Collapsible](https://apps-bridge-design-system-handbook.vercel.app/components/collapsible) (molecule, experimental): A section people open and close, for what most people don't need most of the time.
- [Hover card](https://apps-bridge-design-system-handbook.vercel.app/components/hover-card) (molecule, experimental): A preview of a person or company that opens when the pointer rests on its name.
- [Card](https://apps-bridge-design-system-handbook.vercel.app/components/card) (molecule, experimental): The frosted-glass box most of Bridge sits in: lists, tables, forms and tiles.
- [Skeleton](https://apps-bridge-design-system-handbook.vercel.app/components/skeleton) (atom, experimental): A grey placeholder shaped like content that hasn't loaded yet.
- [BrandMark](https://apps-bridge-design-system-handbook.vercel.app/components/brand-mark) (atom, experimental): A company's logo at icon size: LinkedIn, Google, Microsoft, Apple, WhatsApp, Telegram, Chrome.
- [Avatar](https://apps-bridge-design-system-handbook.vercel.app/components/avatar) (atom, experimental): A person's photo or initials, a member or Super Connector badge, and stacks of faces.
- [Field](https://apps-bridge-design-system-handbook.vercel.app/components/field) (molecule, experimental): A label, a control, help text and an error, tied together.
- [SearchInput](https://apps-bridge-design-system-handbook.vercel.app/components/search-input) (atom, experimental): The pill search field with a clear button.
- [CopyField](https://apps-bridge-design-system-handbook.vercel.app/components/copy-field) (atom, experimental): An email or phone number that copies when clicked.
- [ExpandableBio](https://apps-bridge-design-system-handbook.vercel.app/components/expandable-bio) (atom, experimental): A bio cut to one line, with See more when it doesn't fit.
- [PageBanner](https://apps-bridge-design-system-handbook.vercel.app/components/page-banner) (molecule, experimental): A full-width notice strip under the top navigation.
- [InfoHint, HoverTip and Tip](https://apps-bridge-design-system-handbook.vercel.app/components/info-hint) (atom, experimental): Explain-this bubbles: an ⓘ that opens on hover or tap, and tooltips for chips and controls.
- [ActionMenu](https://apps-bridge-design-system-handbook.vercel.app/components/action-menu) (molecule, experimental): The one ⋮ overflow menu for a row or card's actions.
- [ConfirmDialog](https://apps-bridge-design-system-handbook.vercel.app/components/confirm-dialog) (organism, experimental): The one "Are you sure?" dialog, for actions worth a second look.
- [Toast](https://apps-bridge-design-system-handbook.vercel.app/components/toast) (atom, experimental): A short confirmation that drops in under the top navigation.
- [FilterPill](https://apps-bridge-design-system-handbook.vercel.app/components/filter-pill) (molecule, experimental): A pill that opens a single-choice filter menu, for table toolbars.
- [ColumnSortButton](https://apps-bridge-design-system-handbook.vercel.app/components/column-sort-button) (atom, experimental): A table column header that sorts its rows.
- [ColumnFilterMenu](https://apps-bridge-design-system-handbook.vercel.app/components/column-filter-menu) (molecule, experimental): A table column header that filters its own rows.
- [TagInput](https://apps-bridge-design-system-handbook.vercel.app/components/tag-input) (molecule, experimental): A text field that turns entries into removable chips.
- [DataTable](https://apps-bridge-design-system-handbook.vercel.app/components/data-table) (organism, experimental): The one table for product data, with its loading skeleton and pager.
- [Dialog](https://apps-bridge-design-system-handbook.vercel.app/components/dialog) (organism, experimental): A centered dialog for creating or editing a small record. For "are you sure?", use ConfirmDialog.
- [Drawer](https://apps-bridge-design-system-handbook.vercel.app/components/drawer) (organism, experimental): A right-hand panel for one item's details or a short list, below the top bar.
- [Bottom sheet](https://apps-bridge-design-system-handbook.vercel.app/components/bottom-sheet) (molecule, experimental): A panel that slides up from the bottom of a phone: where pickers and filters open below 768px.
- [StatBox](https://apps-bridge-design-system-handbook.vercel.app/components/stat-box) (molecule, experimental): One number with its label and an optional explanation, for dashboards and profiles.

### Patterns
- [Loading, empty and error](https://apps-bridge-design-system-handbook.vercel.app/patterns/loading-empty-error): How every data region shows it's loading, empty or failed.
- [Forms and validation](https://apps-bridge-design-system-handbook.vercel.app/patterns/forms-and-validation): Labels, optional fields, help text and when errors show.
- [Saving and unsaved changes](https://apps-bridge-design-system-handbook.vercel.app/patterns/saving): What saves instantly, what needs Save, and leaving with unsaved work.
- [Destructive actions](https://apps-bridge-design-system-handbook.vercel.app/patterns/destructive-actions): Confirming before anything is removed or stopped.
- [Feedback and undo](https://apps-bridge-design-system-handbook.vercel.app/patterns/feedback-and-undo): Confirming that an action worked, and what happens if it didn't.
- [Navigation](https://apps-bridge-design-system-handbook.vercel.app/patterns/navigation): The top bar, the phone bar, tabs and getting back.
- [Search, filter and sort](https://apps-bridge-design-system-handbook.vercel.app/patterns/search-filter-sort): Finding things in a list or table.
- [Selection and bulk actions](https://apps-bridge-design-system-handbook.vercel.app/patterns/selection-and-bulk-actions): Choosing several rows and acting on them together.
- [Education and onboarding](https://apps-bridge-design-system-handbook.vercel.app/patterns/education-and-onboarding): Helping people get started and complete their profile.
- [Keyboard and commands](https://apps-bridge-design-system-handbook.vercel.app/patterns/keyboard-and-commands): Shortcuts, the search overlay, and working without a mouse.
- [Permissions and availability](https://apps-bridge-design-system-handbook.vercel.app/patterns/permissions-and-availability): Features locked by plan, sign-in or role.
- [Live and running states](https://apps-bridge-design-system-handbook.vercel.app/patterns/live-and-running-states): Syncing and other work that runs on its own.
- [Dates and times](https://apps-bridge-design-system-handbook.vercel.app/patterns/dates-and-times): One way to show when something happened.
- [Labels and icons that change](https://apps-bridge-design-system-handbook.vercel.app/patterns/labels-that-change): Controls whose text or icon changes in place.
- [Inline editing](https://apps-bridge-design-system-handbook.vercel.app/patterns/inline-editing): Changing a value where it's shown.
- [Creating records](https://apps-bridge-design-system-handbook.vercel.app/patterns/creating-records): Adding a new thing: a contact, an organization, an intro.
- [Deep links and URL state](https://apps-bridge-design-system-handbook.vercel.app/patterns/deep-links-and-url-state): What goes in the address so a view can be shared and reloaded.
- [Metrics and explainers](https://apps-bridge-design-system-handbook.vercel.app/patterns/metrics-and-explainers): Numbers, charts and saying what they mean.
- [Panes, rails and sheets](https://apps-bridge-design-system-handbook.vercel.app/patterns/panes-rails-and-sheets): Drawers, side rails and dialogs, and how they stack.

### Templates
- [Card dashboard](https://apps-bridge-design-system-handbook.vercel.app/templates/card-dashboard): Glass cards that summarize an area: numbers, a chart, short lists.
- [Record page](https://apps-bridge-design-system-handbook.vercel.app/templates/record-page): One person or organization: identity card, sections, a 340px rail.
- [Table page](https://apps-bridge-design-system-handbook.vercel.app/templates/table-page): A full list with search, filters and paging.
- [Settings form](https://apps-bridge-design-system-handbook.vercel.app/templates/settings-form): A narrow column of setting cards.
- [Feed](https://apps-bridge-design-system-handbook.vercel.app/templates/feed): What happened lately, by day, with a side rail.
- [Public page](https://apps-bridge-design-system-handbook.vercel.app/templates/public-page): What signed-out visitors see: a hero and what they'd get.
- [Centered card](https://apps-bridge-design-system-handbook.vercel.app/templates/centred-card): One focused task in one card: sign in, approve access.
- [Admin table](https://apps-bridge-design-system-handbook.vercel.app/templates/admin-table): Bridge's internal admin: a sidebar and a table.

### Apps
- [All apps](https://apps-bridge-design-system-handbook.vercel.app/product/map): Every Bridge app, what's the same in all of them, what differs, and which are in the handbook.
- [Bridge OS](https://apps-bridge-design-system-handbook.vercel.app/product/bridge-os): Bridge OS's frame, widths and habits, how people arrive from other apps, and every screen with its template.
- [Picking a template](https://apps-bridge-design-system-handbook.vercel.app/product/picking-a-template): Which template for which job, and what to do when nothing fits.
- [Add a screen](https://apps-bridge-design-system-handbook.vercel.app/product/add-a-screen): Every step and file for a new Bridge OS screen, in order.
- [App kit](https://apps-bridge-design-system-handbook.vercel.app/product/app-kit): The app-level pieces every Bridge OS screen reuses.

## More

- Everything in full (every component's guidance, every pattern and template, the spec, tokens): https://apps-bridge-design-system-handbook.vercel.app/llms-full.txt
- MCP server (read-only, no login): https://apps-bridge-design-system-handbook.vercel.app/mcp — call `orient` first.