MULTI-PLATFORM SIGN-UP DESIGN SPECIFICATION

FLOW ARCHITECTURE (3-screen sequential):

SCREEN 1: EMAIL ENTRY (Platform-specific input)
iOS → Native email keyboard with suggestions
Android → Gmail autofill integration, autocorrect disabled
Web → Text input with :focus ring, 2px border on active state
• Field validation: Real-time after 3 chars
• Error state: Red border, help text below
• Password strength meter: 4-level visual indicator

SCREEN 2: PASSWORD & PROFILE
iOS → Password field shows/hide toggle (right-aligned button)
Android → Material Design password visibility icon (eye icon)
Web → Checkbox "Show password" below field
• Name input: First+last on iOS/Android (stacked), single "Full Name" on web
• Avatar picker: Default avatar grid (6 options) on mobile, upload + crop on web
• Constraint: Form fits single viewport without scroll

SCREEN 3: EMAIL CONFIRMATION
• All platforms: 6-digit code input (auto-advance per digit)
• iOS: Paste auto-fill from Mail app
• Android: SMS retriever API auto-reads code
• Web: Clipboard paste support + 60-sec countdown timer
• Fallback: Resend link if code doesn't arrive

CROSS-PLATFORM PATTERNS:
→ Safe area insets respected on notch/cutout phones
→ Min tap target: 44pt iOS, 48dp Android, 44px web
→ Color contrast: WCAG AA minimum (4.5:1 text)
→ Keyboard avoidance: Form fields reposition above keyboard on iOS/Android
→ Submit button: Full-width primary CTA, disabled until valid input
→ Loading state: 2sec spinner max before timeout message

ACCESSIBILITY:
• Screen reader labels: associate label with input via aria-labelledby
• Error messages: aria-live="polite" announcements
• Keyboard navigation: Tab order matches visual left-to-right
• Mobile: Voice input support for email field