cameleer-server/examples/DESIGN-SYSTEM.md

# Cameleer 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 |