Evidentium: Developer Handoff & Technical Specification

1. Design System Foundations

Brand Identity: High-trust, institutional, authoritative.

Core Color Palette:

  • Primary: #1a3050 (Deep Navy) - Used for brand identity, sidebar, and primary actions.
  • Surface: #f8f9fb (Light Gray) - Background for main content areas.
  • Outline: #d9dadc - Border color for cards and structural separation.
  • Success: #4caf50 - "Fulfilled" status and "Verify Alignment" actions.
  • Error/Crisis: #d32f2f - "Contradicted" status, flagging actions, and crisis support.

Typography:

  • Headings: Playfair Display (Serif) - Used for page titles and high-level headers to convey legal authority.
  • Body/UI: Inter or Sans-Serif stack - Used for legibility in data-dense areas (Matrix, Verification Queue).

2. Shared Component Logic

Side Navigation (SideNavBar)

  • Structure: Fixed left-hand rail.
  • Brand: Features the "E" Monogram logo (Pillar/Scale metaphor).
  • Active State: Primary navy background with high-contrast text and a left-accent indicator.

Global Header (TopNavBar)

  • Search: Scoped to "Matters" or "Evidence".
  • Primary Action: "New Matter" - consistently positioned top-right.

3. Key Functional Modules

A. Document Coverage Matrix (SCREEN_4)

Replaces "Evidence Sufficiency" to adhere to LABE guardrails.

  • Entity Mapping: Rows must map to DocumentCategory (Medical Reports, Employment Records) rather than legal conclusions.
  • Status States:
    • Fulfilled: Document present and verified.
    • Gap: Required document category missing.
    • Contradicted: Conflicting information detected across ingested documents.
  • Interactions: "View Evidence" opens the filtered document list; "Request Review" triggers a workflow for the assigned counsel.

B. Split-Pane Verification (SCREEN_2)

  • Layout: 1:1 Split-pane (stacked on mobile).
  • Data Integration:
    • Left Pane: Extracted Event details (event_date, confidence_score, legal_relevance).
    • Right Pane: PDF/Document Viewer displaying source_page and highlighting the source_excerpt.
  • Primary Actions:
    • Verify Alignment: Confirms the extraction matches the source.
    • Flag Contradiction: Marks a discrepancy for manual review and triggers the Crisis Resource logic if applicable.

C. Crisis Contextual Integration

  • Trigger: Displayed when high-stress evidentiary gaps or contradictions are identified (e.g., in Medical Reports or Incident Proof).
  • Components: Crisis Support Cards with direct "Call Now" actions for Lifeline, Beyond Blue, and 13YARN.

4. Implementation Notes (Tailwind / Frontend)

  • Grid System: 12-column responsive grid with 24px gutters.
  • Rounding: ROUND_EIGHT (8px) for cards and UI components to balance modern UI with institutional stability.
  • Accessibility: Ensure contrast ratios for #1a3050 against white surfaces meet WCAG AA standards.

devicesMatter Detail - Document Coverage Matrix (Revised)