187 lines
6.8 KiB
Markdown
187 lines
6.8 KiB
Markdown
# 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 |
|