BMS Frontend Design

Visual conventions for BMS internal web apps. Most of the UI mechanics — sidebar, nav rows, mobile drawer, resizable panels, data grid — already live in @bmsuisse/ui and @bmsuisse/datagrid (public npm packages published from the bmsuisse/bmsui monorepo, no private feed needed). Reach for those first; don't rebuild what they already do. What's left here: the brand tokens every app still defines itself (colors, radius, type), and a few decisions the libraries deliberately leave to the app.

bun add @bmsuisse/ui @bmsuisse/datagrid

Assumes the Tailwind v4 + shadcn/ui setup init-app-stack scaffolds: CSS variables in src/index.css consumed via @theme inline, a .dark class variant. Define tokens there, not as hardcoded hex in components — that's what makes dark mode and future rebrands (a different --primary) work for free, and it's how @bmsuisse/ui's components pick up your app's colors.