Skip to content

Mock Reference

The institution detail page's reference design lives in institution-detail-mock-v4.html. It was produced in the 19 May chat session and committed to the main repo at docs/design/institution-detail-mock-v4.html.

For the page's structural decision, see ADR-0002.

For the visual design tokens, see Design system.

What the mock is

A complete, self-contained HTML file rendering the institution detail page (/institution/:lei) with placeholder data. Standalone — open in any browser, no build step.

The mock is the visual reference for the build. It is not the production template. When CC-on-VM builds the page, it adapts the mock's HTML structure into EJS/Handlebars templates with DB-driven content.

What's placeholder, what's real

Reading the mock, the following are placeholder and will be replaced with DB joins at build time:

  • Pillar weights (40/25/35 in the mock). Actual values come from blend_weight table. Current seed has E=0.40, S=0.30, G=0.30.
  • Shareholder names. Manual intake data; schema for this still TBD.
  • Score history. Will come from joining score_stage1_esg across runs for the same institution.
  • Specific scores and percentages. Placeholder for visual purposes; actual numbers come from DB.

The following are real design decisions baked into the mock:

  • Two-column layout (main + sidebar)
  • Hero panel with two equally-weighted numbers
  • Pillar breakdown as three boxes
  • Filter pills above the rule table
  • Theme grouping in the rule table (per ADR-0005)
  • Financial Institutions Supplement zone visually distinct
  • Cream paper palette + dusty RAG palette
  • Inter typography throughout

Iteration history

The mock went through four versions in the 19 May chat session. Key shifts:

Version Change
v1 Single hero number (just the score)
v2 Hero promoted coverage to co-equal — two equally-weighted numbers
v3 Added Financial Institutions Supplement zone for Stage 2
v4 Filter pills + theme grouping in rule table (per ADR-0005)

Subsequent iteration during the build is expected — mock v4 is the starting point, not the final word.

Where the mock lives

In the main repo:

docs/design/institution-detail-mock-v4.html

To view: clone the repo and open the file in a browser, or render it via the ops site if the build pipeline copies it into the published assets.

This ops site does not embed the mock directly — it's a 37 KB self-contained HTML, easier to view standalone than iframe.

When to update the mock

Update only when:

  • The page structure changes materially (a new panel added, an existing panel restructured)
  • The design tokens change substantially (palette refresh, typography shift)

Not for:

  • Tweaks during the build itself (those happen in the EJS/Handlebars templates, not the mock)
  • Bug fixes (those happen in the templates)
  • Placeholder data updates (the placeholders aren't authoritative; the DB is)

If a mock update lands, version-bump (v5) and update this page's references.

What the mock is NOT

  • Not the source of truth for layout details. ADR-0002 specifies the page structure in prose; the mock illustrates it. If the prose and mock disagree, the prose wins.
  • Not the production page. The production page reads live DB data; the mock has placeholders.
  • Not for the other UI pages. The mock covers only /institution/:lei. Other pages (/, /methodology, /runs, /watchlist) don't have mocks yet. They use the same design system, but visual decisions for those pages happen during their respective build cycles.

Other pages — design intent (no mock yet)

In the absence of mocks for the other pages, the build follows these intents:

/ (Institution index)

Compact tabular list. Cream paper background, single-column with left-aligned data table. RAG-coloured score and coverage columns. Click a row → go to detail page. Top of page has filter row above the table (sector, red flag state, coverage band).

/methodology

Three vertically-stacked sections (per ADR-0003):

  1. Scoring explainer — prose text, no tables. Reads like an essay. Links to ADRs for deeper detail.
  2. Source register — wide table, one row per source. Per ADR-0003 columns. External link icons next to source names.
  3. Rule catalogue — wide table, one row per rule, grouped by pillar and sub-criterion with section dividers.

/runs

Tabular log, reverse-chronological. Each row expandable to show per-source breakdown. Inline mini-charts not in v1 — pure tables.

/watchlist

Card-grid layout, one card per finding. Cards group by institution (institution name as section header). Each card has source badge, finding summary, observed timestamp.

These intents may be revised when their build cycles begin; treat them as starting points, not contracts.