CON-001 | Splash Screen

Screen Overview

• Type: Fullscreen overlay (no status bar, no bottom nav)
• Purpose: Brand impression while app initializes and loads resources
• Duration: 2-3 seconds, then auto-navigate to onboarding or home
• Navigation: Auto-advances to CON-002-onboarding-welcome.html (first launch) or CON-030-home.html (returning user)

Layout Specifications

• Background: Solid fill #043F2D (Primary Dark Green)
• Content alignment: Centered vertically and horizontally
• Padding: 40px top/bottom, 32px left/right

Component Specs

• Logo: ffm-logo.png (official brand logo) | Width: 180px | Auto height | Margin-bottom: 24px
• Tagline: Alatsi 16px | Color: #E9EFE7 at 80% opacity | Margin-bottom: 48px
• Spinner: 32x32px | 3px border | Border color: #E9EFE7 at 20% opacity | Top border: #C9F06B | Animation: rotate 0.8s linear infinite

Behavior Notes

• Logo has a text fallback if image fails to load
• Spinner runs continuously until navigation occurs
• No user interaction available on this screen
• Transition: Fade out splash, fade in next screen

State Variations

• None: This is a fullscreen overlay with no state variations

Accessibility

• Spinner has role="status" and aria-label="Loading"
• Logo image has descriptive alt text