---
version: alpha
name: Evidence Office
description: Institutional data desk. Cool neutrals, one civic blue, mono numerics, everything comparable at a glance.
meta:
  id: "theme-evidence-office"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: A civic records office that happens to render fast
  bestFor: Data-dense home screens, comparison tables, admin consoles, research tools, internal platforms
  avoidFor: Consumer marketing pages, playful brands, image-led storytelling
  defaultMode: light
  surfaceStyle: outline
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 2
    duration: 120ms
    ease: "cubic-bezier(0.16, 1, 0.3, 1)"
    signature: "A row fills with secondary on hover. Nothing translates, nothing scales."
  displayFont: Inter Tight
  displayKind: sans
  bodyFont: Inter
  monoFont: IBM Plex Mono
colors:
  background: "#F3F5F8"
  foreground: "#101820"
  card: "#FFFFFF"
  card-foreground: "#101820"
  popover: "#FFFFFF"
  popover-foreground: "#101820"
  primary: "#1F4FA8"
  primary-foreground: "#FFFFFF"
  secondary: "#E5EAF0"
  secondary-foreground: "#2A3742"
  muted: "#E5EAF0"
  muted-foreground: "#56636F"
  accent: "#8A6520"
  accent-foreground: "#FFFFFF"
  destructive: "#B32318"
  destructive-foreground: "#FFFFFF"
  border: "#CDD6E0"
  input: "#CDD6E0"
  ring: "#1F4FA8"
  chart-1: "#1F4FA8"
  chart-2: "#2E7D6B"
  chart-3: "#8A6520"
  chart-4: "#6B4CA8"
  chart-5: "#3E4C5A"
colorsDark:
  background: "#0C1015"
  foreground: "#E7EDF3"
  card: "#131A21"
  card-foreground: "#E7EDF3"
  popover: "#131A21"
  popover-foreground: "#E7EDF3"
  primary: "#7FA8F0"
  primary-foreground: "#06152E"
  secondary: "#1D262F"
  secondary-foreground: "#DCE4EC"
  muted: "#1D262F"
  muted-foreground: "#9AA8B6"
  accent: "#D2A85A"
  accent-foreground: "#1A1204"
  destructive: "#F2756A"
  destructive-foreground: "#2A0806"
  border: "#2B3641"
  input: "#2B3641"
  ring: "#7FA8F0"
  chart-1: "#7FA8F0"
  chart-2: "#5EC2A6"
  chart-3: "#D2A85A"
  chart-4: "#A990E8"
  chart-5: "#9AA8B6"
typography:
  display-lg:
    fontFamily: Inter Tight
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Inter Tight
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Inter Tight
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label-caps:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.09em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
  data-md:
    fontFamily: IBM Plex Mono
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.3
    fontFeature: "'tnum' 1"
  numeral-xl:
    fontFamily: IBM Plex Mono
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 14px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  gutter: 16px
  margin: 24px
  row: 56px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 10px
  button-ghost:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 10px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 20px
  row-record:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    height: 56px
  stat-value:
    typography: "{typography.data-md}"
    textColor: "{colors.foreground}"
---

# Evidence Office

## Overview

Evidence Office is a public records desk rendered as software. Nothing shouts.
Every item on screen carries the same handful of measured attributes in the same
positions, so a person can scan a column and compare instead of reading.

The design goal is *fast lateral comparison*. If a user has to read a card to
learn its numbers, the layout failed. Use this when the product's job is helping
someone weigh many similar things: listings, records, submissions, runs, results.

Personality: calm, institutional, unembellished, quietly precise.

## Colors

A cool neutral stack with one civic blue and one archival amber.

- **Primary (#1F4FA8):** Civic blue. Actions, active filters, links. Used as a
  fill only on the single most important action; elsewhere it is text.
- **Accent (#8A6520):** Archival amber. Marks *evidence* — source counts, cited
  figures, verification badges. It is a semantic colour, not decoration.
- **Neutral (#F3F5F8 / #FFFFFF):** Cool page, white panels. The whole system
  relies on this small step to separate content from chrome.
- **Muted foreground (#56636F):** The metadata voice. Labels and secondary
  values live here so the primary value is always the darkest thing in its row.

## Typography

Inter Tight for structure, Inter for prose, IBM Plex Mono for anything numeric.

- **Headlines:** Inter Tight 600 with negative tracking. Modest sizes — this is
  not a system that shouts in display type.
- **Body:** Inter 15px / 1.55. Descriptions are one line, sometimes two, never
  three.
- **Labels:** Inter 11px uppercase, `0.09em` tracking, always in
  `muted-foreground`. Every attribute in a row is labelled.
- **Data:** IBM Plex Mono with tabular figures (`tnum`). Counts, prices, ratios,
  ranks and timestamps are mono without exception, so columns align optically.

## Layout

A record-row layout, not a card grid. Rows are fixed-height (56px) with a
consistent column order: rank → identity → signal set → evidence count → action.
Because the columns never move, the eye can travel straight down any one of them.

Desktop is a 3-zone shell: 220px filter rail, fluid record column, 320px context
panel. Below 1024px the context panel collapses above the list, and the signal
set wraps to two lines rather than truncating — truncated numbers are useless.

Spacing is a strict 8px scale; 16px is the default gutter. Density is a feature.

## Elevation & Depth

Flat by policy. Depth is expressed with **1px outlines and the page/panel tonal
step**, never shadows. A hovered row gets a `secondary` background, not a lift.
Overlays (dialog, popover) are the only elements permitted a shadow, and it is a
single soft shadow used purely to signal "this is above the page".

## Shapes

Moderately soft: 10px on panels, 8px on rows, buttons and inputs, 6px on badges.
Enough radius to feel like current software, not enough to feel consumer.
Avatars and status dots are the only fully round shapes.

## Components

- **Buttons:** primary is a blue fill at 8px radius, 10px/16px padding. All other
  buttons are white with a 1px border. No shadows, no gradients.
- **Record rows:** white, 1px border, 8px radius, 56px tall. Hover fills with
  `secondary`. The rank numeral is mono and left-most.
- **Signal set:** a horizontal group of label/value pairs — uppercase label above
  a mono value. This is the component the whole system is built around.
- **Filter chips:** pill-free. 6px radius, 1px border, `aria-pressed`, filled
  with `secondary` when active and blue-texted.
- **Tables:** 1px row separators, no vertical rules, no zebra striping. Numeric
  columns right-aligned and mono.
- **Charts:** one series per colour from `chart-1..5`, 1px gridlines in `border`,
  no area gradients.

## Do's and Don'ts

- Do label every number. An unlabelled figure is noise.
- Do keep column order identical across every row and every breakpoint.
- Do use mono + `tnum` for anything a user might compare.
- Don't use the blue fill more than once per screen region.
- Don't add shadows to in-page content; only overlays float.
- Don't truncate numeric values to make a row fit — wrap the row instead.
- Don't decorate with the amber. It means "there is evidence here" and nothing else.