Customization

This section outlines the elements you can customize within the Phone Number Input module to match your brand while preserving Incode’s core UX. It clarifies which areas are flexible, such as text, and brand colors and which elements remain fixed to ensure consistency, accessibility, and optimal capture performance across platforms.

Empty Form Screen

This screen represents the initial state of the Phone Number Input flow. The user is prompted to enter their phone number and country code. At this stage, no input is provided, and the Continue button is disabled.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• If customizing text, ensure clarity and brevity (e.g., “Enter your number” instead of “Please provide your mobile phone”).
• When adjusting button color, maintain strong contrast for accessibility.

---

Form Filling Screen (Focused State)

This screen represents the focused input state of the Phone Number Input module.

When the user begins typing, the input field becomes highlighted with the focused border color, and the Continue button activates once the phone number is valid. This state communicates interaction and readiness to proceed.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• You can adjust the focus color to match your brand, but ensure it remains visually distinct from error states.
• If modifying typography, preserve visual differences between title, subtitle, and input to maintain clarity.
• Always test your custom color scheme in light and dark modes for accessibility consistency.

---

OTP Entry Screen (Focused State)

This screen appears after the user enters their phone number and the system sends a one-time passcode (OTP) via SMS.

The user is prompted to enter the code in a series of clearly separated fields. As the input fields gain focus, the borders and surfaces adapt to indicate active interaction. A countdown below the button communicates when the user can resend the code.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• You can adjust the focus color to match your brand, but ensure it remains visually distinct from error states.
• If modifying typography, preserve visual differences between title, subtitle, and input to maintain clarity.
• Always test your custom color scheme in light and dark modes for accessibility consistency.

---

OTP Checking (Verification Loading) Screen

This screen represents the verification state of the Phone Number Input module. After the user submits the one-time passcode (OTP), the system verifies the input. The interface locks input fields and transitions the button to a loading spinner, indicating that validation is in progress. During this state, interaction is temporarily disabled until the verification completes.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Avoid introducing additional text or loaders elsewhere on the screen.
• If modifying color schemes, ensure that disabled input states remain visibly distinct.

---

Success Screen

This screen appears after the user’s phone number has been successfully verified. It provides a clear confirmation of success before the flow transitions to the next module or completion step. The layout is intentionally minimal to maintain focus on the success feedback.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Keep the confirmation text short and positive; don’t include instructions or next steps here.
• If using customized colors, ensure they don’t reduce the contrast of the success message or icon.

---

OTP Error Screen

This screen appears when the user enters an incorrect or expired code. It provides immediate visual feedback through red highlight states and an error message. The interface allows the user to resend the code or change their phone number before attempting verification again.



Customizable Elements



Fixed Elements



Token Reference



Design Notes

• Error messaging should remain concise — don’t overload users with explanations.
• Avoid replacing the red border with icons alone; border color communicates immediacy effectively.