Screen mockups
17 screens × 3 variants, built from the Mobbin references in research/09-ui-references.md; personas in research/10-personas.md. Static data for a fictional tenant (Acme Defense Systems); Clerk-native regions are drawn as labeled stand-ins until keys are configured.
Canonical module sidebar with a pinned starter-guide card, Favorites, collapsible domain groups and an Attio-style help/plan footer; ⌘K opens a grouped palette with a keyboard-hint footer and the bell opens an inbox popover.
Slim domain sidebar plus a second in-module column (Risk management: pages, saved views with counts); the inbox slides out as a panel next to the sidebar, replacing the module column while open.
A 56px icon rail whose domains open a flyout of modules, with a full-width top bar carrying the org switcher, a search field with a preview pane, Create and inbox; the page shows the full-page notifications center.
Seven-step pre-app wizard: Clerk sign-up and org creation, then context (CAGE, scope), 3-column framework cards with a live in-scope summary, branding, invites, ending on the starter guide.
All setup on one scrolling page: a left rail of sections with completion ticks, compact two-column framework cards, inline Clerk regions and a sticky summary plus "x of y" finish bar.
Setup continues inside the shell at /app/get-started: collapsible sections with "x of y", locked steps, inline task panels (Clerk invite, logo, framework dialog) and a progress side card.
SPRS meter and "needs attention" monitoring tiles up top, per-framework "x of y" cards with a framework filter, then my tasks, residual heat map, upcoming audits, findings/CAPA and activity.
Report-style page with a period switcher: KPI strip with deltas, SPRS trend against the 88 threshold, stacked framework status bars, current vs residual heat maps and "Audits as of today" tabs.
Work-first cockpit: a tabbed task queue and CMMC family "x of y" posture grid in the main column, with an SPRS gauge, toggleable heat map, agenda and activity in a right rail.
Vanta-style register with Inherent | Treatment | Residual chips, filter chips, density/column popover, floating bulk bar and a prev/next triage drawer.
Attio-style gridded spreadsheet of Issues & Opportunities: saved-view tabs with counts, group-by with collapsible groups, inline status edit with Undo toast, aggregate footer and a Table / Board toggle.
Vendor inventory with needs-attention summary cards, a compact filterable list on the left and the selected vendor (tier, score, assurance, questionnaire progress, linked risks and documents) on the right.
Full-page risk with the workflow stepper and next-step button in the header, treatment sub-items, typed links grouped by relation (cardinality badges, inferred "via" links, two-step link picker), All / Comments / History activity, and a right column of property and custom-field cards.
CAPA record with tabs and counts, one relationship panel per link type (each showing its inverse label), a filterable all-links table, inline-editable custom fields, a vertical approver chain and a sticky Approve / Reject footer where Reject requires a comment.
The same risk shown as a docked side panel over the register (prev/next, Details / Related / Activity tabs) or expanded to a full page, switchable in place. Activity uses Asana-style Comments / All activity with approvals shown inline.
Column-laid graph (context → risk → control → objective → evidence, with a findings → CAPA lane) on a dotted canvas. Selecting a node highlights its chain and labels its edges, and the inspector lists relations with counts, coverage and downstream gaps. Includes type filters, "Filter by this", zoom / fit / reset, a minimap and a legend footer.
One lane per risk and one dashed container per record type, with relation lines between chips inside each lane. Shared many-to-many records carry a ×N badge and light up in every lane on hover or click, and coverage and gap counts roll up at the end of each lane.
Expandable tree from risks (or org context) down to evidence, findings and CAPA. Each parent rolls up "x of y" objectives met and the gaps beneath it, and gap rows are tinted with a reason pill. A stacked status bar and KPIs sit above, and the toolbar has a gaps-only filter and expand / collapse all.
Families | requirements | objective detail. Per-objective MET / NOT MET / N/A toggles roll up to the requirement and recompute SPRS and Conditional/Final status live; evidence and the C3PAO request thread sit under the selected objective.
Score header with sub-bars, family posture cards, a what-if SPRS calculator with POA&M eligibility per NOT MET item and the 180-day closeout clock, plus an ISO 27001 ↔ 800-171 evidence-reuse mapping tab.
External C3PAO assessor mode with no internal nav — only the engagement context bar, objective queue with status tabs, Examine / Interview / Test procedure checklist, evidence acceptance, determination and the auditee request thread, with prev/next.
Inherent vs residual 5×5 matrices with counts, tooltips and an appetite boundary per category; click a cell to list its risks, select one to see its movement arrow, treatment and tolerance check. Table ↔ Matrix toggle on the same data.
Five-step re-score of RSK-039: likelihood cards with criteria text, impact-by-dimension grid (worst wins), the matrix as a click-to-score input, ISO 31000 treatment plan, and an appetite check that routes to acceptance with expiry.
Versioned methodology draft: matrix size, multiply vs asymmetric lookup (800-30 I-2), editable score groups with actions and review cadence, scale text, appetite/tolerance per category, live preview and register impact.
FY2026 integrated audit program: KPI strip, 12-month calendar lanes by audit type, audit list with stage and checklist progress, risk-based coverage matrix, and a plan/scope drawer (criteria sets, team independence, sessions).
Fieldwork mode for AUD-2026-03: audit context bar, checklist grouped by clause with status tabs, integrated criteria per item, conformity toggle, evidence preview pane, and a Raise finding modal with Major / Minor / OFI radio cards.
Audit lifecycle stepper over a findings board by finding state (Draft → Closed) with grade filters and Advance, plus a report preview (conclusion, graded findings, conformity by area, sign-off) with an issue checklist.
CAPA-024 as a full page: clickable lifecycle stepper (Containment → Closed) with 5-Whys / fishbone RCA, linked Major NC, vertical approver chain and a sticky Reject / Request changes / Approve footer; reject requires a comment.
CAPA board with one column per lifecycle stage, finding grade and SLA on each card, a prev/next drawer holding the approver chain and gate decision, and a two-step "Submit for approval" approver picker.
My approvals queue: pick an item, review its evidence (fishbone, action plan, files) on the left and the CAPA, linked finding and approver chain on the right, then decide with Comment / Request changes / Approve and a Deny / Approve footer.
Internal template builder: numbered question list by section, live canvas, and a settings pane for type, required, evidence, weights, per-answer points with auto-flags, show-if rules and control mappings / custom fields. Logic and Scoring tabs show IF / AND / THEN rules and section weights.
External magic-link portal with stripped chrome only (title, segmented progress, Exit / Back / Next, no internal nav): one section per step with numbered question groups, radio cards, why-we-ask callouts, conditional follow-ups, uploads and a review-and-submit step.
Internal review of a submitted response: weighted section scores, auto-flagged answers, per-answer accept / follow-up / override with a clarification thread, and a vendor decision footer where rejection requires a comment.
POL-004 in a block editor: outline left, branded page canvas with live-data blocks (RACI, mapped controls) and inline comments, properties panel right. The header steps Draft → In review → Approved → Published with one next-step button; read-and-acknowledge and PDF / DOCX export sit in the panel.
Paginated print preview of the generated document: tenant logo, header / footer, document number, revision, classification marking and watermark, approval block. The panel switches document type (Policy, Plan, Procedure, Instruction, Guideline, Checklist), marking, page size and PDF / DOCX output.
v3.0 vs v2.4 redline (inline or side by side) with an earlier-version banner and Restore, a version rail separating published versions from autosaves, the approver chain and acknowledgment coverage by team, and a sticky Approve / Request changes / Reject footer where reject needs a comment.
Dense file register with freshness tabs (Verified / Due soon / Expired), "Reused in" framework chips and a persistent right pane: preview, freshness meter, scan integrity and the related frameworks and controls table. Upload dialog with drop zone + scan queue; "Request update" asks the owner.
Audit-package and smart collections in a second column, folders above files, a storage meter, grid/list toggle, "N items selected" with move-to-folder tree modal. The whole page is a drop target with a floating upload queue; cards open a split preview with mappings.
Evidence as a workflow: auditor, assessment and freshness-driven requests on a drag-and-drop board (Requested → In progress → Submitted → Accepted) with x-of-y KPIs. The drawer fulfills requests by drop-upload or by reusing a file that already proves other objectives, then Accept / Reject with a required comment.
Settings mode with a flat Plain-style nav. Branding is a full brand kit: light/dark and small logos, brand color with a live WCAG contrast check, PDF fonts, header/footer tokens, document markings and numbering, with live app + PDF previews. Also General (Clerk OrganizationProfile + tenant fields), custom fields / record types and data export.
Gumloop-style grouping. Members is the Clerk OrganizationProfile Members page (seats, bulk invite, invite expiry, join requests) with AegisERM app roles, teams and org-unit scope underneath. Custom roles editor with level cards, a Shopify permission tree and a compare matrix; Teams & org units; SSO & SCIM as the Clerk Security tab plus custom group → app-role mapping.
fal-style grouping with settings search. Hash-chained audit log with Verify chain, day groups, From → To diffs and expandable entries; Clerk <APIKeys/> with a scope → TenantDO permission map; webhooks with NOT VALIDATED badges, masked secrets, test-before-create and an expandable delivery log; billing with usage meters, a plan summary card and Clerk Billing invoices.
AegisERM owns the settings sidebar (Personal + Organization, "← Back to app"). Profile and Security mount Clerk <UserProfile/> with path routing and its navbar replaced by Account / Security tabs; Preferences and Notifications are custom routes next to the Clerk splat.
Clerk <UserButton/> with custom MenuItems (Preferences, Notifications pages; Theme, Shortcuts actions). "Manage account" opens the full UserProfile modal, extended with two <UserProfile.Page> custom pages after Account / Security, each labeled as custom-in-Clerk.
One in-app page: identity and org memberships, a security posture strip, the notification matrix (Personal vs Workspace) and compact preferences, with Clerk sections (sessions, personal API tokens, connected accounts) embedded individually as stand-ins.
Implementor view. Family → requirement → objective tree with "x of y" written/approved and an "assigned to me" filter | statement editor under the 800-171A determination text, with the inheritance chain (3.5 → 3.5.3 → [b], Override), inline [n] citation chips, responsibility (Organization / Shared / Inherited + provider + CRM note) and Submit for review | Sources panel with section anchors, freshness pills, a Command-style "Add source" picker and "Also satisfies" reuse chips.
GRC + implementor view. Statements compiled by family into PLN-002 System Security Plan §5, each requirement inline-editable with responsibility, status and evidence/policy chips, citations renumbered as footnotes per family. A sticky coverage outline, WRITER-style margin comments from the reviewer with reply / resolve, a Customer Responsibility Matrix toggle grouped by provider, and PDF / DOCX / OSCAL export.
Implementor view. My queue (returned, due this week, not started, in review; "x of y done") | Who / What / How / Where / When prompts assembled into a live statement preview, the reviewer comment on a returned item, a reusable ISO 27001 A.8.5 statement with Insert, a section-anchored source linker and evidence drop zone | quality rail with a score, checklist, warnings (expired vendor evidence, no evidence, unlinked CAPA-024) and what an assessor will Examine / Interview / Test.
Marcus's program cockpit: SPRS 71/110 and frameworks in x of y, statement coverage per CMMC family (written vs approved, owner, reassign flag) beside a Vanta-style assignment donut, implementor workload, an approvals queue with approve / return-with-comment, appetite breaches, assessor requests and upcoming audits.
Tom's focused work queue, not a dashboard: returned statements with the reviewer's comment and an inline Fix now editor gated on the who/what/how/where/when prompts, assessor requests, expiring evidence and cited documents, CAPA actions, then a Continue writing card with the next determination statement and My controls.
Rachel's engagement portal with a firm/assessor bar and no internal navigation: a multi-client engagement list (phase, objectives assessed, MET / NOT MET, open requests) driving a readiness check of statements per family, evidence request tracker, today's examine / interview / test schedule, sampling plan and recent determinations.