Gising! Sign In — Bold & Vibrant
A high-energy, vibrant dark mode design system inspired by emergency alert systems and cyberpunk aesthetics. Featuring a striking 'seismic' color palette of deep charcoal (#0a0608), electric pinkish-red (#ff2d55), and safety orange (#ff6a00). The layout uses a structured bento-card approach with editorial typography (Clash Grotesk and Satoshi), scanline flickering effects, and grid-based backgrounds. Ideal for safety monitors, fintech apps, high-stakes SaaS dashboards, and real-time data tracking platforms.
Summary
Gising! Design System: A bold, dark-themed interface characterized by electric gradients, seismic grid patterns, and staggered entrance animations. It balances high-urgency visual cues with a clean, structured layout for critical data and secure user flows.
Style
The style essence is 'Urgency meets Precision.' It utilizes a deep black-violet base (#0a0608) with high-intensity accent gradients (linear-gradient 110deg from #ff2d55 to #ff6a00). Typography pairings feature 'Clash Grotesk' for bold, expressive headings with tight tracking and 'Satoshi' for highly legible body copy. Key visuals include a 28px grid pattern, pulse-ring animations, and a subtle vertical scanline effect to simulate a high-tech monitor environment.
Layout & Structure
A mobile-first vertical stack with fixed navigation. It consists of an animated branding header, a central focused content card, and a persistent bottom navigation bar.
Page Wrapper & Background
Header & Branding
Auth Card
Bottom Navigation
Components
Seismic Ripple Logo
An animated brand icon with expanding concentric circles.
Live Status Pill
A small indicator for real-time activity.
Gradient CTA Button
A high-impact primary action button.
Special Notes
MUST maintain the high-contrast ratio between text and dark backgrounds. MUST use the staggered 'fade-up' animation (20px translate) for all sections on page load to create a high-end feel. DO NOT use generic rounded corners; specifically use 22px for logo shells and 12px-16px for cards/buttons. DO NOT use bright white for secondary text; use #ff9ab0 or #6b3345 to maintain the color theme.