Draft

Styles and utilities

The shared stylesheet, the cn helper and custom utilities.

One stylesheet

@brdgapp/ui/globals.css holds every token, utility, keyframe and base rule. Import it once, right after Tailwind. It also tells Tailwind to scan the package's components, so their classes are always generated.

/* app/globals.css — once per app */
@import "tailwindcss";
@import "@brdgapp/ui/globals.css";

The cn helper

cn joins class names and settles clashes so the last one wins. Always import it from the package, never write a local copy and never use clsx alone.

import { cn } from "@brdgapp/ui/lib/utils";

<div className={cn("rounded-xl p-4", isActive && "bg-[var(--surface-tertiary)]", className)} />

Custom utilities

Beyond Tailwind's own classes, the package defines these:

Class	What it does
`.scrollbar-none`	Scrolls without showing a scrollbar.
`.scrollbar-hover`	Scrollbar appears only while hovered.
`.anim-delay-1`	Delays an animation by 50ms, for staggered entrances.
`.anim-delay-2`	Delays an animation by 100ms, for staggered entrances.
`.anim-delay-3`	Delays an animation by 150ms, for staggered entrances.
`.anim-delay-4`	Delays an animation by 200ms, for staggered entrances.
`.anim-delay-5`	Delays an animation by 250ms, for staggered entrances.
`.anim-delay-6`	Delays an animation by 300ms, for staggered entrances.
`.bg-dot-grid`	The page's dot-grid background.
`.bg-noise`	Grain texture over the background.
`.bg-glow-patches`	Soft color glows behind the page.
`.liquid-glass`	Frosted glass for cards, panels and empty states.
`.liquid-glass-sm`	Lighter glass for dropdowns and tooltips.

Animations: animate-fade-in, animate-fade-in-up, animate-scale-in, animate-scale-out, animate-fade-out, animate-slide-in-right.

Rules

Colors through tokens only: bg-[var(--surface-secondary)], never bg-[#F9F9FA] or bg-gray-50.
On a package component, className is for layout (mt-4, shrink-0, w-full), never for its look.
Import the stylesheet once. Don't copy tokens into an app's own CSS.
Inside cn, write a line height after the font size: text-[13px] leading-relaxed. Written the other way round, the font size wins and the line height is dropped.

Rules

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

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.

Colors are tokens

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.

Not decided yet

Until these are settled, follow Bridge OS as it is today.

Named type sizes (for example text-body). If added, they are registered in cn so overrides keep working.

Known gaps

Where Bridge OS code differs from this page today. Follow the page, not the gap.

Bridge OS's cn is plain clsx: when two classes clash (two paddings), the last one in the stylesheet wins, not the last one you wrote.
Bridge OS's stylesheet also carries an Intercom-widget patch (.bi-shell). It belongs to the app, not the package.

Sources

Package packages/ui/src/styles/globals.css and src/lib/utils.ts, read on every build.