Design system

BSTR operating manual

The rules that let developers and designers extend this dashboard without breaking its essence.

Living docs

Docs

Theme presets

Enterprise sober, dark and bold premium are token presets over one component structure.

Open reference

Docs

Responsive contract

Rules define how each pattern adapts before code is written.

Open reference

Docs

Authz language

Permission states remain visible, explain cause and provide recovery.

Open reference

Design principles

BSTR's operating rules. New pages should obey these before adding new components.

Data first, decoration second

Visual effects must clarify hierarchy or state. If an effect does not make the workflow easier to understand, remove it.

Feedback is product language

Every action resolves into a toast, dialog, banner or inline state. Users should never wonder if the system heard them.

Responsive by composition

Mobile layouts reorganize information instead of hiding core workflows. Tables need card fallbacks or controlled scroll.

Permission states stay visible

Do not silently hide important modules. Explain the required role, why access is blocked and how to request access.

Theme presets share one structure

Enterprise sober and bold premium are token presets over the same components, not separate design systems.

Token contract

Use semantic tokens instead of raw values so theme presets remain possible.

Token	Use
--background	Page canvas and app background.
--surface	Default cards, controls and panels.
--surface-elevated	Drawers, nested cards and emphasized panels.
--surface-muted	Selected states, table headers and inactive controls.
--primary	Primary actions, active navigation and key chart series.
--accent	Secondary data series and special highlights.
--success / --warning / --danger / --info	System status only; never decorative.
--border / --border-strong	Separation, outlines and table structure.

Responsive contract

Dashboard components must declare how they behave on mobile and desktop.

Area	Mobile	Desktop
Navigation	Drawer opened from top bar.	Persistent sidebar.
Tables	Card/list fallback or controlled scroll.	Full table with visible actions.
Filters	Wrapped chips or drawer.	Inline filter bar with saved views.
Charts	One primary chart above fold.	Multi-panel chart plus table context.
Dialogs	Full-width or bottom-sheet style.	Centered modal or right drawer.

Interaction contract

Every visible affordance must lead to a concrete, keyboard-reachable UI state.

Pattern	Rule
Command palette	Global navigation and discovery. Open from top search, command icon or Cmd/Ctrl+K; close with Escape or the scrim.
Notification sheet	Ephemeral system activity. Opens from the bell and keeps page context behind a strong scrim.
Filter sheet	Query refinement. Filter chips summarize state; the sheet owns editing and apply/reset controls.
Detail drawer	Inspect one record without losing list context. Use for summaries and quick actions, not full workflows.
Row action menu	Overflow opens a menu with view, edit and secondary actions. Destructive actions are separated visually.
CRUD create/edit	Use a primary Add button and a sheet/dialog form with visible labels, helper text and cancel/save actions.
CRUD delete	Delete never executes from the menu directly. It opens a confirmation dialog that states consequence and scope.
Bulk actions	Selection reveals a contextual toolbar with count, clear, export/archive and confirmed destructive actions.
Dirty forms	Closing a changed form requires a discard confirmation so users never lose input silently.
Table states	Loading, empty, no-results and recoverable-error states need clear copy and recovery actions.
Action feedback	Create, update, delete and bulk actions resolve into a toast or inline status with undo when reversible.
Saved views	Saved views bundle filters, sort, density and visible columns into named operational modes.
Sortable columns	Sortable headers expose direction visually and with aria-sort for assistive technology.
Column visibility	Column visibility controls reduce density without hiding row actions or all data columns.

Feedback decision guide

Pick the smallest pattern that gives enough context and recovery.

Situation	Pattern
Short-lived result	Toast
Destructive action	Confirmation dialog
System-wide notice	Banner
Local blocked section	Inline permission state
Long-running process	Loading toast plus inline progress
Reversible destructive action	Toast with undo

Status vocabulary

Consistent words reduce cognitive load across products.

Status	Meaning
Active	Usable and healthy.
Pending	Waiting for user or system action.
Suspended	Intentionally blocked. Explain recovery.
Failed	Completed unsuccessfully. Provide retry.
Synced	Fresh and up to date.
Degraded	Available with reduced reliability or delay.
Read-only	Visible but not editable because of role, state or policy.
Denied	User cannot perform the action. Explain required permission.