SLATE logo S.L.A.T.E. Watchmaker Components
Back to Home

Watchmaker Component Showcase

Reference implementations for gears, status jewels, flow lines, cards, and schematic layout primitives. Use these patterns to keep the dashboard consistent and precise.

Gear System

Animated SVG gears with slow, medium, and reverse rotation speeds.

Classes: .gear .gear-spin-slow .gear-spin-medium .gear-spin-reverse

Status Jewels

Compact health indicators with glow and pulse states.

Classes: .status-jewel .active .pending .error .inactive

Flow Lines

Animated data flow connectors for schematic signals.

Class: .flow-line (use .slow or .fast variants)

Watchmaker Card

Primary information container with depth polish and header gear icon.

Command Core
Use cards for key system surfaces and controls.
Classes: .watchmaker-card .watchmaker-card-header .watchmaker-card-title

Schematic Layout

Blueprint container with nodes and connectors.

Dashboard
Ollama
Classes: .schematic-container .schematic-node .schematic-connector

Mechanism Indicators

Motion primitives for activity visualization.

Classes: .balance-wheel .mainspring .escapement