PredictAI - Hydraulic Machine Results
A high-contrast, bold editorial style dashboard designed for industrial analytics and predictive AI monitoring. Features a sophisticated dark/light mode system with a minimalist color palette emphasizing teal (#1DB584) and deep blue (#0070C0). The layout uses a structured 12-column bento-grid approach with heavy emphasis on typography contrast, combining sans-serif Inter for headlines with JetBrains Mono for technical metadata. Ideal for SaaS platforms, fintech, IoT monitoring, and high-end technical interfaces that require both clarity and an editorial aesthetic. Includes unique micro-interactions like a mix-blend-mode custom cursor and staggered reveal animations.
Summary
PredictAI is a technical dashboard design that blends industrial data visualization with bold editorial aesthetics. It utilizes extreme typographic weight variations, a 12-column responsive grid, and smooth, high-end motion design to deliver complex information clearly. The interface relies on subtle 1px borders, generous 40px rounded corners, and a specific palette of teal and blue against monochrome backgrounds.
Style
Editorial-meets-technical style with high-contrast typography, monochrome base colors with vibrant functional accents, and smooth cubic-bezier motion. Key fonts are Inter (Bold for titles, Regular for body) and JetBrains Mono (for technical data). Main colors are Pure Black (#000000), White (#FFFFFF), Health Teal (#1DB584), and Accent Blue (#0070C0).
Layout & Structure
The page uses a fixed navigation header and a main 12-column grid divided into three primary segments (4-4-4) on desktop, collapsing to a single column on mobile.
Navigation
Metric Column (Left)
Narrative Column (Center)
Technical Column (Right)
Components
Circular Confidence Ring
Animated SVG progress indicator for confidence scores.
Interactive Metadata Badges
Small technical tags for status and categorical labels.
Mix-Blend Custom Cursor
Cursor that reacts to the color of elements it moves over.
Special Notes
MUST: Hide the default OS cursor and use the custom circle cursor. MUST: Implement staggered entrance animations for cards with 100ms intervals. MUST: Use 'mix-blend-mode: difference' for the navigation and cursor. MUST NOT: Use heavy shadows; instead, use 1px borders and subtle color shifts for depth. MUST NOT: Exceed 10% opacity on card borders to maintain the 'editorial' cleanliness.