Gising! — Home Dashboard
A vibrant, dark-mode emergency monitoring dashboard featuring high-energy red and orange gradients, seismic grid backdrops, and real-time pulse animations. This design system utilizes a high-contrast palette of electric pinks and warm oranges against a deep obsidian background, perfect for fintech, security, or disaster response platforms. Key elements include bento-style stat cards, severity-coded alert components, and editorial typography using Clash Grotesk and Satoshi. The interface is characterized by 'cyber' aesthetics like scanline flickers, glowing hot-lines, and concentric ripple animations for high-urgency notifications.
Summary
Gising! is a high-urgency, dark-mode monitoring dashboard designed for real-time alert systems. It features a bold, vibrant aesthetic with red/orange gradients, seismic-themed background textures, and sophisticated micro-interactions including pulse ripples and staggered entrance animations.
Style
The style is 'Cyber-Energetic'—a mix of high-tech dashboarding and editorial design. It uses a dark base (#0a0608) with electric accents (#ff2d55, #ff6a00). Typography pairs the bold, geometric 'Clash Grotesk' for headings with the clean, modern 'Satoshi' for body text. Animations are critical: staggered fade-ups for page entry, pulse rings for active alerts, and a subtle scanline flicker to enhance the 'live' feel.
Layout & Structure
The layout is a single-column mobile-first dashboard with a fixed top header, scrollable main content area, and a persistent bottom navigation bar. It utilizes horizontal scrolling for statistics and vertical lists for alerts and activity logs.
Header and Top Branding
Live Status Bar
Statistics Grid
Severity-Coded Alert Cards
Region and Activity Logs
Components
Concentric Alert Ripple
A high-urgency visual indicator for active emergencies.
Gradient Hot-Line
A UI separator that acts as a 'digital pulse' at the top of the viewport.
Seismic Backdrop
Layered radial gradients and grid to create depth.