Customization

This section outlines the elements you can customize within the Email 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

Initial state of the module. The email field is empty, validation hasn’t run yet, and Continue is disabled until a valid format is entered.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

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

Focused Input Screen

State when the user is actively typing and the email format is valid. The input shows a focused style and "Continue" button becomes enabled.

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 email and the system sends a one-time passcode (OTP) to this email.

The user is prompted to enter the 6-digit verification code in a single input field. As the field gains focus, the border and surface 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 OTP. 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

• If modifying color schemes, ensure that disabled input states remain visibly distinct.

Processing Screen

This optional screen appears after the OTP verification is completed and before the module transitions to a success or failure state. It communicates that the system is finalizing the verification process, providing visual feedback to assure the user that progress is ongoing.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

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

Success Screen

This screen appears after the user’s email 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 email 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.

Failure Screen

This screen appears when a critical issue prevents the verification process from completing — for example, a timeout, or unexpected backend failure. It reassures the user with clear feedback and offers a “Try again” action to quickly restart the verification flow.

Customizable Elements

Fixed Elements

Token Reference



Design Notes

• Error messaging should remain concise — don’t overload users with extra details.
• Avoid specifying is details whether the error is due to network, validation, or server issues to prevent potential reverse-engineering attempts by fraudsters.