Design system  /  Components  /  AppMock

AppMock — abstract product previews.

Token-built abstract panels of each Conduction app. Used wherever a marketing surface needs to show an app without embedding a real screenshot. Reference for the level of abstraction: honeycomb.io/technologies/* — recognisable as the product, never literal.

01

MyDash

SCREENSHOT-BASED

Personal home, full-bleed cobalt with a 4-column widget grid. Big primary tiles (Intranet, Calendar, Files) sit beside info widgets with avatar lists, empty states, and an upload drop-zone.

02

OpenRegister

SCREENSHOT-BASED

Three-pane admin: nav left, dashboard centre, detail rail right. KPI strip on top, two-by-two analytical panels below. The right rail carries Filter Statistics, Totals, and Orphaned Items.

03

DeciDesk

SCREENSHOT-BASED

Decision and minutes tooling for boards. Left nav, action row top right (New Decision / Action Item / Minutes), KPI cards, two side-by-side tables for notulen and besluiten.

04

OpenCatalogi

INFERRED

Federated publication catalogue. Centre is a 3×2 grid of catalogue cards, each with a hex glyph in a different family colour to signal categorical mix. Build was running when the abstract was drawn.

05

OpenConnector

INFERRED

Integration plane. Centre stage is a single canonical pipeline (lavender source → cobalt connector → forest target) with a recent-runs status table below. Build was running when the abstract was drawn.

06

Procest

INFERRED

Case management for ZGW processes. Centre runs the stage timeline across the top (one done, one active in orange, three to-do) above a recent-cases table with status pills. Build was running when the abstract was drawn.

Status. Three of six are based on real screenshots taken at localhost:8080 (MyDash, OpenRegister, DeciDesk). The other three (OpenCatalogi, OpenConnector, Procest) were drafted from each app's product description in sites/www/src/pages/apps/*.mdx while their frontends were rebuilding. Once those builds finish and the screenshots are in, the three INFERRED variants will get a refinement pass.

The React component lives in docusaurus-preset/src/components/AppMock/ and is callable from any MDX as <AppMock app="mydash" />.