Gising! — People Monitor
A high-intensity, dark-themed 'emergency' design system featuring a 'hot' red-to-orange gradient palette. Utilizing editorial typography with Clash Grotesk and Satoshi, the aesthetic combines technical precision with vibrant urgency. Key features include a seismic grid background, scanline overlays, pulsing status indicators, and heavy atmospheric glow effects. Optimized for real-time monitoring, security dashboards, fintech alert systems, and critical logistics tracking. The design uses high-contrast accessibility patterns with a focus on 'priority' categorization.
Summary
Gising! Design System: A bold, high-contrast dark mode interface for critical monitoring. It features a technical 'seismic' background grid, vibrant red/orange accents, and sophisticated glow-heavy UI components. Typography is a mix of geometric grotesque and modern sans-serif. Navigation is handled via a persistent bottom bar, while information density is managed through categorized cards with quick-action micro-interactions.
Style
The style is 'Techno-Urgency'. Typography: 'Clash Grotesk' for headings (bold, tight letter-spacing) and 'Satoshi' for utility/body text (highly legible). Color Palette: Deep black-red background (#0a0608), rich card backgrounds (#130b0e), and a primary 'Heat' gradient (#ff2d55 to #ff6a00). Accents include Safety Green (#22c55e) and Warning Yellow (#f59e0b). Visual language includes radial glow spots, linear scanline animations, and pulsing rings.
Layout & Structure
A vertical-scrolling mobile-first layout with a persistent header and footer, utilizing high-density data chips and categorized lists.
Header & Search
Statistics Chips
Monitoring List
Action Buttons & FAB
Bottom Navigation
Components
SOS Ripple Avatar
An avatar with three expanding, fading concentric rings to denote high urgency.
Status Pill (Live)
A pill-shaped indicator showing active monitoring status.
Heat Scanline Overlay
A global CRT-style flicker effect for technical depth.
Special Notes
MUST use 'Clash Grotesk' for any numerical data and titles to maintain the technical look. MUST include the radial glow (radial-gradient) in the background to prevent the dark mode from feeling flat. DO NOT use standard blue for links; use #ff2d55 with a glow effect. ALL interactive elements MUST have a scale-down animation on click.