Hydraulic Machine Diagnostics Dashboard - Light Theme
A high-precision, light-mode diagnostic dashboard designed for industrial monitoring and IoT diagnostics. It features a clean 'glass-card' aesthetic with heavy emphasis on high-contrast typography, specifically 'Satoshi' Black. The color palette centers on a clinical white and slate base with emerald green for operational status, utilizing wide-tracked uppercase labels for a technical feel. Layout is a structured 12-column grid with generous spacing, subtle entrance animations, and data-dense components like progress rings and sensor grids. Ideal for fintech analytics, machine health monitoring, and scientific data visualization.
Summary
A sophisticated light-themed industrial diagnostic dashboard using a 12-column layout. The design features oversized status indicators, high-density sensor grids, and animated confidence meters. It employs a 'Satoshi' font stack with weights ranging from Regular to Black, emphasizing data hierarchy through size and letter-spacing.
Style
Minimalist tech-industrial aesthetic with subtle glassmorphism. Typography uses 'Satoshi' (headings) and 'General Sans' (UI elements). Colors: Pure White (#FFFFFF) background with Slate (#F8FAFC) gradients, Emerald (#10B981) for success, and Slate-900 (#0F172A) for primary text. Animation includes 0.8s cubic-bezier entrance transitions and pulse effects on status dots.
Layout & Structure
A 12-column grid-based dashboard with three distinct vertical columns (4-4-4 split) optimized for 1440px width.
Overall Container
Left Column - Primary Status
Center Column - Narrative Data
Right Column - Technical Details
Components
Decision Path Breadcrumbs
Sequential logic flow chips for AI/Diagnostic transparency.
Animated Progress Ring
Visual confidence meter with stroke animation.
Special Notes
MUST: Maintain a strict 2rem (32px) border-radius on all main cards for a 'soft-industrial' look. MUST: Use 'Satoshi' Black (900 weight) for any numerical data or primary status words. MUST NOT: Use heavy borders; keep them at 1px with very low opacity (0.06 - 0.1). MUST: Implement staggered entrance animations (0.1s increments) for each card to create a premium load experience.