Orbex Sonar-DB Design system

Patterns

The overview of Sonar-DB and what it is made of: its cards, charts, search, editing and feedback, live.

  • Overview

    The six cards of the default overview on the grid, live.

  • Cards

    Anatomy, the six cards in every size, their states while the overview is edited, and their rules.

  • Charts

    Tick bars, rings and the trend chart in the cards, with the legend they share.

  • Search

    Searching orders, deliveries and invoices in plain words, with results as people type.

  • Editing the overview

    Showing, ordering and sizing cards, on phones and on desktops.

  • Panels

    The six panels the overview opens, side by side and live: what opens each, its parts, and how it opens on each device.

  • Feedback

    Toasts, confirmations, notices and loading states, and when to use each.

  • App shell

    The sidebar and its rail, the top bar, the phone bars and how the 1440 canvas fits a window, live.

  • AI assistant

    The chat with the Orbex assistant: a floating window on desktops, a bottom sheet on phones.

  • All modules

    The Edit layout sheet that shows or hides modules, with the basic set and layouts for a role.

  • Unbuilt modules

    The page for a section with no screen yet: what works and the way back.