harden terminal view, add $impeccable design docs, update AGENTS.md

DESIGN.md

@@ -0,0 +1,230 @@
+---
+name: Islandflow Terminal
+description: Evidence-linked market intelligence terminal for real-time and replay investigation
+colors:
+  bg-core: "#06080b"
+  bg-elevated: "#0b1016"
+  bg-pane: "#111820"
+  bg-pane-2: "#0d141b"
+  bg-soft: "#ffffff08"
+  border-subtle: "#ffffff14"
+  border-accent: "#ffb13059"
+  text-primary: "#e6edf4"
+  text-dim: "#90a0b2"
+  text-faint: "#6e7b8c"
+  signal-amber: "#f5a623"
+  signal-amber-soft: "#f5a6231f"
+  confirm-green: "#25c17a"
+  confirm-green-soft: "#25c17a1f"
+  risk-red: "#ff6b5f"
+  risk-red-soft: "#ff6b5f24"
+  info-blue: "#4da3ff"
+  info-blue-soft: "#4da3ff24"
+typography:
+  display:
+    fontFamily: "Quantico, sans-serif"
+    fontSize: "clamp(2rem, 3vw, 2.8rem)"
+    fontWeight: 700
+    lineHeight: 1.05
+    letterSpacing: "0.08em"
+  body:
+    fontFamily: "IBM Plex Sans, sans-serif"
+    fontSize: "0.92rem"
+    fontWeight: 400
+    lineHeight: 1.45
+  label:
+    fontFamily: "IBM Plex Mono, monospace"
+    fontSize: "0.72rem"
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: "0.12em"
+rounded:
+  sm: "8px"
+  md: "10px"
+  lg: "12px"
+  xl: "14px"
+  pill: "999px"
+spacing:
+  xs: "4px"
+  sm: "8px"
+  md: "12px"
+  lg: "16px"
+  xl: "24px"
+components:
+  button-base:
+    backgroundColor: "{colors.bg-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: "8px 10px"
+  button-active:
+    backgroundColor: "{colors.signal-amber-soft}"
+    textColor: "{colors.signal-amber}"
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: "8px 10px"
+  nav-link:
+    backgroundColor: "{colors.bg-core}"
+    textColor: "{colors.text-dim}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "12px 14px"
+  nav-link-active:
+    backgroundColor: "{colors.signal-amber-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "12px 14px"
+  pane-surface:
+    backgroundColor: "{colors.bg-pane}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.xl}"
+    padding: "16px 18px"
+  status-chip:
+    backgroundColor: "{colors.bg-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.pill}"
+    padding: "3px 8px"
+---
+
+# Design System: Islandflow Terminal
+
+## Overview
+
+**Creative North Star: "The Evidence Console"**
+
+Islandflow's interface behaves like an investigation instrument, not a presentation layer. The system is tuned for fast read accuracy under volatility: hierarchy is built from contrast, casing, and spacing cadence rather than decorative effects.
+
+The visual atmosphere is dark and controlled, with amber used as a directional signal rather than ambient decoration. Surfaces are compact and information-dense, but each zone is explicit about purpose so the user can move from detection to validation without losing context.
+
+This system explicitly rejects the anti-references in PRODUCT.md: no meme-stock hype aesthetics, no generic SaaS card fog, and no Bloomberg cosplay density unless density is earning its keep with decision value.
+
+**Key Characteristics:**
+- Operational contrast over ornamental contrast.
+- Dense layout with stable rhythm.
+- Accent color treated as scarce signal.
+- Monospace-assisted precision for time, numeric, and status data.
+- Readability preserved during bursty live updates.
+
+## Colors
+
+The palette is operational and role-first: neutral cold surfaces carry most of the interface, with amber, green, red, and blue reserved for state and meaning.
+
+### Primary
+
+- **Signal Amber** (`#f5a623`): active controls, focus rails, status emphasis, and live interaction highlights.
+
+### Secondary
+
+- **Info Blue** (`#4da3ff`): replay states, neutral directional tags, and non-critical positive context.
+
+### Tertiary
+
+- **Confirm Green** (`#25c17a`): healthy connectivity and positive directional markers.
+- **Risk Red** (`#ff6b5f`): stale/disconnected/error states and bearish risk markers.
+
+### Neutral
+
+- **Command Black** (`#06080b`): base shell and deepest background.
+- **Panel Graphite** (`#111820`): primary container surfaces.
+- **Elevation Slate** (`#0b1016`): raised or overlay-adjacent planes.
+- **Data Ink** (`#e6edf4`): default text on dark surfaces.
+- **Support Ink** (`#90a0b2`): secondary labels and metadata.
+- **Trace Ink** (`#6e7b8c`): tertiary labels and low-priority framing.
+
+### Named Rules
+
+**The Signal Scarcity Rule.** Amber is a control and attention signal, not a wash. Keep it concentrated on actions, state edges, and critical counters.
+
+**The Semantic Color Rule.** Red and green never stand alone for meaning. Every directional or severity cue must include text, shape, or positional confirmation.
+
+## Typography
+
+**Display Font:** Quantico (fallback: sans-serif)
+**Body Font:** IBM Plex Sans (fallback: sans-serif)
+**Label/Mono Font:** IBM Plex Mono (fallback: monospace)
+
+**Character:** The pairing is technical and composed. Quantico provides assertive waypoint headings, IBM Plex Sans keeps body copy readable, and IBM Plex Mono anchors temporal/numeric trust.
+
+### Hierarchy
+
+- **Display** (700, `clamp(2rem, 3vw, 2.8rem)`, 1.05): page-level and major section titles.
+- **Headline** (700, `1.8rem`, 1.1): rail brand mark and high-salience panel titles.
+- **Title** (600, `1rem`, 1.2): pane headings and focused section labels.
+- **Body** (400, `0.92rem`, 1.45): default transactional and descriptive copy.
+- **Label** (600, `0.72rem`, `0.12em`, uppercase): controls, chips, table headers, and instrumentation micro-labels.
+
+### Named Rules
+
+**The Instrument Label Rule.** Labels are short, uppercase, and spaced. They identify system state fast, without narrative phrasing.
+
+## Elevation
+
+The system is flat by default. Depth is primarily tonal (background and border deltas), with shadows reserved for overlays that require separation from live data.
+
+### Shadow Vocabulary
+
+- **Overlay Lift** (`0 24px 60px rgba(0, 0, 0, 0.42)`): filter popovers and floating control surfaces.
+- **Drawer Lift** (`0 24px 70px rgba(0, 0, 0, 0.5)`): detail drawers and deep inspection layers.
+- **Tooltip Lift** (`0 16px 40px rgba(0, 0, 0, 0.45)`): short-lived contextual tooltips.
+
+### Named Rules
+
+**The Flat-By-Default Rule.** If a surface is not floating over active workflow content, it does not get shadow lift.
+
+## Components
+
+### Buttons
+
+- **Shape:** compact rounded rectangle (`8px radius`) for standard controls, pill (`999px`) for segment toggles.
+- **Primary:** subtle dark fill with bordered edge (`1px`, `rgba(255,255,255,0.08)`), label typography in uppercase mono (`0.72rem`).
+- **Active State:** amber-tinted gradient/fill (`rgba(245,166,35,0.18 -> 0.08)`), stronger border and warmer text.
+- **Focus/Interaction:** no bounce effects; state transitions stay short (`~150-180ms`) with opacity/color emphasis.
+
+### Chips
+
+- **Style:** pill chips (`999px`) with thin border and semantic soft fill.
+- **State:** direction/severity/status chips map to green/red/blue semantic channels with text labels always present.
+
+### Cards / Containers
+
+- **Corner Style:** medium-soft corners (`12px` or `14px`) depending on container prominence.
+- **Background:** layered dark surfaces (`#111820`, `#0d141b`) with restrained top-to-bottom sheen.
+- **Shadow Strategy:** no default card shadow; only overlays and floating inspectors use lift shadows.
+- **Border:** subtle perimeter lines (`rgba(255,255,255,0.08)` baseline).
+- **Internal Padding:** primarily `16px-18px` with tighter inner rhythm (`8px-12px`) for controls.
+
+### Inputs / Fields
+
+- **Style:** mostly transparent text fields with underlined focus rails for global filter/search workflows.
+- **Focus:** amber underline amplification and glow, paired with brighter field text.
+- **Error/Disabled:** disabled uses opacity reduction; error state should be paired with label text, not color only.
+
+### Navigation
+
+- **Style:** rail links in uppercase label typography with `10px` radius and low-contrast base fill.
+- **Hover/Active:** hover introduces border + subtle fill; active introduces amber-tinted background and stronger contrast.
+- **Mobile Treatment:** rail collapses to top flow, controls stack vertically under `720px` while preserving full-width hit targets.
+
+### Signature Component
+
+- **Virtualized Data Tables:** fixed-height row lanes (`36px` and `44px` families), mono numeric columns, semantic row tinting, and stable scroll performance for live bursts.
+
+## Do's and Don'ts
+
+### Do:
+
+- **Do** keep status and direction semantic with both color and text labels (`severity-high`, `direction-bullish`, explicit words).
+- **Do** preserve compact control density (`8px-12px` padding range) so investigation actions stay within a short scan path.
+- **Do** use amber as a sparse decision signal for active controls, focus rails, and key counters.
+- **Do** keep overlays visually separated with dedicated shadow roles while leaving primary panes flat.
+- **Do** design live updates to avoid flashing, excessive animation, and layout shifts during high-volume periods.
+
+### Don't:
+
+- **Don't** make Islandflow feel like a meme-stock or finfluencer trading app with hype, gamification, urgency theater, or promotional calls to action.
+- **Don't** make Islandflow feel like a generic SaaS analytics dashboard with decorative gradients, vague card stacks, and non-actionable vanity metrics.
+- **Don't** make Islandflow feel like Bloomberg-style visual density used as aesthetic cosplay instead of as a genuinely useful information structure.
+- **Don't** rely on red/green alone for directional meaning or severity.
+- **Don't** use colored side-stripe accents on rows/cards as the primary signifier; use complete semantic chips and labels instead.