Proof-Forward UX Patterns

Patterns for building interfaces where evidence, verification, and audit are first-class concerns.

Audit Drawer

A slide-out panel showing the complete history of an entity — who changed what, when, and why.

When to use: Any detail view where users need to verify the history of changes.

import { Sheet } from '@gtcx/ui';
import { AuditTrail } from '@gtcx/templates';
 
<Sheet side="right">
  <Sheet.Trigger><Button variant="ghost">View History</Button></Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Header><Sheet.Title>Audit Trail</Sheet.Title></Sheet.Header>
    <AuditTrail events={auditEvents} />
  </Sheet.Content>
</Sheet>

Evidence Panel

A sidebar or section that displays supporting documents, attachments, and verification artifacts alongside a decision point.

When to use: Approval workflows, review screens, compliance checks.

<ResponsiveGrid columns={{ xs: 1, lg: '2fr 1fr' }} gap={24}>
  <div>
    {/* Decision form */}
    <Form>
      <Form.Item label="Decision">
        <Select options={[{ value: 'approve' }, { value: 'reject' }]} />
      </Form.Item>
    </Form>
  </div>
  <div>
    {/* Evidence panel */}
    <Card>
      <h4>Supporting Documents</h4>
      {documents.map(doc => <DocumentLink key={doc.id} {...doc} />)}
    </Card>
  </div>
</ResponsiveGrid>

Status Indicators

Clear, unambiguous visual indicators for entity states.

Status	Color	Badge
Active / Verified	Green (`success`)	`<Badge variant="success">Active</Badge>`
Pending / Under Review	Amber (`warning`)	`<Badge variant="warning">Pending</Badge>`
Rejected / Failed	Red (`error`)	`<Badge variant="error">Rejected</Badge>`
Draft / Inactive	Gray (`default`)	`<Badge>Draft</Badge>`

Trust Gradient Pattern

Progressive disclosure of detail:

Level 1: Summary Card    → KPI value, trend, status badge
Level 2: Detail View     → Full data, sections, related entities
Level 3: Audit Trail     → Timeline of changes, attributions
Level 4: Source Documents → Attached files, raw records, certificates

Each level links to the next. Users can drill as deep as needed to build confidence.

Timestamp Attribution

Every record should display:

Who: User or system that made the change
When: Relative time ("2 hours ago") with absolute on hover ("Feb 19, 2026 14:30 UTC")
What: Clear description of the action taken

<p>
  Approved by <strong>Jane Doe</strong>
  <Tooltip content="February 19, 2026 at 14:30 UTC">
    <span className="text-muted"> 2 hours ago</span>
  </Tooltip>
</p>

Verification Badges

For entities that have been verified through external systems:

<Badge variant="success" icon={<CheckCircle />}>
  Verified via National Registry
</Badge>

Include the source of verification — not just "Verified" but "Verified via [source]".

Design Principles ADR-0001 Template