Five zone cards, one per atom of the canonical chassis: Topbar, Left navigation, Main column, Page header, Sidebar. The focused atom is outlined in KNVB orange. The rest fades to 25% so the reader sees where each atom sits in context, not just what it looks like in isolation. The full chassis with all atoms enabled lives on app-mock.
.topbar
The Nextcloud chrome row. Sits across every page unconditionally because every Conduction app lives inside Nextcloud's workspace. The shelf icons are the cross-app navigation; per-app links never go here.
.nav
The per-app sidebar. Carries this app's own primary navigation, plus a footer pinned to the bottom for global access (Settings, Feedback). The active item is the only place cobalt-100 backgrounds a row.
.col
The work surface. In an App pattern, the column opens with a .pageHeader (title + actions), then KPI strip and panels. In a Desk pattern, .col nests inside .grid to become a full-bleed widget canvas with no page header.
.pageHeader
The first row of .col on every Index and Detail template. Carries the page title (left) and exactly two action buttons (right): one ghost, one primary. The header tracks .col's width: full-spread when the sidebar is closed, constrained when it is open.
.detail
The right-hand sidebar. Optional, dismissible, anchored to the active record or the active view. Carries an icon + title + description in a header, then a tabbed body (Search / Columns by default). Class stays .detail for code; we call it the Sidebar in copy.