name: traceline-design
version: alpha
description: >
  Traceline is a dark, forensic investigative-graph workspace — an OSINT/"follow
  the money" link-analysis tool rendered as a three-pane intelligence console.
  A near-black blue-graphite surface (`#0E1217`→`#141A21` gradient) is overlaid
  with a 32px crosshatch evidence grid; every panel is separated by faint 12%
  hairlines rather than shadows. The system is built on a four-color entity
  taxonomy — company blue `#5E9BE0`, person coral `#E86A56`, property green
  `#4FB985`, trust gold `#C79A4E` — over off-white `#E8EAED` ink. Type is a pure
  IBM Plex pairing: Plex Sans for labels, Plex Mono for IDs, hashes, counts, and
  every coordinate readout. The signature moves are a force-directed SVG node web
  with curved strands and a pulsing selection halo, mono uppercase micro-labels,
  count pills, and a horizontal provenance breadcrumb. Geometry is small-radius
  and pill: 8–10px rounded panels, fully-round chips and dots, square data ticks.
colors:
  # Entity taxonomy (the four "voltages")
  company: '#5E9BE0'      # company nodes, blue tag dots
  person: '#E86A56'       # person nodes, coral; also the primary/selected focus + accent buttons
  property: '#4FB985'     # property nodes, green; "live"/verified status, sync dot
  trust: '#C79A4E'        # trust nodes, gold
  # Surface
  page: '#0E1217'         # darkest base of body gradient + evidence-grid base
  page-2: '#141A21'       # lighter end of the 160deg body gradient
  cream: '#10151B'        # primary panel fill (rails, tooltip) — note: class is .cream despite dark value
  ink: '#1A2028'          # .ink — top bar + provenance strip + accent buttons (RM avatar)
  surface-raised: '#1E242C' # selected-entity summary block in right rail
  surface-chip: '#171D24' # canvas toolbar chips / legend (used at /90 + backdrop-blur)
  # Text
  text: '#E8EAED'         # primary ink (off-white) for body, labels, headings, icons
  text-on-light: '#15171A' # dark text on inverted (#E8EAED) buttons / pills
  # Hairlines (all derived from text at low alpha)
  hairline: 'rgba(232,234,237,0.12)'   # standard 1px panel separators
  hairline-strong: 'rgba(232,234,237,0.18)' # btn-ghost border
  hairline-soft: 'rgba(232,234,237,0.04)' # evidence-grid lines, row hover, tinted card fills
typography:
  brand:
    fontFamily: '"IBM Plex Sans", sans-serif'
    fontSize: 11px
    fontWeight: 600
    letterSpacing: 0.18em
    textTransform: uppercase
  section-label:
    fontFamily: '"IBM Plex Sans", sans-serif'
    fontSize: 10px
    fontWeight: 600
    letterSpacing: 0.18em
    textTransform: uppercase
  entity-name:
    fontFamily: '"IBM Plex Sans", sans-serif'
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.1
  note-body:
    fontFamily: '"IBM Plex Sans", sans-serif'
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
  ui:
    fontFamily: '"IBM Plex Sans", sans-serif'
    fontSize: 11px
    fontWeight: 400
  mono:
    fontFamily: '"IBM Plex Mono", monospace'
    fontSize: 11px
    fontWeight: 400
  mono-micro:
    fontFamily: '"IBM Plex Mono", monospace'
    fontSize: 9px
    fontWeight: 400
  count-pill:
    fontFamily: '"IBM Plex Mono", monospace'
    fontSize: 10px
    fontWeight: 400
rounded:
  xs: 3px        # kbd, small status pills
  sm: 6px        # rounded-md buttons, note attachment cards
  md: 8px        # jurisdiction selector, btn-ghost effectively pill
  lg: 10px       # panels: query card, legend, provenance strip
  full: 9999px   # chips, tag dots, node circles, avatar, search bar
