Application Shells
Full-page app layout shells with sidebars, stacked headers, and multi-column arrangements.
Layout
24 variants
How To Use This Page
Application Shells sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 8 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Light sidebar
White navigation rail with a light content canvas and mobile sidebar overlay.
Dark sidebar
Dark navigation rail with a bright content surface for heavier operational interfaces.
Brand sidebar
A brand-forward navigation frame with a clean, neutral work area.
Light nav with bottom border
Horizontal navigation with a soft border and a ground content canvas.
Dark nav
A high-contrast top bar paired with a quiet white page body.
Brand nav with overlap
Brand-colored navigation with an overlapping content card for key dashboards.
Full width three column
Icon navigation, primary workspace, and a persistent context panel.
Constrained three column
A centered multi-column shell for wide-screen editorial and planning tools.
Sidebar shells
Dashboard
Overview of campaigns, team activity, and reporting.
Performance overview
A neutral shell with a light sidebar for administration and project pages.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Team dashboard
A high-contrast shell for analytics and operations work.
Team operations
A dark navigation rail keeps secondary navigation distinct from the primary work surface.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Projects
A branded navigation frame for internal product teams.
Delivery board
The main canvas stays quiet while the brand lives in the sidebar.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Stacked shells
Quarterly reporting
A lightweight stacked shell for dashboards, search-heavy pages, and list views.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Executive summary
A dark utility bar anchors global navigation while preserving a calm work surface.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Launch planning
A branded header can overlap the content area without overwhelming the page.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Multi-column shells
Full width three column
Icon navigation, primary workspace, and a persistent context panel.
Project activity
A full-width three-column frame for operators and PMs.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates
Constrained three column
A centered multi-column shell for wide-screen editorial and planning tools.
Planning workspace
A centered shell keeps multi-column layouts contained on wide screens.
Weekly performance
Revenue, team velocity, and delivery health
Upcoming milestones
Campaign handoff, launch review, and reporting
Operations snapshot
Cross-functional blockers and resourcing updates