added examples

examples/DESIGN-SYSTEM.md

@@ -0,0 +1,186 @@
+# Cameleer3 Design System
+
+## Concept
+
+**"Mission Control"** — industrial-precision meets data-dense observatory. Bloomberg Terminal crossed with a luxury car dashboard. Dark, information-rich, with careful hierarchy and breathing room. Operators monitoring hundreds of systems need density without chaos.
+
+**Signature element**: Subtle topographic/contour pattern background evoking "mapping routes" — because Cameleer maps Camel routes.
+
+## Colors
+
+### Backgrounds
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--bg-deep` | `#060a13` | Page background |
+| `--bg-base` | `#0a0e17` | Recessed areas, inputs |
+| `--bg-surface` | `#111827` | Cards, panels |
+| `--bg-raised` | `#1a2332` | Elevated elements, hovers |
+| `--bg-hover` | `#1e2d3d` | Active hover states |
+
+### Borders
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--border` | `#1e2d3d` | Default borders |
+| `--border-subtle` | `#152030` | Card borders, dividers |
+
+### Text
+
+| Token | Hex | Usage |
+|---|---|---|
+| `--text-primary` | `#e2e8f0` | Headings, primary content |
+| `--text-secondary` | `#8b9cb6` | Body text, values |
+| `--text-muted` | `#4a5e7a` | Labels, hints, metadata |
+
+### Accent Colors
+
+| Token | Hex | Glow | Usage |
+|---|---|---|---|
+| `--amber` | `#f0b429` | `rgba(240, 180, 41, 0.15)` | Primary brand, totals, volume, links |
+| `--cyan` | `#22d3ee` | `rgba(34, 211, 238, 0.12)` | Latency, cross-route refs |
+| `--rose` | `#f43f5e` | `rgba(244, 63, 94, 0.12)` | Errors, failures, slow durations |
+| `--green` | `#10b981` | `rgba(16, 185, 129, 0.12)` | Success, completed, fast durations |
+| `--blue` | `#3b82f6` | — | Running state, endpoints |
+| `--purple` | `#a855f7` | — | EIP nodes, active routes |
+
+Each accent has a `*-dim` variant (e.g. `--amber-dim: #b8860b`) for border accents on active states.
+
+### Semantic Color Mapping
+
+- **Status**: completed → green, failed → rose, running → blue
+- **Duration**: fast (<100ms) → green, medium (100-1000ms) → amber, slow (>1s) → rose
+- **Health**: healthy → green, warning → amber, critical → rose
+- **Node types**: endpoint → blue, processor → green, EIP → purple, cross-route → cyan dashed
+
+## Typography
+
+### Font Stack
+
+| Role | Family | Fallbacks |
+|---|---|---|
+| Body / UI | `DM Sans` | `system-ui, sans-serif` |
+| Data / Code | `JetBrains Mono` | `Fira Code, monospace` |
+
+Load from Google Fonts:
+```html
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+```
+
+### Scale
+
+| Element | Font | Size | Weight | Extras |
+|---|---|---|---|---|
+| Page title | DM Sans | 24px | 700 | `letter-spacing: -0.5px` |
+| Card title | DM Sans | 13px | 600 | — |
+| Section label | DM Sans | 11px | 600 | `uppercase, letter-spacing: 0.8px` |
+| Body text | DM Sans | 14px | 400 | — |
+| Stat value | JetBrains Mono | 26-28px | 600 | `letter-spacing: -1px` |
+| Table data | JetBrains Mono | 12px | 400 | — |
+| Badge/tag | JetBrains Mono | 11px | 500 | — |
+| Tiny label | JetBrains Mono | 9-10px | 400-500 | — |
+
+## Spacing & Radii
+
+| Token | Value | Usage |
+|---|---|---|
+| `--radius-sm` | `6px` | Buttons, inputs, chips |
+| `--radius-md` | `10px` | Small cards, badges |
+| `--radius-lg` | `14px` | Cards, panels, modals |
+| Page padding | `24px` | Main content area |
+| Card padding | `16-20px` | Card header/body |
+| Grid gap | `12-16px` | Between cards |
+
+## Components
+
+### Stat Card
+
+Top-edge colored line (2px gradient from accent to transparent). Label in muted uppercase, value in mono accent color, optional change indicator below.
+
+### Status Pill
+
+Rounded (`99px`), colored background glow + text. Contains a 6px dot + label. Running state dot pulses.
+
+### Filter Chip
+
+Rounded pill, toggleable. Active state uses accent glow background + accent border + accent text. Inactive is raised background with subtle border.
+
+### App Tile
+
+Left-edge 3px color bar (green/amber/rose). Shows app name, route count, failure rate. Hover lifts slightly (`translateY(-1px)`).
+
+### Duration Bar
+
+Inline bar (60px wide, 4px tall) with color-coded fill. Paired with mono duration label.
+
+### Heatmap Cell
+
+Individual cells with amber opacity mapped to intensity (0.02–0.85). Hover scales to 1.3× with amber ring. Tooltip on hover.
+
+## Charts
+
+All charts use inline SVG with:
+- Grid lines: `var(--border-subtle)`, 0.5px
+- Axis labels: `var(--font-mono)`, 10px, `var(--text-muted)`
+- Area fills: linear gradient from accent (15% opacity) to transparent
+- Lines: accent color, 1.5px, round joins
+
+### Sparklines
+
+Tiny (200×24) SVG with polygon fill + polyline stroke. Used in hero stat cards.
+
+## Animations
+
+| Effect | Spec | Usage |
+|---|---|---|
+| Page enter | `fadeIn 0.3s ease-out` with staggered `animation-delay` (0.05s increments) | Page load |
+| Live pulse | `0 → 6px` green box-shadow, 2s infinite | Live indicators, running dots |
+| Hover lift | `translateY(-1px)`, 0.15s | App tiles |
+| Border glow | `border-color` transition, 0.2s | Cards, inputs on hover/focus |
+| Expand arrow | `rotate(90deg)`, 0.2s | Table row expand |
+
+```css
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes livePulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
+}
+```
+
+## Background Treatment
+
+Two layers over `--bg-deep`:
+
+1. **Radial gradients** — subtle amber glow top-left (3% opacity), cyan glow bottom-right (2% opacity)
+2. **Topographic SVG pattern** — repeating 400×400 tile of bezier curves in amber/cyan at 2.5% opacity
+
+```css
+body::before {
+  background:
+    radial-gradient(ellipse 800px 400px at 20% 20%, rgba(240, 180, 41, 0.03), transparent),
+    radial-gradient(ellipse 600px 600px at 80% 80%, rgba(34, 211, 238, 0.02), transparent);
+}
+```
+
+## Navigation
+
+Sticky top bar, 56px tall. Glass-morphism: `rgba(6, 10, 19, 0.85)` with `backdrop-filter: blur(20px) saturate(1.2)`. Amber logo (JetBrains Mono, 16px, 600), pill-style nav links, right-aligned environment badge and cluster count.
+
+## Route Diagram
+
+- **Node shapes**: Rounded rects (8px radius, cross-route 14px). Fill from `getNodeColor()`, 1.5px stroke.
+- **Edges**: Bezier curves between node centers. Flow → gray, branch → amber (labeled), cross-route → cyan dashed, error → rose dashed.
+- **Execution overlay** (toggle with `E`): Executed path glows green. Non-executed dims to 15% opacity. Sequence badges (numbered circles) on nodes. Duration pills above nodes.
+- **Arrow markers**: Per-edge-type colored arrowheads.
+
+## Pages
+
+| Page | File | Purpose |
+|---|---|---|
+| Transaction Explorer | `transaction-explorer.html` | Search/filter transactions across all apps |
+| Dashboard | `dashboard.html` | Fleet-wide overview with charts and health grid |
+| Route Detail | `route-detail.html` | Deep dive into single route with diagram and metrics |