cameleer-server/examples/DESIGN-SYSTEM.md

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:

<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

@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

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