---
version: alpha
name: KKVault Evidence Control System
description: A dense, trustworthy visual system for operational data flows, evidence review, transaction intelligence, and executive decision support.
colors:
  primary: "#5AA9FF"
  canvas: "#07111F"
  canvas-deep: "#040A12"
  surface: "#0E1A2B"
  surface-raised: "#14243A"
  surface-overlay: "#1A2E49"
  border: "#29415F"
  border-strong: "#3B5D84"
  text-primary: "#F2F7FF"
  text-secondary: "#B7C7DC"
  text-muted: "#8095B3"
  brand-gold: "#E9B95B"
  data-cyan: "#42D6CD"
  model-purple: "#A78BFA"
  status-success: "#43CC8A"
  status-warning: "#F2BC4D"
  status-danger: "#FF6B79"
  status-neutral: "#93A7C2"
  review-canvas: "#F4F1EA"
  review-surface: "#FFFDF8"
  review-text: "#202731"
typography:
  display:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 32px
    fontWeight: 760
    lineHeight: 1.18
    letterSpacing: -0.02em
  headline:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  title:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 15px
    fontWeight: 650
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0em
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.04em
  metadata:
    fontFamily: "SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0.01em
    fontFeature: "tnum"
rounded:
  control: 8px
  card: 12px
  panel: 16px
  hero: 20px
  full: 9999px
spacing:
  micro: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  page-gutter: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas-deep}"
    rounded: "{rounded.control}"
    padding: 12px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.control}"
    padding: 12px
    height: 44px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.card}"
    padding: 16px
  panel:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.panel}"
    padding: 24px
  status-chip:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.full}"
    padding: 8px
  page-canvas:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-primary}"
  divider:
    backgroundColor: "{colors.border}"
    width: 1px
  focus-ring:
    backgroundColor: "{colors.border-strong}"
    size: 3px
  metadata:
    backgroundColor: transparent
    textColor: "{colors.text-muted}"
    typography: "{typography.metadata}"
  evidence-chip:
    backgroundColor: "{colors.brand-gold}"
    textColor: "{colors.canvas-deep}"
    rounded: "{rounded.full}"
  data-chip:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.data-cyan}"
    rounded: "{rounded.full}"
  model-chip:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.model-purple}"
    rounded: "{rounded.full}"
  status-success:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.status-success}"
    rounded: "{rounded.full}"
  status-warning:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.status-warning}"
    rounded: "{rounded.full}"
  status-danger:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.status-danger}"
    rounded: "{rounded.full}"
  status-neutral:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.status-neutral}"
    rounded: "{rounded.full}"
  evidence-review:
    backgroundColor: "{colors.review-canvas}"
    textColor: "{colors.review-text}"
    rounded: "{rounded.panel}"
  evidence-review-sheet:
    backgroundColor: "{colors.review-surface}"
    textColor: "{colors.review-text}"
    rounded: "{rounded.card}"
---

# KKVault Evidence Control System

## Overview

KKVault is a high-density operational and evidence system, not a marketing site. Its interface should feel like an executive control room joined to an evidence ledger: calm under pressure, information-rich, traceable, and honest about uncertainty.

The design system serves four page modes:

- **Control room:** high-density live operations, channel health, queues, and alerts.
- **Analytical overview:** trends, comparisons, classifications, and drill-down entry points.
- **Evidence review:** long-form documents, versions, legal and financial evidence, and audit trails.
- **Mobile focus:** a deliberately reduced subset of the desktop workflow.

Rule precedence is `CLAUDE.md > AGENTS.md > DESIGN.md > page-local styles`. This file defines visual intent and tokens only. It must not change data truth, provenance, API contracts, routes, DOM identifiers, writer locks, permissions, or approval boundaries.

Migration state:

| State | Routes or page families | Rule |
|---|---|---|
| `frozen` | `/pipeline` | Preserve the restored production layout. Only explicit, entry-level, reversible additions are allowed. |
| `pilot` | `/txn-overview`, `/design-system` | Use these pages to prove tokens, components, charts, accessibility, and responsive behavior. |
| `next` | `/txn`, `/merge` | Migrate only after the pilot is accepted, without changing business logic. |
| `specialized` | WPS, dictionary, evidence review, approval pages | Keep the specialized review mode; share semantics and tokens without forcing a dark control-room skin. |
| `legacy` | Old task-board and low-use utility pages | Do not spend migration effort until the page is actively touched. |

## Colors

Use tonal layers, borders, and spacing for hierarchy. Status colors carry meaning and must not be used as decoration.

- **Canvas / deep canvas:** deep navy foundations for operational pages; avoid pure black.
- **Surface / raised / overlay:** progressive slate layers for cards, panels, popovers, and selections.
- **Brand gold:** KKVault identity, evidence provenance, and important decisions. It is not a warning color.
- **Data cyan:** ingestion, flow, processing, and measured movement.
- **Action blue:** links, filters, selection, and drill-down actions.
- **Model purple:** AI, model routing, automated review, or inference only.
- **Success / warning / danger:** factual health and severity only. Never make a decorative gradient from these colors.
- **Neutral:** unknown, not applicable, incomplete, or not yet observed.
- **Review palette:** warm light surfaces for document reading where long-form legibility matters.

