Layout

Layout gives each screen a predictable structure and keeps content readable at every viewport size.

Structure

Use these components to establish the page hierarchy. Not every page needs every component.

Component	Role
App shell	Sets up the main application layout to accommodate app header, navigation and page content.
App header	Provides branding and application-level actions.
Top nav	Provides primary navigation across the top of the page.
Side nav	Provides primary navigation when the application has many navigation items.
Page header	Identifies the current page and provides its key actions.

The app shell owns the overall frame. Within it, use a top nav or side nav for primary navigation, and use a page header to establish the context for the current view.

Choose a page width

Choose the narrowest width that comfortably supports the content. A narrower content area improves readability and focus; a wider area gives complex data more room to breathe. Center the content at its maximum width on larger screens.

Page width applies to the primary content area. Navigation and other shell elements can use their own dimensions.

Width	Maximum width	Recommended use
Full width	`100%`	Wide data tables, Kanban boards, single-page apps, and customizable layouts.
Large	`1512px`	Data tables with 10 or more columns, complex dashboards, analytics, charts, and multi-column layouts.
Medium	`1128px`	Standard dashboards, tables and lists, forms, settings pages, and detail pages.
Small	`848px`	Articles and documentation, simple forms, settings, and wizard flows.

Responsive behavior

On mobile, pages use the full available width with 16px horizontal margins. From the md breakpoint upward, pages use 24px horizontal margins. Centered content gains more whitespace on larger screens, which helps maintain focus without making the content feel stretched.

Breakpoint	Viewport width
`sm`	`<640px`
`md`	`<1024px`
`lg`	`<1440px`
`xl`	`>=1440px`