AppMock — abstract product previews.

The Nextcloud chrome row. Sits across every AppMock unconditionally because every Conduction app lives inside Nextcloud's workspace. The shelf icons are the cross-app navigation; per-app links never go here.

Inside

logo, 14 app-shelf icons, spacer, optional pill, bell, avatar

Tokens

--c-blue-cobalt bg; whites at 0.4 / 0.7 / 1.0 alpha

Height

24px fixed; flex-shrink: 0

• The shelf shows other Nextcloud apps, never this app's own pages
• Avatar is the only solid white circle, top-right
• Don't add a per-app logo here; the body handles that

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.

Inside

navHead (cobalt-blue card with hex glyph + label), 5–9 nav items (one with .active), and a .footer with Settings + Feedback pinned to the bottom

Width

22%, min 100px; flex-shrink: 0

Tokens

--c-cobalt-50 bg; --c-cobalt-100 right border + active bg + footer divider; --c-orange-knvb on the navHead hex

• Always exactly one .active item; never zero, never two
• Footer always carries Settings + Feedback, anchored bottom via margin-top: auto
• Don't add per-app sign-out here; the user's avatar in the topbar handles identity

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.

Inside

App pattern: .pageHeader + .kpiRow + .panelRows + tables. Desk pattern: .grid with .w widgets (no pageHeader)

Width

flex: 1; min-width: 0; overflow: hidden

Tokens

White bg; tokens scope to inner panels (--c-cobalt-100 borders, --c-mint-500 / --c-orange-knvb KPI accents)

• The single orange accent of the variant lives somewhere in here, never in the rails
• KPI strip is the most-recognisable App-pattern signature; use it when there's a number worth surfacing
• Don't let panels overflow horizontally; min-width: 0 is load-bearing

The first row of .col on every Index and Detail template. Carries the page title (left) and exactly two action buttons (right): one ghost (border-only, secondary action) and one primary (filled cobalt). The header tracks .col's width: when the sidebar is open the header constrains; when the sidebar is closed it spans full-width across the body. Procest already does this correctly.

Inside

title-bar (left, cobalt-blue rounded rect with the page title), spacer, then exactly two action buttons: .btn.ghost (white with cobalt border, secondary action) on the left of the pair, then .btn (filled cobalt, primary action)

Height

14–16px band, sits flush with .col's top padding

Width

tracks .col: full-spread when sidebar closed, constrained when sidebar open

Tokens

--c-blue-cobalt for the title-bar and primary button; --c-cobalt-200 border on ghost button; white bg on ghost

• Identical anatomy on Index and Detail; only the title changes
• Exactly two buttons, never one, never three. If you need a third action, group into an “Actions…” dropdown behind the ghost button
• Don't render the page title as plain text inside a panel; the page header is the title

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.

Inside

.sb-head (icon + title + description + close), .sb-tabs (2–3 tabs, one .active), then a .sb-body of inputs / filters / pinned metadata

Width

26%, min 130px; flex-shrink: 0

Tokens

White bg; --c-cobalt-100 left border; --c-blue-cobalt active-tab underline; --c-cobalt-50 on the icon background

• Sidebar should be dismissible; it's a drawer, not a permanent rail
• Default tabs on an Index page: Search + Columns. Default on Detail: Overview + Activity
• Don't put global navigation here; that's .nav's job. The sidebar is scoped to the current view.

A horizontal row of three or four cards summarising the records below. Each card carries a hex glyph (the categorical accent), a big number, and a small label. Sets the user's mental model before they read the list.

Inside

3–4 .kpi cells; each cell is hex glyph (.ico) + meta column (.num + .label)

Variants

.kpi default (mint), .kpi.forest (data), .kpi.amber (KNVB orange, accent), .kpi.lavender (process)

Tokens

--c-cobalt-50 bg per cell; --c-mint-300 / --c-forest-300 / --c-orange-knvb / --c-lavender-300 for the hex glyph

• 3–4 cards max; more becomes a chart, not a strip
• One .amber per strip max — that's the orange-accent budget for .col
• Don't put dimensions or breakdowns here; KPIs are headline numbers, not pivots

The vertical row pattern that powers tables, queues, recent records, ranked lists, and related-record sections. One avatar (categorical colour), one or two text lines, an optional status pill on the right.

Inside

Each .item: .av avatar (left), .lines column with .l1 (primary, cobalt-700) + optional .l2 (metadata, cobalt-200), optional .statusPill on the right

Avatars

.av default mint, .av.b lavender, .av.c orange, .av.d forest, .av.e terracotta — categorical, not semantic

Tokens

--c-mint-300 / --c-lavender-300 / --c-orange-knvb / --c-forest-300 / --c-terracotta-300 avatars; --c-cobalt-50 row divider

• Avatar colour is decorative (categorical); never encode status in it — that's the pill's job
• Cap visible rows at six; paginate or scroll after that
• Don't right-align numbers in .lines; numbers belong in a separate column or a .statusPill

The right-side state indicator on a list row, or the inline status next to a section title. Two variants only: mint (stable / done / OK) and KNVB orange (beta / in-progress / accent). Hex glyph + short label, never just text.

Inside

.h hex glyph + .t text line; the hex carries the status colour, the pill bg is its tint

Variants

default mint (stable / done), .beta KNVB orange (in-progress), .neutral cobalt (informational)

Tokens

mint: --c-mint-300 bg / --c-mint-500 hex / --c-mint-500 text. beta: terracotta-50 bg / --c-orange-knvb hex / terracotta-700 text

• Pills are state, not action; never use them as buttons
• One pill per row max — if you need two states, the row is two records
• Don't invent a third colour variant; if mint and KNVB don't fit, the row needs a different atom

The white card with rounded corners that wraps every list, table, or record-section in .col. Has a head (small label) and a body (most often a .stack). Pair two side-by-side via .panelRow for two-column layouts.

Inside

.head (small cobalt-700 label, optional pill on the right) + body (almost always a .stack)

Layout

nest 1–2 panels per .panelRow; multiple .panelRows stack vertically inside .col

Tokens

white bg; --c-cobalt-100 1 px border; --c-cobalt-700 on the title line

• Border is always 1 px cobalt-100, never thicker, never darker
• Pair panels in a .panelRow; three or more wide goes outside .col's rhythm
• Don't nest panels inside panels; if you need a sub-grouping, use .head + .stack structure within the same panel