Gising! — Home Dashboard
A high-alert, vibrant emergency monitoring dashboard designed for real-time data visualization. Featuring a deep dark background (#0a0608) with electric red (#ff2d55) and orange (#ff6a00) accents, this design uses a 'seismic grid' background and cinematic scanline animations. It is suitable for disaster response, cybersecurity, fintech risk management, or live server monitoring. The aesthetic balances editorial typography (Clash Grotesk) with technical data displays and pulse-based micro-interactions to signify urgency.
Summary
A high-energy, dark-mode emergency dashboard utilizing red/orange gradients, seismic-style grid backgrounds, and real-time pulse animations to monitor active threats and regional statuses.
Style
The style is 'Tactical Vibrant.' It pairs high-contrast neon accents with a deep obsidian base. Typography utilizes 'Clash Grotesk' for bold, technical headers and 'Satoshi' for legible body text. Visual depth is achieved through radial glow gradients, subtle seismic grid lines (28px size), and CSS scanline flickers. Interactive elements feature heavy glows, 'hot' borders, and staggered fade-up entrance animations.
Layout & Structure
The layout is a single-column mobile-first dashboard that prioritizes real-time status at the top, followed by interactive stats, urgent alerts, and a vertical activity log. It includes a persistent bottom navigation bar.
Header
Live Status Bar
Stat Summary Cards
Active Alerts Section
Monitored Regions List
Activity Log
Components
Seismic Ripple Icon
A notification icon with concentric animated rings.
High-Contrast CTA Button
Vibrant action button with inner glow and drop shadow.