- App shell and sidebar · Sidebar
Two shells, one system: HQ super admin and brand admin. A 232px navy sidebar with the satin sheen (the only glow in the product), the place card on top, grouped menu items and the account at the foot. Phone: place bar, tab bar and a Menu drawer. - Menu item · Sidebar
One sidebar entry: 16px icon, label, optional count or an amber hold / stuck pill, nested children for Settings and Website. The current item gets a 2px periwinkle rail. - Settings sub-nav · Sidebar
The second column inside Settings (Brand, Users and access, API keys, Rules, Audit log…). On the phone it is a plain list that drills in. - Top bar · composed
56px, white at 86% with a 10px blur, sticky. Breadcrumbs on the left; on the right the environment badge, the "?" help trigger (same spot on every page) and the account button. - Breadcrumbs · Breadcrumb
Where you are: place › section › record. Archivo 13.5px muted with the current page in semibold foreground. Phone shows only a back link to the parent. - Place switcher · Popover, Command
Switch between RJ HQ and each brand. The place card in the sidebar opens a searchable list with monogram tiles (HQ blue, DTC navy, B2B slate). Phone: a bottom sheet. - Command palette · Command, Dialog
⌘K "Jump to…": search pages, products, orders and actions from anywhere. Opens over the shell; groups results; Enter goes. Phone: full-screen Jump to. - Phone tab bar · composed
Phone only: four tabs at the bottom (the place's top destinations, then Menu), 62px with the safe area, frosted white. Menu opens the full navigation drawer. - Tabs · Tabs
Kit v2 tab strip for page or section navigation (customer Overview / Addresses / Fit quiz / GDPR). 40px tall, a 2px navy underline on the current tab, counts in `em`. Scrolls sideways on the phone. - Page header · composed
Title, one line of context and the ranked actions: tertiary, secondary, then the one primary at the end. 26px Archivo 600 title. On the phone the primary moves to the action bar. - Record header · Avatar, Badge
Kit v2 header for detail pages (customer, tailor, fit review, brand): avatar, name with status chips, a meta row and ranked actions. - Phone action bar · composed
Kit v2: the page's one primary in thumb reach, sticky above the tab bar. Selecting rows swaps it to a selection bar ("3 selected" + bulk action). - Phone list row · composed
Kit v2: the phone's replacement for a table row when there is no thumbnail (campaigns, rules, tickets, releases): title, meta line, chips, and a trailing slot for a figure or date. - Embedded Payload CMS frame · composed
The Content area embeds the Payload CMS admin in a frame under the admin's own header. States for loaded, loading, error, empty and not wired.