spacing:
  # base unit 4px; dense console scale
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  '2xl': 20px
components:
  topbar:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text}'
    height: '48px'
    padding: '0 16px'
  nav-tab-active:
    backgroundColor: 'rgba(232,234,237,0.10)'
    textColor: '{colors.text}'
    typography: '{typography.ui}'
    rounded: '{rounded.sm}'
    padding: '4px 8px'
  search-bar:
    backgroundColor: 'rgba(232,234,237,0.08)'
    textColor: '{colors.text}'
    border: '1px solid {colors.hairline}'
    typography: '{typography.mono}'
    rounded: '{rounded.full}'
    height: '32px'
    padding: '0 12px'
  kbd:
    textColor: 'rgba(232,234,237,0.7)'
    typography: '{typography.mono-micro}'
    border: '1px solid rgba(232,234,237,0.25)'
    rounded: '{rounded.xs}'
    padding: '1px 5px'
  btn-ghost:
    border: '1px solid {colors.hairline-strong}'
    textColor: '{colors.text}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.full}'
    padding: '4px 10px'
  btn-accent:
    backgroundColor: '{colors.person}'
    textColor: '{colors.text}'
    typography: '{typography.count-pill}'
    rounded: '{rounded.sm}'
    padding: '4px 12px'
  btn-invert:
    backgroundColor: '{colors.text}'
    textColor: '{colors.text-on-light}'
    typography: '{typography.count-pill}'
    rounded: '{rounded.sm}'
    padding: '4px 10px'
  facet-row:
    typography: '{typography.ui}'
    textColor: '{colors.text}'
    padding: '6px 0'
  count-pill:
    textColor: 'rgba(232,234,237,0.55)'
    typography: '{typography.count-pill}'
  query-card:
    backgroundColor: 'rgba(232,234,237,0.03)'
    border: '1px solid {colors.hairline}'
    textColor: '{colors.text}'
    typography: '{typography.mono}'
    rounded: '{rounded.lg}'
    padding: '12px'
  canvas-chip:
    backgroundColor: '{colors.surface-chip}'
    border: '1px solid {colors.hairline}'
    textColor: '{colors.text}'
    typography: '{typography.count-pill}'
    rounded: '{rounded.full}'
    padding: '4px 12px'
    backdropFilter: 'blur'
  legend:
    backgroundColor: '{colors.surface-chip}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.lg}'
    padding: '12px'
    backdropFilter: 'blur'
  provenance-strip:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text}'
    typography: '{typography.mono}'
    rounded: '{rounded.lg}'
    elevation: '0 2px 4px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.12)'
  entity-summary:
    backgroundColor: '{colors.surface-raised}'
    textColor: '{colors.text}'
    typography: '{typography.entity-name}'
    padding: '12px 16px'
  stat-tile:
    border: '1px solid {colors.hairline}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.xs}'
    padding: '6px'
  note-card:
    typography: '{typography.note-body}'
    textColor: '{colors.text}'
    # left timeline dot: 10px #E8EAED circle on a 1px rgba(.2) rail
  note-attachment:
    backgroundColor: 'rgba(232,234,237,0.03)'
    border: '1px solid {colors.hairline}'
    typography: '{typography.mono-micro}'
    rounded: '{rounded.sm}'
    padding: '8px'
  graph-node:
    fill: '{colors.person}'    # color per entity taxonomy
    stroke: '{colors.text}'
    strokeWidth: '1–1.5px'
    # radius 5–14px ∝ betweenness centrality
  graph-edge:
    stroke: '{colors.text}'
    strokeWidth: '1px'
    opacity: '0.25 (lit: 1.0 @ 1.5px)'
motion:
  haloPulse: 'selected-node halo — 2.4s ease-in-out infinite; opacity 0.4→0.1, r 22→32'
  hover-transitions: 'nav tab / btn-ghost / dataset-row hover color & bg swaps (CSS :hover, no explicit duration)'
  dim-lit: '.dim opacity 0.4 / .lit opacity 1 utility classes for graph focus emphasis'
