This document provides a detailed visual description of all UI changes made to implement the Emergency Alert Color Scheme with 404 Error Aesthetic.
- Generic Material purple/pink color scheme
- Standard gray background
- Small SOS button with basic red color
- Plain status messages
- Minimal visual hierarchy
- No emergency branding
Normal Mode (Ready State):
┌─────────────────────────────────────────┐
│ GUARDIAN AI │ ← Safety Red (#E53935)
│ EMERGENCY RESPONSE SYSTEM │ ← Trust Blue (#1E88E5)
│ │
│ ╔═════════════════════════════════╗ │
│ ║ ⓘ Ready. Stay safe. ║ │ ← Amber Yellow background
│ ╚═════════════════════════════════╝ │ (#FDD835 border)
│ │
│ ╭───────────╮ │
│ ╱ GLOW ╲ │ ← Pulsing glow ring
│ │ ┏━━━━━━━━┓ │ │
│ │ ┃ 🚨 ┃ │ │ ← Safety Red gradient
│ │ ┃ SOS ┃ │ │ with Error Code border
│ │ ┃EMERGENCY┃ │ │
│ │ ┗━━━━━━━━┛ │ │
│ ╲ ╱ │
│ ╰───────────╯ │
│ │
│ TRIPLE TAP OR LONG PRESS FOR SOS │ ← Bold uppercase
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ 👤 EMERGENCY CONTACTS: 3 ┃ │ ← Contact count
│ ┃ • Mom (Family) ┃ │ (Red if empty,
│ ┃ • John (Friend) ┃ │ Green if added)
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
└─────────────────────────────────────────┘
Emergency Mode (Active State):
┌─────────────────────────────────────────┐
│ │ ← Dark Background
│ ⚠️ EMERGENCY ACTIVE │ ← Error Code (#FF1744)
│ >>> SYSTEM ALERT <<< │ ← System Green (#00E676)
│ │ with glitch effect
│ ╔═════════════════════════════════╗ │
│ ║ 🚨 Sending emergency alerts... ║ │ ← Dark Surface
│ ╚═════════════════════════════════╝ │ with red border
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ ⓘ ┃ │
│ ┃ Are you in immediate danger? ┃ │ ← Off White card
│ ┃ ┃ │ Trust Blue border
│ ┃ 15 SECONDS REMAINING ┃ │
│ ┃ ████████████░░░░░ 75% ┃ │ ← Amber progress bar
│ ┃ ┃ │
│ ┃ ┏━━━━━━┓ ┏━━━━━━┓ ┃ │
│ ┃ ┃ ✓ ┃ ┃ ✕ ┃ ┃ │ ← Success Green /
│ ┃ ┃ YES ┃ ┃ NO ┃ ┃ │ Safety Red buttons
│ ┃ ┗━━━━━━┛ ┗━━━━━━┛ ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ [CANCEL EMERGENCY (FALSE ALARM)] │ ← Amber border
└─────────────────────────────────────────┘
- Standard Material blue/purple theme
- Small icons and text
- Inconsistent styling
- Generic button colors
- No emergency branding
Welcome Screen:
┌─────────────────────────────────────────┐
│ │
│ ┏━━━━━━━━━━━┓ │
│ ┃ 🛡️ ┃ │ ← Safety Red background
│ ┗━━━━━━━━━━━┛ │ with shadow
│ │
│ GUARDIAN AI │ ← Safety Red, ExtraBold
│ Emergency Response System │ ← Charcoal
│ │
│ ╔═════════════════════════════════╗ │
│ ║ To enable advanced safety ║ │ ← Amber Yellow
│ ║ features, we need to install: ║ │ background/border
│ ║ ║ │
│ ║ ✓ Qwen 2.5 0.5B 6K Model ║ │ ← Trust Blue checkmark
│ ║ Size: ~374 MB • Private ║ │
│ ╚═════════════════════════════════╝ │
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ CONTINUE ┃ │ ← Safety Red button
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ By continuing, you agree to our... │ ← Gray text
└─────────────────────────────────────────┘
Location Permission Screen (CRITICAL):
┌─────────────────────────────────────────┐
│ │
│ 📍 │ ← Safety Red icon (80dp)
│ │
│ LOCATION ACCESS REQUIRED │ ← Safety Red, Bold
│ │
│ Location permission is REQUIRED to │
│ send GPS coordinates in emergency... │
│ │
│ ╔═════════════════════════════════╗ │
│ ║ ⚠️ REQUIRED PERMISSION ║ │ ← Safety Red
│ ║ You must grant location... ║ │ background (20%)
│ ╚═════════════════════════════════╝ │
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ 📍 Share location in emergency ┃ │ ← Trust Blue
│ ┃ 🗺️ Help responders find you ┃ │ info card
│ ┃ 🔒 Used only when SOS activated ┃ │
│ ┃ ✅ Required for app to function ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ 📍 GRANT LOCATION PERMISSION ┃ │ ← Safety Red button
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │ (LARGE, prominent)
│ │
│ Tap above and select "Allow only... │
└─────────────────────────────────────────┘
Completion Screen:
┌─────────────────────────────────────────┐
│ │
│ ✓ │ ← Success Green (120dp)
│ │
│ ALL SET! │ ← Success Green, Bold
│ │
│ Your app will now send automated... │ ← Charcoal Medium
│ │
│ ╔═════════════════════════════════╗ │
│ ║ 💡 QUICK TIP ║ │ ← Safety Red
│ ║ You can update contacts or ║ │ background (20%)
│ ║ permissions anytime in Settings║ │ with border
│ ╚═════════════════════════════════╝ │
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ FINISH SETUP ┃ │ ← Success Green button
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
└─────────────────────────────────────────┘
- Standard Material colors
- Small text labels
- No color differentiation between tabs
┌─────────────────────────────────────────┐
│ ┏━━━┓ ┏━━━┓ ┏━━━┓ │ ← Light Gray background
│ ┃ 🏠 ┃ ┃ 👤 ┃ ┃ ⚙️ ┃ │
│ ┃HOME┃ ┃CONT┃ ┃SETT┃ │ ← Bold uppercase
│ ┗━━━┛ ┗━━━┛ ┗━━━┛ │ 11sp text
│ (Red) (Blue) (Yellow) │ ← Color-coded tabs
└─────────────────────────────────────────┘
Selected tab gets:
- Icon & text in themed color (Red/Blue/Yellow)
- 20% opacity background indicator
- Bold font weight
- Plain "Coming Soon" text
- No visual interest
┌─────────────────────────────────────────┐
│ │
│ │
│ 404 │ ← Error Code (#FF1744)
│ │ 72sp, ExtraBold
│ │ 4sp letter spacing
│ CONTACTS MANAGEMENT │ ← Charcoal, Bold
│ │ Uppercase
│ Coming Soon │ ← Charcoal Medium
│ │
└─────────────────────────────────────────┘
████ Safety Red #E53935 ← SOS, Critical
████ Amber Yellow #FDD835 ← Warnings
████ Trust Blue #1E88E5 ← Information
████ Off White #F9FAFB ← Background
████ Light Gray #ECEFF1 ← Cards
████ Charcoal #212121 ← Text
████ Critical Red #D32F2F ← Emergency
████ Success Green #4CAF50 ← Success
████ Error Code #FF1744 ← 404
████ System Green #00E676 ← System
████ Dark Background #1A1A1A ← Main BG
████ Dark Surface #2D2D2D ← Cards
████ Darker Surface #0D0D0D ← Deep BG
- Before: Mixed case, standard weights
- After: UPPERCASE headers, ExtraBold fonts, increased letter spacing
- Before: 220dp, flat red, no effects
- After: 200dp + 240dp glow, gradient, pulse animation, glitch effects
- Before: Plain white cards, no borders
- After: Themed backgrounds, 1-3dp borders, proper elevation, rounded corners
- Before: Generic purple/blue theme
- After: Red = Danger, Yellow = Warning, Blue = Trust, Green = Success
- Before: Lighter red background
- After: 404 dark mode with glitch effects, neon accents, system-style text
- Before: Standard size (24dp)
- After: Larger icons (48-80dp), color-coded by urgency
- Before: Default blue
- After: Safety Red for critical, Amber for warnings, color-coded track
- Before: Standard rounded buttons
- After: Large (56-80dp height), bold text, themed colors, proper elevation
CRITICAL → Error Code #FF1744 → 72sp, ExtraBold
URGENT → Safety Red #E53935 → 36sp, Bold
WARNING → Amber Yellow #FDD835 → 28sp, SemiBold
INFO → Trust Blue #1E88E5 → 20sp, Medium
SUCCESS → Success Green #4CAF50 → 20sp, Medium
CRITICAL → 100ms (glitch effect)
URGENT → 1200ms (SOS pulse)
WARNING → 1000ms (glow effect)
NORMAL → 300ms (transitions)
- Outer ring: 240dp diameter
- Pulsing from 0.3 to 0.7 alpha
- Safety Red with radial fade
- 1000ms cycle, infinite
- Horizontal offset: 0-2dp
- 100ms rapid cycle
- Applied to "EMERGENCY ACTIVE" text
- Creates digital glitch aesthetic
- < 10 seconds: Safety Red
- 10-30 seconds: Amber Yellow
-
30 seconds: Trust Blue
- Smooth color transitions
- Empty: Safety Red
⚠️ - Has contacts: Success Green ✓
- Visual feedback at a glance
- Clean, high-contrast interface
- Off White backgrounds
- Charcoal text
- Colorful accent elements
- Professional appearance
- 404 cyber aesthetic
- Very dark backgrounds (#1A1A1A)
- Neon accent colors
- Glitch effects
- High-tech appearance
- Headers: ExtraBold, UPPERCASE, 2-4sp letter spacing
- Subheaders: Bold, UPPERCASE, 1sp letter spacing
- Body: Medium weight, sentence case
- Labels: Bold, UPPERCASE, 0.5sp letter spacing
- Sections: 32-48dp
- Elements: 16-24dp
- Components: 8-12dp
- Text lines: 4-8dp
- Critical: 3dp, Error Code
- Important: 2dp, themed color
- Standard: 1dp, Medium Gray
- Large cards: 16dp
- Buttons: 12-16dp
- Small cards: 8-12dp
- Inputs: 12dp
Visual Changes Complete: ✅
Aesthetic: Emergency Alert + 404 Error
User Experience: Maximum visibility and urgency
Status: Ready for production 🚀