The canonical SaaS application shell: a slim top bar for global context, a fixed sidebar for navigation, and a scrollable content pane. Everything aligns to a strict grid so the product feels engineered, not assembled.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Linear-style application shell layout.
1. Structure: CSS grid with three areas — a 48px top bar spanning full width, a 240px fixed sidebar below it, and a scrollable main pane filling the rest.
2. Top bar: global search, breadcrumbs, and user avatar. Never put page-level actions here.
3. Sidebar: workspace switcher on top, primary nav in the middle, settings pinned to the bottom. It never scrolls with content.
4. Main pane: the ONLY scroll container (overflow-y: auto). Header of the pane is sticky within it.
5. Content max-width: none — app shells use the full viewport. Inner padding 24px.
6. Responsive: below 1024px the sidebar collapses to an icon rail (56px); below 768px it becomes an overlay drawer.The canonical SaaS application shell: a slim top bar for global context, a fixed sidebar for navigation, and a scrollable content pane. Everything aligns to a strict grid so the product feels engineered, not assembled.
Switch viewports to see the responsive behavior described in the exports.
Switch viewports to see the responsive behavior described in the exports.