Shell

One focused chapter from the Thorbis interface research. 8 rules. Read the research index for every chapter and focused study.

Shell

The product grammar is Linear-first: inverted-L chrome, a dimmed sidebar, a dominant rounded work surface. Credit Karri Saarinen , Jori Lallo , and Tuomas Artman , and How we redesigned the Linear UI (opens in a new tab). Thorbis stays independently branded. We match Linear’s quality and mechanics, not its trademarks. The shared Linear baseline is inherited by every specialist skill; the selective pattern reference is the Thorbis × Linear pattern matrix.

The shell is an inverted L. Outer canvas → left sidebar + main region. Main region → location/history bar, view/toolbar bar, rounded work sheet. The browser variant can omit desktop-native controls without breaking the composition.
The sheet is the work. Chrome recedes.
View types share one hierarchy. List, board, schedule/timeline, map, canvas, inbox, reports, record workspace, and fullscreen editor all use the same chrome. The view changes; the user does not relearn the application.
Density is a decision. Same law as Density belongs to the work. High on lists and ledgers. Moderate on records. Low on guided steps.
Morning board
Tab in. Arrows move. Enter opens.
Four surface profiles. Workbench (office, desktop, Admin, Money, Brain). Guided (field mobile, onboarding, portal, checkout). Evidence (reports, proposals, audit). Showcase (marketing, cinematic product stages, not a card grid). Shared tokens and primitives sit under all four.
Pages fill patterns. They do not rebuild geometry. AppShell, LocationBar, ViewBar, ListPage, BoardPage, RecordWorkspace, SplitInspector, ScheduleTimeline, GuidedFlow, PortalFlow, ShowcasePage. Product pages occupy slots.
One component system. The kit is shadcn. No app-local buttons, dialogs, forms, tables, menus, sidebars, themes, shadows, spacing, radii, icons, or motion systems. The kit is shadcn/ui (opens in a new tab). Copy the source in. Dress it. Search the registry before creating anything. Credit .
A 1px lift. Not a card stack.
One contextual ladder. Tooltip → Information Popover → Entity Peek → Split Inspector → Full Record. Compact panels never hold long forms or high-risk actions. Essential information remains reachable without hover.
A page is a place. A modal is a transaction. Linear is not anti-modal. It is anti-ambiguous surface. A job, customer, invoice, estimate, or search is a route. Collect payment, assign a tech, add a note: a modal. Status and date: a popover. Invoice math and job properties: an inspector in the layout. Hold Space to peek. A desktop drawer is an escape hatch. Refuse it. On a phone, a bottom sheet may hold the inspector or one secondary action. ⌘K goes or does. Search as a route finds and compares. Never a transient surface for a durable workflow. Never a durable page for a momentary transaction. Thorbis × Linear pattern matrix. D-013. D-014.

I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Make the task easier, not the screen busier

A feature can look complete while the dispatcher still has to reconstruct context or wait for unrelated content.

Start from one person, interruption, and completed task. Keep the current job and its next action usable while optional evidence arrives. Treat the real constraint as part of the brief, not something polished away afterward.

Thorbis example. For assigning a tech, show the job, relevant availability, and the consequence of the assignment. Do not make the dispatcher traverse a marketing-style sequence or a new shell to finish a routine task.

Verify. Walk through the task with representative long and missing records. Check that the essential action remains understandable when optional content is slow or unavailable. Record the result rather than claiming a performance improvement without measurement.

Do not import. No additional shell, feature hero, framework migration, or new dependency. Keep the approved surface role.

Open the product skill · Evidence: Design Engineer Principles; How we think about design; Component Architecture for React Server Components

Preserve the place as the collection grows

Large customer, property, and inspiration collections become expensive to navigate when every inspection loses the current place.

Treat filters, selected records, scroll, and Back behavior as part of the task. Loading a child or optional panel should not reset the whole collection. A saved reference includes enough context to be useful when revisited.

Thorbis example. Open a property from a filtered customer list and return to the same filter and position. On the inspiration wall, reserve the media footprint and retain source credit even when the preview is unavailable.

Verify. Try refresh, Back and Forward, a direct record link, an empty result, a failed preview, and a long collection. Check that late data does not overwrite a draft or move the action under the pointer.

Do not import. No unbounded eager media, private information in shareable URLs, or a local-only storage promise borrowed from Copper.

Open the ecosystem skill · Evidence: 7 Principles of Rich Web Applications; Component Architecture for React Server Components; Philosophy; Copper