UX Spec — Securities Anomalies (search-ui)

This is the design-and-interaction reference for the fraud-heuristics front end (search-ui/, the public Securities Anomalies site at sec.atsignhandle.xyz). It defines tokens, layout, popups, controls, badges, charts, search, information hierarchy, and responsive behavior so new pages and popups stay visually consistent.

Relationship to the primary spec

The federation primary UX spec is gpumon — gpu.atsignhandle.xyz/ux-spec. That document governs the pastel-brutalist instrument-panel look (2px #1a1a1a borders, mono body, popup/overlay anatomy, badge-fill map, chart primitives) for the whole federation. When you build a new control or popup, follow the gpumon spec first.

This search-ui spec is the data-density extension of the primary spec — the same family gpumon documents under its "Postcrime Extension" section. Where gpumon is sparse telemetry cards, search-ui is dense corpus search, document reading, filtering, and expanded stats/charts. Concretely:

• Borrow from gpumon (unchanged): monospace body, hard 2px borders on primary surfaces, pastel accent semantics, FA-thin icons, dismiss-on-scrim/X/Escape modal behavior, no emojis.
• search-ui adds: a softer #d0d0d0 hairline border for dense tables, a serif display face (Playfair) for headings/landing, dark-mode, FTS5 search, document reading surfaces, and the 12-column stats grid.

If a control is not covered by the gpumon primary spec, it is defined here.

Design tokens — "Parque Towers" system

Defined in search-ui/src/app.css :root (dark-mode under [data-theme='dark']).

Base

Typography

• html { zoom: 0.9 }, font-size: 16px, antialiased.
• body { font-family: var(--font-mono); line-height: 1.6 }.
• Headings: mono, weight 700, line-height: 1.2, letter-spacing: -0.02em.
• Layout: --max-width: 1200px, --header-height: 60px, --transition: 150ms ease.

Category / source colors (pure pastel, distinct hues)

Neo-brutalist pastel palette (stats, badges)

--pastel-pink #FFB3D1, --pastel-mint #A8E6CF, --pastel-lemon #FFE787, --pastel-peach #FFCBA4, --pastel-lavender #C7B4E8, --pastel-sky #A4D4F2, --pastel-coral #FFB5A7, --pastel-lime #D4F1A8; --brutal-border #1a1a1a, --brutal-shadow 3px 3px 0 #1a1a1a.

Stats card pairs (bg / border)

Layout

• Shell: +layout.svelte provides a sticky header (--header-height) carrying the brand, primary nav, SearchInput, and NavSettings. Content centers within --max-width: 1200px.
• Routes (search-ui/src/routes/): / (landing), /[source], /anomalies, /anomalies/[source], /scheme, /scheme/[slug], /statutes, /statutes/[slug], /progress, /doc/[id], /stats. Server data via +page.server.ts; JSON under /api/* and /stats/api/*.
• Doc detail (/doc/[id]) is a split-pane: metadata/statute/party rail beside the PDFViewer (range-streamed PDF).

Popups and overlays

Follow the gpumon popup anatomy. search-ui instantiates three:

• Default state: all closed. Dropdowns open on click, not hover.
• Modal panel uses the hard 2px #1a1a1a border (gpumon rule), not the #d0d0d0 table hairline.
• Mobile (≤720px): anchored dropdowns become full-width sheets; the preview modal goes near-fullscreen (96vw, generous vertical padding).

Controls and default states

Badges and pills

• Badge.svelte — source/category chip; fill from the --cat-* source colors (DOJ lavender, SEC-PR sky, SEC-LR rose) or the pastel palette for stats.
• StatusChip.svelte — health/state chip (ok / warn / error), pastel fill, dark ink, used in NavSettings health row and /progress.
• FilterBadges — toggle pills; off = outline, on = filled accent.
• Section titles: mono, uppercase, letter-spaced, --fg-muted — same treatment as gpumon sidenav headings.

Charts (src/lib/charts/)

D3 + SVG, sharing d3-helpers.ts / gpumon-types.ts. These are the expanded stats/chart reference the gpumon spec points back to.

• Stroke/fill semantics inherit the gpumon palette; pastel fills for categorical series, --accent for the primary measure.
• Charts are render-only (no ax; sparklines especially) when embedded in rows.

Search

• Endpoint: POST /api/search (SQLite FTS5 over the corpus).
• Trigger: 3+ characters in SearchInput.
• Results: DocumentTable of DocumentRows; each row opens DocumentPreview or links to /doc/[id].
• Refinement: FilterBadges narrow by source / scheme / statute without re-querying text.

Information hierarchy

1. Search / filter (header) — entry point to the corpus.
2. Result table (DocumentTable) — scannable rows, source/statute badges.
3. Preview (DocumentPreview modal) — quick look without leaving results.
4. Document detail (/doc/[id]) — full split-pane read + metadata + PDF.
5. Aggregate views — /anomalies, /scheme, /statutes group the corpus; /stats is the cross-corpus analytic layer; /progress is operational.

Stats page grid

• 12-column responsive grid: full = 12, half = 6, third = 4.
• Cards use the mint / sky / cream / rose pairs above with the brutal border.
• Coverage bars collapse 2-col → 1-col on narrow screens.

Responsive breakpoints

Data-density layouts (this site) use more breakpoints than gpumon telemetry:

• 960px — drop to single content column; stats grid reflows.
• 900px — coverage / 2-up panels collapse to 1-up.
• 768px — header condenses; nav + search stack; dropdowns → sheets.
• 640px — table-dense views switch to stacked cards; honor orientation.

(For reference, gpumon's telemetry breakpoints are 1100 / 720 / 560.)

Rendering and serving

This page is rendered by search-ui/tools/render-docs.ts into search-ui/static/docs/ux-spec.html and served from the /docs site (sidenav is auto-built from docs/application/*.md). It follows the locked gpumon /docs style (see global CLAUDE.md "Documentation site style guide").