Charts must include labels, legends, or patterns. Never communicate a state by color alone. Missing time samples remain gaps; they are not plotted as zero.

## Typography

Use the native Chinese system stack for reliability and fast rendering. Use the monospace metadata style only for timestamps, hashes, IDs, paths, counters, and technical diagnostics.

- Display text is concise and used once per page.
- Section headlines describe a decision or dataset, not a decorative theme.
- Body text remains readable at high density with 1.65 line height.
- Metadata is compact but never lower than 11px on desktop.
- Comparable numbers use tabular numerals and consistent alignment.
- Avoid long all-caps English labels; use short bilingual context only where it improves scanning.

## Layout

Use a fluid 12-column grid on desktop with a practical max width around 1800px for large control-room displays. Follow an 8px spacing rhythm with a 4px micro-step.

- Major page gutters: 24px desktop, 16px tablet, 12–14px mobile.
- Major panel gaps: 16–24px.
- Card padding: 16px; major panels: 24px.
- Group source units, fragments, candidate relations, formal relations, and business conclusions into visibly separate layers.
- Prefer overview first, then exceptions, then drill-down. Do not begin a page by laying out every transaction card.
- Mobile layouts collapse by priority. Tables become scoped cards or horizontal scroll regions; do not shrink desktop walls until unreadable.

Data-density rule: every repeated card must answer a distinct scanning question. If many cards compete equally, replace them with a summary, matrix, ranked list, or drill-down.

## Elevation & Depth

Create depth primarily through tonal layers and one-pixel borders. Use shadows sparingly on hero panels, modal surfaces, or focused floating controls.

- Cards: subtle border, minimal shadow.
- Major panels: stronger border or tonal separation, not both a heavy border and a heavy shadow.
- Focused overlays: a contained shadow with no large glow.
- Status glow is permitted only for a tiny live indicator and must not reduce text contrast.

## Shapes

Use restrained, consistent rounding:

- Controls: 8px.
- Cards: 12px.
- Major panels: 16px.
- Hero or singular feature surfaces: up to 20px.
- Pills: filters, compact status chips, or short metadata only.

Do not mix many unrelated radius values on one page. Keep icons geometric and simple; prefer line or restrained filled icons over emoji walls.

## Components

### Navigation and entry points

- A new page gets an independent route and an explicit back path.
- An “add entry” request must not replace the existing destination page.
- The active location is visible without relying only on color.

### Buttons

- Primary: one dominant action per region, blue background, 44px minimum height.
- Secondary: slate surface and visible border.
- Destructive: red only when the action is genuinely destructive and confirmed.
- Every keyboard-focusable control needs a visible `focus-visible` ring.

### Cards and KPI tiles

- A KPI tile contains one value, one unit, one time/source boundary, and one interpretation hint.
- Place comparisons next to the current value; do not hide denominator changes.
- Use cards for grouping, not as the default wrapper for every sentence.

### Tables and matrices

- Keep headers visible and units explicit.
- Align numeric columns and use tabular numerals.
- Use row hover only when the row is interactive.
- Preserve source-native units instead of summing incompatible units into one misleading total.

### Charts

- Show source, time window, sampling gaps, and unit.
- Keep status colors out of non-status series.
- Provide text summaries for the primary insight.
- Hourly charts use the project timezone and display missing hours as missing.

### Status and provenance

- Every status chip maps to a real machine or business state.
- `unknown` and `candidate` are valid conservative outcomes, not visual failures.
- Separate fragment governance, transaction truth, business acceptance, and Obsidian projection.
- A healthy visual cannot hide a failing audit.

### Motion and feedback

- Interaction transitions: 150–200ms.
- Use motion to explain selection, loading, or drill-down—not to decorate idle dashboards.
- Honor `prefers-reduced-motion: reduce`.
- Loading, empty, stale, partial, error, and permission-blocked states must be designed explicitly.

## Do's and Don'ts

- Do read this file before every KKVault page, dashboard, HTML, CSS, component, or visualization task.
- Do capture the target route and protected SHA before editing.
- Do label demo data, partial coverage, stale snapshots, and missing history.
- Do preserve specialized light evidence-review pages where they improve reading.
- Do verify desktop, tablet, and mobile behavior.
- Don't replace `/pipeline` or any existing route when the request is to add an entry.
- Don't invent a new palette, font stack, radius scale, or status color per page.
- Don't copy a third-party product's full visual identity, logo, or proprietary font.
- Don't convert a file count into a business conclusion or make incompatible source units look additive.
- Don't use a polished chart to imply data exists when the history is absent.
- Don't change API, business, provenance, permission, or writer-lock behavior under the label of visual cleanup.