# ----------------------------------------------- # Mitra-AI • Wireframe 01 • Login / Sign-up # ----------------------------------------------- meta: screen_id: "01_login" version: "1.0.0" updated: "2025-06-20" viewport_desktop: 1440 # px viewport_mobile: 375 # px palette: primary: "#FF8135" # saffron accent secondary: "#353535" # dark text / buttons background:"#FFFFFF" text_main: "#353535" text_sub: "#5F5F5F" border: "#E0E0E0" success: "#2BB673" error: "#E63946" header: height: 72 # px desktop elements: - type: logo src: "Mitra_logo.svg" size: 48 action: "home_refresh" - type: tagline text: "Talk • Breathe • Thrive" show_on: ["desktop"] - type: lang_selector icon: "globe" options: ["EN","HI","TE"] tooltip: "Change language" - type: hotline_link icon: "phone" text: "Need help? 91529 87821" href: "tel:+919152987821" emphasis: true - type: skip_link_hidden text: "Skip to main content" body: layout: center_card card: width_desktop: 440 radius: 8 shadow: "4dp" sections: - id: title text: "Sign in to start your chat" style: h2 - id: auth_tabs tabs: ["Email / Mobile", "Google SSO"] - id: auth_fields fields: - id: phone_email_input label: "Email or Mobile" placeholder: "example@domain.com / +91-9876543210" validators: ["required","format"] show_flag_picker: true - id: send_otp_btn text: "Send OTP" state_default: "enabled" - id: otp_input label: "Enter 6-digit OTP" placeholders: ["-","-","-","-","-","-"] state_default: "disabled" - id: timer_resend text: "Resend in 30 s" style: subtle_text - id: consent_row checkbox: id: dpdp_consent text: "I consent to Mitra-AI processing my data under India DPDP 2023." legal_links: ["Privacy Policy","Terms of Service"] age_gate: "By continuing, you confirm you’re 18+" - id: continue_cta button: text: "Continue" style: primary enabled_condition: ["otp_verified","dpdp_consent_checked"] - id: alt_links links: - "Login with Email + Password" - "Forgot account? Contact support" footer: sitemap_links: ["Privacy","Terms","Accessibility","Contact"] hosting_note: "Servers hosted in India 🇮🇳" cookie_toast: text: "Mitra-AI uses cookies to improve your experience." dismiss_btn: "Got it" accessibility: wcag_level: "AA" features: ["focus_outlines","label_for","skip_to_content"] security_trust: encryption_badge: "AES-256 encrypted" lock_icon_position: "inside_phone_email_input" disclaimer_banner: "Mitra-AI is an AI companion, not a licensed therapist. In emergencies call 91529 87821." prototype_interactions: - name: send_otp_flow trigger: click_send_otp_btn effects: ["start_timer","disable_send_btn","enable_otp_input"] - name: consent_tooltip trigger: click_continue_disabled show: "tooltip: Please consent to proceed" - name: hotline_mobile trigger: click_hotline_mobile action: "tel:+919152987821" deliverable: tool: "Figma" pages: ["01_Login_desktop","01_Login_mobile"] layer_groups: ["Header","AuthCard","Footer","Modals"] annotations: "Include alt-text + developer notes for validation, encryption, focus order."