icons:
  library: Tabler Icons (webfont, ti-*)
  style: outline
  sizes: { xs: 11px, sm: 12px, md: 13px, lg: 14px }
  color: '{colors.text}' # often at reduced alpha (/55–/65); colored variants use c-company/c-person/c-property

Traceline

traceline-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Traceline is a forensic link-analysis console — the "Filament" investigative graph (v2.4) for tracing offshore ownership across leaked datasets. It is a single full-viewport, three-pane layout that never scrolls the body: a 48px top bar, a 260px filters rail, a flexible graph canvas, and a 320px evidence-log rail. The surface is a deep blue-graphite: the body is a 160deg gradient from #0E1217 to #141A21, panels sit on #10151B (.cream) and the chrome bars on #1A2028 (.ink), all separated by 1px rgba(232,234,237,0.12) hairlines instead of shadows. The canvas carries a 32px crosshatch "evidence grid." The whole system runs on an off-white ink #E8EAED plus a four-color entity taxonomy that is the heart of the design: company blue #5E9BE0, person coral #E86A56 (also the primary focus + accent buttons), property green #4FB985 (also "live"/verified), and trust gold #C79A4E. Type is an all-IBM-Plex pairing — Plex Sans for labels and notes, Plex Mono for every ID, hash, count, coordinate and query string. The signature moves: a force-directed SVG node graph with curved Bézier strands, mono rotated edge labels (owner-of · 78%), a pulsing coral selection halo, and a horizontal provenance breadcrumb chaining source → leak → folder → file → entity. Everything is dense, tiny (8–15px), uppercase-tracked, and instrument-like.

Colors

Entity taxonomy (the four voltages). The defining palette is four entity-type colors used identically for node fills, legend dots, tag dots, and avatar rings: company #5E9BE0 (blue), person #E86A56 (coral), property #4FB985 (green), trust #C79A4E (gold). Coral doubles as the product accent — the selected/focus node, its halo, the RM avatar, the "View Source Document" CTA, and FOCUS / Provenance status dots. Green doubles as the positive signal (SYNC dot, live, verified).

