Focus Mode Shell
Minimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.
Minimal top bar with back link, document title, save state badge, and a centered max-w content column with no sidebar.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Focus Mode Shell strips the UI down to what one task needs: a sticky top bar 14 units tall carrying a back link to Projects, the document title Q3 2026 product brief, a Saved badge with a check icon, and Share plus Done buttons at the far right. Below it a centered max-w-2xl column holds two cards, Document with a tall dashed editor slot, and Collaborators with a shorter members slot. No sidebar, no secondary nav, no widgets competing for attention.
There are no data arrays; the shell is structural. The sticky header and centered column are the entire pattern; every decoration that was omitted is a deliberate choice.
Reach for this shell when the user is in a compose, write, or long-form edit flow where peripheral chrome pulls attention away from the primary task. Do not use it for dashboards, tables, or any view where the user needs to cross-reference other parts of the product while working. Replace the dashed panels with an editor or form block and wire the Done button to save and return.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document editor frame. Other focus-mode contexts:
Tip: the back link labels its destination explicitly, Projects rather than just Back, so the user always knows where Done will send them.