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
Area
What can be customized
Notes
Text
Title, subtitle, button label
Fully localizable; keep succinct for scanability
Email Input (Idle)
Border, surface, placeholder text
Maintain clear contrast with focused/error states
Close Icon
Color
Should remain subtle vs. brand accents
Primary Button (Disabled)
Label and disabled colors
Must remain visually distinct from enabled state
Footer
“Verified by Incode” line
Optional but recommended for transparency and trust
Brand Colors
Header, accents
Use existing brand tokens to ensure consistency
Fixed Elements
Element
Why it is fixed
Layout structure & spacing
Ensures cross-module consistency and predictable rhythm
Input height & radius
Standardized for touch ergonomics and familiarity
Button placement
Keeps spatial consistency through all states
WCAG minimum contrast
Mandatory for accessibility compliance
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
Subtitle text
text-body-secondary
#60667C
Email input border (idle)
input-border-default
#EBECEF
Email input surface (idle)
input-surface-default
#FCFCFD
Email input placeholder
input-text-field-placeholder
#A3A8B8
Email input text
input-text-field-default
#262831
Close icon
icon-neutral-500
#60667C
Button background (disabled)
button-primary-surface-disabled
#EBECEF
Button text (disabled)
button-primary-text-disabled
#A3A8B8
Footer text
text-body-secondary
#60667C
Background surface
surface-neutral-0
#FFFFFF
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
Area
What can be customized
Notes
Text
Title, subtitle, button label
Fully localizable; keep concise
Email Input (Focused)
Border, surface, caret, placeholder
Must keep high contrast vs. idle/error
Close Icon
Color
Remains secondary to brand accents
Primary Button (Enabled)
Label and background/text colors
Use brand primary; ensure WCAG contrast
Footer
“Verified by Incode” line
Optional but recommended for transparency and trust
Fixed Elements
Element
Why it is fixed
Input height, radius, spacing
Touch ergonomics and cross-module consistency
Button placement
Spatial predictability across states
WCAG minimum contrast
Required for certification and compliance
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
Subtitle text
text-body-secondary
#60667C
Email input border (focused)
input-border-focused
#006AFF
Email input surface (focused)
input-surface-focused
#FCFCFD
Email input text
input-text-field-default
#262831
Email input placeholder
input-text-field-placeholder
#A3A8B8
Close icon
icon-neutral-500
#60667C
Button background (enabled)
button-primary-surface-default
#006AFF
Button text (enabled)
button-primary-text-default
#FFFFFF
Background surface
surface-neutral-0
#FFFFFF
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 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.
Uses tertiary text token, consistent with interaction patterns
Brand Colors
Primary accent and focus color
Derived from brand-500 and related tokens
Footer
“Verified by Incode” line
Optional but recommended for transparency and trust
Fixed Elements
Element
Why it is fixed
Input field layout
Ensures consistency across all OTP verification steps
Field spacing
Optimized for readability and tap accuracy
Countdown behavior
Fixed duration to standardize retry experience
Button placement
Standard alignment for visual rhythm and reachability
Typography hierarchy
Maintains cross-platform readability
WCAG minimum contrast
Required for accessibility certification
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
OTP input border (focused)
input-border-focused
#006AFF
OTP input surface (focused)
input-surface-focused
#FCFCFD
OTP input text
input-text-field-default
#262831
Button background (disabled)
button-primary-surface-disabled
#EBECEF
Button text (disabled)
button-primary-text-disabled
#A3A8B8
Countdown text
text-body-secondary
#60667C
Resend link
button-tertiary-text-disabled
#60667C
Background surface
surface-neutral-0
#FFFFFF
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
Area
What can be customized
Notes
Text
Title and helper text
Fully localizable; tone can be adapted
OTP Fields (Disabled)
Border, background, and text color
Should visually indicate a non-editable state
Buttons
Spinner color, background, and text
Spinner inherits brand color for visual consistency
Resend / Change Number Text
Color and link state
Uses tertiary text token
Brand Colors
Button and header accents
Derived from brand-... tokens
Footer
“Verified by Incode” text
Optional but recommended for consistency, transparency and trust
Fixed Elements
Element
Why it is fixed
Layout structure
Ensures consistency across all verification states
Button position
Aligned for accessibility and predictable interaction flow
Input layout and spacing
Maintains readability during transition states
Loading spinner size
Standardized for cross-platform consistency
Typography hierarchy
Maintains readability and balance
WCAG minimum contrast
Ensures accessible visual design
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
OTP input border (disabled)
input-border-disabled
#EBECEF
OTP input surface (disabled)
input-surface-disabled
#EBECEF
OTP input text (disabled)
input-text-field-disabled
#A3A8B8
Spinner accent
surface-brand-400-static
#3388FF
Button background (loading)
button-primary-surface-default
#006AFF
Button text (loading)
button-primary-text-default
#FFFFFF
Resend / Change Email text
button-tertiary-text-disabled
#60667C
Footer text
text-body-secondary
#60667C
Background surface
surface-neutral-0
#FFFFFF
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
Area
What can be customized
Notes
Text
Loading message (e.g., “Processing...”)
Fully localizable; keep short and neutral
Spinner
Color, animation speed
Must use brand color for recognition; avoid slowing animation
Background
Color and safe area padding
Maintain contrast and visual calmness
Brand Colors
Header and spinner accent
Should use primary brand token for consistency
Close Icon
Color
Optional; use neutral tone for secondary emphasis
Fixed Elements
Element
Why it is fixed
Spinner placement
Centralized for visual focus and balance
Animation timing
Consistent across all processing states in SDK
Typography size
Maintains clear hierarchy and visual stability
Button removal
Reduces confusion during non-interactive state
Layout rhythm
Matches other module loading states for cohesion
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Spinner accent (primary)
spinner-surface-primary
#006AFF
Spinner accent (secondary)
spinner-surface-secondary
#E5F0FF
Title text
spinner-text-title
#262831
Background surface
surface-neutral-0
#FFFFFF
Icon
icon-neutral-500
#60667C
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
Area
What can be customized
Notes
Text
Confirmation message (e.g., “Email verified!”)
Fully localizable; tone should remain concise and positive
Success Icon
Color, animation
Should use the positive status color token; simple checkmark animation is acceptable
Brand Colors
Header and accent
Must align with overall brand identity while maintaining readability
Background
Color
Keep high contrast for the icon and message
Close Icon
Color
Optional; maintain neutral tone for minimal distraction
Fixed Elements
Element
Why it is fixed
Layout structure
Ensures consistent feedback presentation across modules
Icon size and position
Optimized for recognition and accessibility
Text alignment
Central alignment for visual balance
Typography hierarchy
Maintains brand consistency and readability
WCAG minimum contrast
Required for accessibility compliance
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
Success icon
icon-status-positive
#189F60
Icon background
icon-neutral-0
#FFFFFF
Close icon
icon-neutral-500
#60667C
Background surface
surface-neutral-0
#FFFFFF
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
Area
What can be customized
Notes
Text
Error message and helper text
Fully localizable; keep concise and polite tone
Input Fields (Error)
Border, background, text color
Must maintain strong color contrast for accessibility
Error Icon
Color
Uses negative (error) status color token
Buttons
Label, color state
Maintain clear disabled and active visual distinction
Links (Resend / Change Email)
Color and hover states
Use brand accent color for recognition
Brand Colors
Header and accents
Should align with existing brand color tokens
Footer
“Verified by Incode” text
Optional but recommended for consistency, transparency and trust
Fixed Elements
Element
Why it is fixed
Layout structure
Maintains consistency across OTP states
Input field shape and spacing
Optimized for error visibility
Button placement
Standardized for user familiarity
Typography hierarchy
Preserves consistent hierarchy and legibility
Error message position
Fixed to align directly below input fields
WCAG minimum contrast
Required for accessibility compliance
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
Error border
input-border-negative
#E71111
Error surface
input-surface-negative
#EBECEF
Error text
input-text-helper-negative
#E71111
Error icon
input-icon-negative
#E71111
Input text (default)
input-text-field-default
#262831
Button background (disabled)
button-primary-surface-disabled
#EBECEF
Button text (disabled)
button-primary-text-disabled
#A3A8B8
Links (Resend / Change Email)
button-tertiary-text-default
#006AFF
Footer text
text-body-secondary
#60667C
Background surface
surface-neutral-0
#FFFFFF
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
Area
What can be customized
Notes
Text
Heading and button label
Fully localizable; tone should remain calm and neutral
Error Icon
Color, size, animation
Should use negative color token; avoid using motion-heavy icons
Button (Primary)
Label, background, text color
Use brand accent for consistency; maintain high contrast
Brand Colors
Header, accent
Must match brand token palette
Background
Color
Maintain sufficient contrast for visibility and focus
Fixed Elements
Element
Why it is fixed
Layout and spacing
Consistent centered hierarchy across all result states
Icon and text alignment
Ensures immediate clarity and minimal scanning effort
Typography weight
Reinforces error hierarchy; avoids visual noise
Button placement
Fixed below feedback message to preserve spatial consistency
WCAG minimum contrast
Required for accessibility compliance
Token Reference
UI Element
Token
Raw Value
Brand name
surface-brand-500-static
#006AFF
Title text
text-body-primary
#262831
Error icon
icon-status-negative
#E71111
Icon background
icon-neutral-0
#FFFFFF
Close icon
icon-neutral-500
#60667C
Button background (primary)
button-primary-surface-default
#006AFF
Button text
button-primary-text-default
#FFFFFF
Background surface
surface-neutral-0
#FFFFFF
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.