Surface. The body is a linear-gradient(160deg, #0E1217 0%, #141A21 100%). Panels (left/right rails, search field area, tooltip) use .cream = #10151B (named "cream" but dark). Chrome bars — the header and provenance strip — use .ink = #1A2028. The selected-entity summary block is raised to #1E242C. Floating canvas chips and the legend use #171D24 at 90% opacity with backdrop-blur. The evidence grid base is #0E1217.

Text. One ink color, off-white #E8EAED, drives all text, icons, and node strokes; muted variants are alpha steps (/80, /65, /55, /45, /40). Inverted buttons (full #E8EAED fill) use dark text #15171A.

Hairlines. All borders derive from the ink at low alpha: rgba(232,234,237,0.12) standard, 0.18 for ghost-button borders, 0.04 for the crosshatch grid lines, row-hover washes, and tinted card fills (bg-[#E8EAED]/[0.03]). There are essentially no colored borders except faint status-pill rings (#4FB985/30, #E86A56/15).

Typography

A single typeface family does everything: IBM Plex Sans (@import Google Fonts, weights 300/400/500/600) for all UI labels, headings, and note bodies, and IBM Plex Mono (weights 400/500) for IDs, hashes, counts, coordinates, the query expression, timestamps, and the search input. Plex is open-source, so no substitution is needed. Body default is Plex Sans #E8EAED. The look is relentlessly small and tracked — section labels are 10px, 600 weight, uppercase, 0.18em tracking; numeric/code content is mono and even smaller (8–11px).

Token	Size	Weight	Line-height	Tracking	Usage
brand	11px	600	—	0.18em	"Filament" wordmark, panel headers (uppercase)
section-label	10px	600	—	0.18em	filter section titles (uppercase)
entity-name	15px	600	1.1	—	selected entity name; 13px in node summary
note-body	13px	400	1.4	—	evidence-log note text
ui	11px	400	—	—	nav tabs, generic small UI labels
mono	11px	400	—	—	query string, breadcrumb, search input, tooltip
mono-micro	9px	400	—	—	node IDs, hashes, sublabels, kbd
count-pill	10px	400	—	—	facet counts, dataset record counts, chip text

Layout

Base unit 4px on a very dense scale (common gaps 4/6/8/12/16px; padding px-4 py-3 on panel headers). The page is a fixed h-screen w-screen flex column with no overflow. Top: a 48px .ink header — wordmark, divider, nav tabs, a centered 560px pill search, status/EXPORT/avatar. Middle: a flex row of three regions — a w-[260px] Filters rail (query summary, entity-type facets, jurisdiction, a custom date-range slider with a mini histogram, source datasets, edge-relation chips), a flex-1 graph <main> carrying the crosshatch evidence grid, and a w-[320px] Evidence Log rail (selected-entity summary, a vertical notes timeline, a composer). The canvas is an absolutely-positioned SVG (viewBox 0 0 900 600) with floating toolbar chips top, a legend and a coordinate/scale readout bottom-left, a hover edge tooltip, and a full-width provenance strip pinned to the bottom. Whitespace is minimal and instrumented — corner coordinate readouts (x: 412.8 y: -201.3, CANVAS · 1.00×) and a tiny SVG scale ruler reinforce the "workspace canvas" character.

Elevation & Depth

The system is almost entirely flat and hairline-driven — depth comes from 1px rgba(232,234,237,0.12) borders and surface-tone steps (#10151B → #1A2028 → #1E242C), not shadows. Two exceptions carry real box-shadow: the provenance strip and the hover edge tooltip both use a layered 0 2px 4px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05–0.12). Floating canvas chips and the legend use backdrop-blur over #171D24/90 for a glass float over the graph. In the SVG, an feGaussianBlur #glow filter is defined and the selected node carries a soft coral halo circle.

Shapes

Small-radius and pill. Panels and floating cards are rounded-[10px] (query card, legend, provenance strip); buttons and attachment cards are rounded-md (6px); the jurisdiction selector and ghost chips are 8px-to-pill. Anything circular — tag dots, legend swatches, status dots, the avatar, search field, ghost chips, edge-relation chips, and all graph nodes — is fully round (9999px). The kbd key and tiny status pills are 3px. Data ticks (dataset bars, histogram bars) are sharp rectangles. Node circles range 5–14px radius, scaled by betweenness centrality.

Components

• Top bar — #1A2028, 48px, px-4; bordered-square logo tile with ti-network, uppercase wordmark + mono version sublabel.
• Nav tabs — 11px; active = bg-[#E8EAED]/10 rounded 6px; inactive = /60 text brightening to full on hover.
• Search bar — pill, rgba(232,234,237,0.08) fill, 12% border, 32px, mono placeholder, trailing ⌘K kbd.
• kbd — 9px mono, 1px /25 border, 3px radius, /70 text, 1px 5px.
• Ghost chip (btn-ghost) — pill, 1px /18 border, 11px, 4px 10px, /06 hover wash; used for jurisdiction add-chips, "+ note", EXPORT.
• Accent button — coral #E86A56 fill, #E8EAED text, rounded-md; "View Source Document", avatar RM.
• Invert button — #E8EAED fill, #15171A text, rounded-md; composer "log".
• Facet row — flex justify-between, 13px label with leading tag dot + trailing mono count pill (/55).
• Query card — 10px-radius, /03 fill, 12% border; mono query expression with green live flag and node/edge counts.
• Date-range slider — custom 4px /12 track, #E8EAED fill + two 12px round handles, plus a 12-bar mini histogram in stepped #E8EAED alphas.
• Edge-relation chips — 2-col grid of mono pill chips, hairline; the active one inverts to #E8EAED fill / #15171A text.
• Canvas toolbar chips — glass #171D24/90 + blur, pill, mono 10px; square rounded-md 28px zoom/focus/share icon buttons.
• Legend — glass card, 4 entity dots + label, hairline-top footnote "node size ∝ betweenness centrality".
• Provenance strip — #1A2028, 10px-radius, shadowed; coral dot + Provenance label, mono breadcrumb of ›-joined steps ending in a "verified · 3 corroborators" pill, then "copy hash" + coral "View Source Document".
• Entity summary — #1E242C block: type dot + uppercase type + mono ID, 15px name, mono meta line, 3 bordered stat tiles (DIRECTOR/OWNED/PROPERTY).
• Note card — timeline item on a 1px /20 rail with a 10px #E8EAED dot; timestamp + status pill (new/link/verified), 13px body, overlapping ring-bordered entity avatars, and a hairline attachment card with file + sha256 hash.
• Graph node/edge — SVG circles filled by entity color, #E8EAED stroke; curved path edges at 25% opacity (lit edges 100% @ 1.5px) with rotated mono labels.

Motion

Motion is minimal and instrumental. The hallmark is @keyframes haloPulse on the selected node's halo — 2.4s ease-in-out infinite, animating both opacity (0.4→0.1) and SVG r (22→32) for a radar-like pulse. .dim/.lit utility classes (opacity 0.4 / 1.0) and .edge.lit-edge exist to brighten the focused subgraph and dim the rest. Hover states (nav tabs, ghost buttons, dataset rows) swap color/background via CSS :hover with no explicit duration. No GSAP or scroll animation.

Iconography

Tabler Icons via the webfont CDN (@tabler/icons-webfont), used as <i class="ti ti-*">. Outline style, single-color, sized small (11–14px) and tinted to match context — usually #E8EAED at reduced alpha (/55–/65), occasionally colored (c-company blue, c-person coral, c-property green) for file/link icons in notes. Representative glyphs: ti-network (logo), ti-search, ti-filter, ti-map-pin, ti-calendar, ti-database, ti-plus/ti-minus/ti-focus-centered/ti-share (canvas tools), ti-notebook, ti-file-text, ti-hash, ti-link, ti-external-link, ti-chevron-down. Icons are functional UI markers, never decorative fills.

Do's and Don'ts

• Do keep the four-color entity taxonomy strict and consistent across nodes, legend dots, tag dots, and avatar rings — color always encodes entity type.
• Do reserve coral #E86A56 for the focused/selected entity and primary actions, and green #4FB985 for positive status (live/verified/sync).
• Do use IBM Plex Mono for every ID, hash, count, coordinate, timestamp, and query string; Plex Sans for human-readable labels and prose.
• Do separate surfaces with 1px rgba(232,234,237,0.12) hairlines and tonal steps, not shadows.
• Do keep type tiny and uppercase-tracked (0.18em) for section labels.
• Don't introduce bright/saturated fills, large radii, or drop shadows on panels — depth is hairlines + the two reserved shadowed floats.
• Don't reassign the entity colors to decorative use or add a fifth hue.
• Don't lighten the surface into true gray — it stays blue-graphite (#0E1217–#1E242C).
• Don't let the graph go static — the pulsing halo and dim/lit focus contrast are core to the forensic feel.

Known Gaps

• The four panel-fill class names are misnomers (.cream = #10151B, .ink = #1A2028); values above are the real hex, not the names.
• Node radii (5–14px) are read from individual SVG r attributes and described as a centrality-scaled range, per the legend's own note.
• The SVG #glow (feGaussianBlur) filter is defined but not visibly applied to a node in the markup; listed as available depth.
• Spacing scale is inferred from observed Tailwind gap/padding utilities; no formal scale is declared in CSS.
• Hover transition durations are not specified in the source (default/none).