Gising! — Reports
A high-intensity, dark-mode monitoring interface featuring vibrant red and orange accents, optimized for real-time data visualization and emergency alerts. The design utilizes a 'seismic grid' background pattern, editorial typography with Clash Grotesk, and a high-contrast hierarchy for status severity. Ideal for fintech, cybersecurity, emergency response systems, or performance analytics dashboards that require immediate visual attention and clear categorization of critical information.
Summary
A bold, high-contrast monitoring dashboard in dark mode, using red-to-orange gradients and 'seismic' aesthetic elements to highlight real-time data status and critical alerts.
Style
Vibrant dark mode with 'emergency' aesthetics. Typography pairs 'Clash Grotesk' (geometric, bold headings) with 'Satoshi' (clean, modern body text). The color palette is rooted in deep blacks and burgundies, with functional color-coding for severity: Critical (Red #ff2d55), High (Orange #ff6a00), and Moderate (Yellow #f5c518). Visual effects include scanline flickers, radial glows, and soft blurs to create depth.
Layout & Structure
Mobile-first, single-column scrollable layout with a sticky-feel header and a persistent bottom navigation bar. Sections are organized by status severity cards and data summary blocks.
Header and Navigation
Summary Statistics
Alert List Section
Expanded Card Detail
Components
Severity Alert Card
Multi-state card designed for emergency notifications with data visualization elements.
Seismic Grid Background
Atmospheric background layer to enhance the technical/monitoring feel.
Special Notes
MUST maintain the high-contrast ratio between the dark background and the vibrant status colors. MUST NOT use generic blue or green colors; stick strictly to the red-orange-yellow severity scale to preserve the emergency-alert theme. MUST ensure all interactive elements (chips, cards) have an active state transition like border-color change or slight scaling.