Gising! — Settings
Gising! is a high-energy, dark-mode design system specifically optimized for emergency monitoring, safety alerts, or critical utility applications. It features a bold 'Seismic' aesthetic using a palette of deep blacks, vivid reds (#ff2d55), and energetic oranges (#ff6a00). The style combines editorial typography (Clash Grotesk and Satoshi) with functional card-based layouts and immersive visual effects like moving scanlines, radial glows, and background grids. It is ideal for fintech, security, health alerts, or any interface requiring high visibility and urgent communication.
Summary
A bold, high-contrast dark-themed design system featuring vibrant red/orange accents, card-based mobile interfaces, and energetic micro-interactions designed for urgency and clarity.
Style
The style is 'Cyber-Urgency,' characterized by a black background (#0a0608) with a 28px seismic grid and vibrant gradients. It uses Clash Grotesk for high-impact headings and Satoshi for readable body text. Key elements include glassmorphism-lite cards (#130b0e), glowing status indicators, and a consistent red-orange gradient (#ff2d55 to #ff6a00) for primary actions and toggles.
Layout & Structure
A mobile-first, vertical-scroll layout focused on grouping information into distinct, high-contrast cards. Sections are preceded by tight, uppercase labels and navigation is anchored by a persistent bottom tab bar.
Header
Profile Section
Settings Categories
Form Inputs
Bottom Navigation
Components
Toggle Switch
A sleek, gradient-filled toggle switch.
Avatar Ring
A high-fidelity gradient border for profile images.
CTA Button
A high-visibility primary action button.
Special Notes
MUST maintain the 28px grid visibility. MUST use the staggered fade-up animation (translateY: 16px to 0px, opacity: 0 to 1) for all cards on load. MUST NOT use pure white backgrounds for any element. ALWAYS use #ff2d55 for critical/danger actions and the red/orange gradient for active states.