Portal shell - Kramor DS

Anatomy

Six parts, always in the same place. A diagram of the shell is below; the live version runs on every template screen.

1
Sidebar
Logo, workspace switcher, up to seven destinations with counts, the active migration and a collapse control.
2
Workspace switcher
Shows the tenant every query is scoped to. Switching re-scopes the whole portal.
3
Top bar
Glass chrome with breadcrumbs, search, the example data badge, notifications, theme and account.
4
Command palette trigger
Search or jump anywhere. Also opens with ⌘ K or Ctrl K and the slash key.
5
Page header
Eyebrow, title, one line of context, status badges and the primary action on the right.
6
Content
Solid cards on the 12-column grid, capped at 1400px. Never glass behind dense data.

Sidebar

Destinations are nouns, in workflow order: Overview, Connections, Studio, Validation, Recovery, Governance, Settings. Counts appear only where someone has work waiting.

Validation37Recovery4

Do

Show a count only when action is waiting

Validation shows 37 open exceptions and Recovery shows 4 unknown outcomes. Everything else stays quiet.

Connections5Studio9

Don't

Badge every item with a total

Totals like 9 waves or 5 connections are not work. They train people to ignore the counts that matter.

The top bar is glass so content scrolls visibly beneath it. Its right side is always: search, example data badge, notifications, theme, account. On templates the example data badge explains that no store is connected.

Alder & Finch RecoverySearch or jump to⌘KExample data

Command palette

Two groups: Pages and Actions. Pages come first because jumping is the most common use. Actions never include anything destructive or anything that needs approval; those always go through their screen.

Toasts

Bottom right on desktop, bottom edge on phones. At most four at once, newest at the bottom. Five seconds, paused while hovered or focused. Toasts confirm, they never ask.

Page header

Eyebrow for context such as the wave or revision, the title in h3, one line of description, status badges, and actions on the right with the primary action last.

Wave 4

Recovery

No retry runs until read-back proves what happened.

Run read-back on 4

Keyboard

Everything in the shell works without a pointer.

Open or close the command palette (Ctrl K on Windows and Linux)⌘K

Open the command palette from anywhere outside a text field/

Collapse or expand the sidebar. The choice is saved on the device.[

Show the keyboard shortcuts dialog?

Move through menus, the palette and radio groups↑↓

Move between tabs and segmented options←→

Close the topmost dialog, sheet, menu or tooltipEsc

Responsive behavior

Under 640pxBreadcrumbs collapse to the page title. Toasts span the bottom edge. Search shows only its icon.

640 to 1023pxBreadcrumbs return. The sidebar is a sheet opened from the menu button.

1024px and upThe sidebar is persistent and collapsible to a 72px icon rail with tooltips.

1440px and upContent caps at 1400px and centers, so line lengths and tables stay readable.