App layout
The sidebar, top bar, page header, containers, column grids and page bodies every GoodUnited screen is built from.
Figma: 20 / Blocks / App layoutAppTopbar
Starts with a divider, then the breadcrumb with the section icon and page title, the optional date control and the account avatar.
PageHeader
One shared page heading with an optional description and an Actions slot.
Layout/Container
Empty Content slots: card for dashboards and forms, panel for flush workspaces, lane for boards.
Layout/Columns
Responsive grid tracks 1, 2, 3, 4, 2:1 and 1:2. Each column holds its own Layout/Container.
PageBody and WorkspaceBody
PageBody supplies the shared spacing and PageHeader. WorkspaceBody fills the page with edge-to-edge panels.
Composed layout blocks
Dashboard, Workspace and Board presets combining the same containers and column grids.
AppShell
Sidebar, top bar and the white page, whose corner against the navigation keeps its radius while it scrolls. On phones the sidebar slides out from the menu button.