The app, the console, and the phone all live inside the same frame: a collapsible
rail, a principal topbar, and a content column that never fights them. This page is
the shell family as a specimen — the shipped anatomy, the three flavours, and the
@relay/ui primitives underneath, all live and clickable. Source of truth:
app-v35 shell (as shipped) ·
console-v35 ·
the neutral-first direction.
relay-tokens-v35.cssgeometry quoted from app-v35/uispecimen · not the shipped kitJuly 2026
Anatomy
The universal shell, miniature but functional. Click the brand mark to collapse the
rail to its 52px icon form; click nav items to move the active stripe — the one
left-border the design system permits.
TransfersSearch anything… ⌘K
QNHC2C Deploy runbook handoff 18m
HVK2R9 Design tokens v3.5 1d
6QXVQN Brand — ™ rollout 2d
rail 220px labeled ↔ 56px icons, persisted; brand mark togglestopbar 52px · title + ⌘K principal search + bellactive 2px accent left-stripe — the one permitted left bordergroups Workspace · Tools · Account · role-gated Admin
The family
One geometry, three temperaments. The app is neutral and personal; the console is
the same room wearing an operator's badge; the phone folds the rail into an
off-canvas overlay — no hamburger ceremony, no bottom tabs.
Transfers⌘K
QNHC2C Handoff
HVK2R9 Tokens
App — the personal room
Neutral surfaces, teal touch points, the Code always first-class. The icon rail is the resting state on smaller desktops; labels return on demand.
/web/app-v35/rail 56↔220
DashboardAll systemsviewing as: support
Claim approvals 4 waiting
Access codes 12 live
Console — the operator's badge
Same shell, denser tables, and an operator topbar: status pill, maintenance flag, preview-as-role. Indigo marks the operator layer, never the content.
/web/console-v35/RCTX-705
Workspace
⇄Transfers
◉Stream
◇Sessions
Tools
◌Search
➤Send
Transfers
QNHC2C · Deploy runbook handoff
HVK2R9 · Design tokens v3.5
6QXVQN · Brand — ™ rollout
K6MUFW · Q3 pricing brief
Mobile — the same rail, folded
At ≤600px the rail becomes an off-canvas overlay: tap the menu, the drawer slides over a scrim, same groups and stripe. Tap the demo to try it.
overlay · 0.22s out-expono bottom tabs
Shared primitives
Everything inside the shells is drawn from one kit — the @relay/ui extraction
target that lives today in app-v35/ui.
The inventory, with a taste of each.
button.css · badge.cssCTA grammar: solid teal fill is buttons only; selection everywhere else is tint + accent text.Received
card.css · form.css · table.cssSurfaces and inputs: flat cards, 5.1:1 input borders, dense operator tables for the console.
toast.css · notification.cssArrivals: toasts enter on an out-expo slide, dots carry the family arrival ring, once.QNHC2C received
global-cards.cssThe floating card layer — relay previews and object cards that ride above any screen.
tokens.cssSingle source of truth: @imports brand/relay-tokens-v35.css and aliases the unprefixed app names to the canonical --rly-* values.--bg → --rly-bg
Shell laws
The rules that keep the three rooms feeling like one house.
The rail is universal. Every screen lives in it; no screen invents its own chrome. Collapse state persists per user.
The brand mark works for a living. It toggles the rail, and its core beat (3.4s) is the shell's one sanctioned idle motion.
One left-stripe. The 2px accent border marks the active nav item, and nothing else may use the side-stripe pattern.
⌘K is the principal search. One search, top bar, every screen — Status folds into it rather than living on the rail.
Mobile folds, never forks. The same rail becomes the overlay drawer; groups, order, and the stripe carry over exactly. No bottom tabs.
Selection is tint, CTA is fill. Solid teal is reserved for buttons; selected states use the tint + accent-text pair everywhere.
The interface works in black and white first. Structure carries every shell; teal and indigo join as touch points only.