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
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
Top bar, sidebar and the scrolling page. On phones the sidebar slides out from the menu button.
