Design system

B2BHub Design System

A library of tokens, primitives, and domain patterns used across the platform. Each component listed here is production-grade and wired into the live Buyer / Vendor experience — this section is the single source of truth for reuse and extension.

Foundations

Design tokens — colors, typography, spacing, radii, shadows. The shared vocabulary every component speaks.

  • Color tokens
  • Type scale
  • Spacing & radius
  • Iconography

Primitives

Reusable building blocks: buttons, inputs, badges, tabs, multiselects, trees, dialogs. Used everywhere across Buyer and Vendor flows.

  • Button, Badge, Tabs
  • Multiselect, Combobox
  • TreeView, FileUploader
  • Dialog, Drawer, Toast

Patterns

Domain components composed from primitives: approval workflow, price matrix, RFQ form, shipment timeline.

  • ApprovalWorkflow
  • PriceMatrix
  • RFQ composer
  • Shipment timeline

Conventions

  • Naming — UI primitives in components/ui, domain components in components/domain, layout in components/layout.
  • Tokens — every color and font reads from CSS variables defined in app/globals.css under @theme.
  • Composition — domain components are pure compositions of primitives; no styled one-offs.
  • State — client-only primitives marked "use client"; everything else is server-friendly by default.