App shell

Desktop

The desktop is a 1440 × 980 canvas. The sidebar is 224 px wide and folds into a 60 px rail with the double arrow; the cards widen with it on the same spring. Every section name in the rail has a tooltip. The frames on these pages open in dark, the dashboard’s native mode; View mode switches the frame between dark and light (in an app, where the shell is the page, it switches the whole page). Sections that have no screen yet open the unbuilt module page. The sidebar only navigates: the overview is edited with Edit layout in the top bar (its module sheet opens from All modules), stock is released from the Inventory card, and the chat button the AI assistant.

Fit to width

When the window is narrower than the canvas, the product draws the whole 1440 × 980 frame smaller with one zoom factor, the window’s width over 1440, so nothing reflows and every proportion stays the designed one. Turn Fit to width off to see it 1:1: the frame then scrolls sideways. The desktop editing demo has the same switch.

Tablet

From 768 to 1279 px the sidebar starts as the 60 px rail and opens over the content with a scrim. The top bar keeps the account, the search, which takes the free width, Edit layout, alerts, chat and the avatar; the name and role move into the avatar’s menu. Margins are 24 px, and the two columns share the rest: at 820 px, 2 × 346 px with a 20 px gap.

Phone

On phones the top bar carries the sun, the account and a search button; search takes the whole bar when it opens. The bottom app bar holds actions, not destinations: What’s new with its count, Assistant, Edit, Account and Menu, which carries a dot when something inside needs attention and opens the whole sidebar as a drawer from the left. Each button is marked while its sheet is open.

Floating bottom bar

Since 1.1.1 the phone’s bottom app bar floats: the same five buttons, icons, labels, active pill and badges, drawn as a capsule that does not touch the edges of the screen. The page scrolls under it.

• Place: 12 px from each side and 12 px above the safe area (bottom: calc(12px + safe area)); 366 × 64 px on a 390 px screen.
• Shape: the full corner radius (--sonar-shape-corner-full), 8 px inside each end so the first and last active pills keep clear of the round ends.
• Depth: --sonar-elevation-2, tight, with no hairline. The shadow is the page’s, so it stays light on a light page.
• Color: the same capsule in both themes. The bar is a dark-theme scope (data-theme="dark" on the nav, PhoneNav’s default), so a light page shows the dark bar: dark surface (surface.container), dark-theme icons, labels, active pill and badges. theme="light" or theme="page" draws it otherwise.
• Room around it: the page ends 100 px plus the safe area lower, so the last card scrolls fully above the bar; the drawer ends in 76 px of empty room, so View mode clears it; toasts over the page sit 92 px up (PHONE_TOAST_BOTTOM), 16 px above the bar.
• States: while the drawer is open the capsule floats whole over it and the scrim; while the layout is edited it steps aside for Edit layout’s own bar.

Contrast on the capsule (WCAG 2.2 AA): labels and idle icons 5.37:1; the active label 11.03:1; the active icon on its pill 7.42:1; the badge’s white numeral 4.53:1 on the solid danger fill. The capsule against the light page: 12.54:1 (page), 10.76:1 (canvas), 13.21:1 (cards).

Measures

Accessibility

• The sidebar is a landmark named “Main navigation”; the open section carries aria-current="page".
• The collapse button says what it will do, “Collapse sidebar” or “Expand sidebar”, and reports aria-expanded.
• View mode is a switch named “Light mode”, operable with Space and Enter.
• The floating bottom bar keeps every button’s name and state; it is the same landmark (“Actions”) as before, and its colors pass AA in both themes (see Floating bottom bar).
• The phone’s What’s new button reads its count (“What’s new, 2 unread”), and Menu reads “items need attention” when it carries the dot.
• With reduced motion requested, the sidebar folds and opens at once.
• Each frame is an example inside this page: its overview is a named region, not a second main landmark, its titles sit under this page’s section headings, and its icons are hidden from screen readers.
• Edit layout works in every frame, as on the overview: with a pointer or a finger by the top handle, or by focusing the handle, pressing Space and moving the card with the arrow keys.
• Since 1.1.0 the shell is in @orbex/sonar-patterns (app/Shell.tsx): an app imports it instead of copying the documentation’s source. SearchSlot puts the app’s own search in the top bar.
• The sidebar and the phone drawer keep the height of every row: when the window is shorter than the list, the part under the logo scrolls (on an iPad in landscape, about 1180 × 740 in Safari, the logo and the Support rows were squeezed before 1.1.0). The rows scrolled up disappear level with the foot of the top bar: the logo row is as tall as the bar (--top-h, 69 px), and the logo’s 32 px of air scrolls with the rows (since 1.1.2). The rail’s tooltips still sit beside their row.
• When the shell is the page itself, put data-shell="window" on it or an ancestor: its bars then read the device’s safe areas (the notch, the home indicator). In these frames they stay 0.