This section outlines the elements you can customize within the eKYC module to match your brand while preserving Incode’s core UX. It clarifies which areas are flexible, such as text, illustrations, and brand colors and which elements remain fixed to ensure consistency, accessibility, and optimal capture performance across platforms.
The Empty Form screen introduces the eKYC Verification step and clearly communicates that the user must provide personal and document information for identity validation.
| Area | What can be customized | Notes |
|---|
| Text | Title (“eKYC Verification”), field labels, placeholders, helper messages, error messages, button text | Fully localizable; tone and terminology can be adapted to match brand voice and regulatory requirements. |
| Field Set | Displayed fields (e.g., Driver’s License, Credit Bureau, Registry source) | Defined by selected verification source in dashboard configuration; structure remains consistent. |
| Input States | Helper text, inline validation messaging | Validation logic is fixed; messaging style can be customized. |
| Background Color | Screen background | Must maintain strong contrast with inputs, text, and CTAs for accessibility compliance. |
| Buttons (CTA) | Button label (“Continue”), background color, text color | Uses brand tokens |
| Brand Colors | Header text, accent color, input focus state, status indicators | Applied via design tokens; avoid reducing clarity in critical validation states. |
| Element | Why it is fixed |
|---|
| Verification logic & decision rules | Defined by backend services and compliance requirements; cannot be modified at the UI level. |
| Required field validation rules | Ensures data accuracy, fraud prevention, and regulatory compliance. |
| Form structure hierarchy | Designed for clarity, usability, and completion consistency across markets and platforms. |
| Processing flow behavior | Prevents duplicate submissions, race conditions, and system instability. |
| CTA state behavior | Controls when submission is allowed and manages loading/disabled states to prevent invalid actions. |
| Error handling logic | System-defined to protect data integrity and ensure consistent feedback. |
| Component spacing & safe areas | Guarantees cross-device consistency and accessibility across screen sizes. |
| Text hierarchy | Maintains clear task communication and visual clarity within the flow. |
| Close icon position | Standardized for consistency across modules and predictable navigation behavior. |
| Minimum processing duration | Ensures verification checks complete properly and avoids abrupt UI transitions. |
| WCAG contrast requirements | Mandatory for accessibility compliance and inclusive user experience. |
| UI Element | Token | Raw Value |
|---|
| Title text (eKYC Verification) | text-body-primary | #262831 |
| Input label text | text-body-primary | #262831 |
| Input border | input-border-default | #EBECEF |
| Input surface | input-surface-default | #FCFCFD |
| Input placeholder | input-text-field-placeholder | #A3A8B8 |
| Input text | input-text-field-default | #262831 |
| Dropdown border (idle) | input-border-default | #EBECEF |
| Dropdown surface | input-surface-default | #FCFCFD |
| Dropdown text | input-text-field-default | #262831 |
| Button background (disabled) | button-primary-surface-disabled | #EBECEF |
| Button text (disabled) | button-primary-text-disabled | #A3A8B8 |
| Background surface | surface-neutral-0 | #FFFFFF |
- Keep field labels and helper text concise to reduce cognitive load.
- Use brand colors sparingly for focus states and primary CTAs to maintain clarity.
- Preserve sufficient color contrast across all states (idle, focus, error, disabled).
The Form Filled (Ready to Submit) state appears once all required fields in the eKYC Verification form have been completed with valid information. It confirms that the data meets validation requirements and that the user can proceed.
| Area | What can be customized | Notes |
|---|
| Text Elements | Title, input labels, placeholders, section headers, button text, helper messages | Fully localizable. Tone and terminology can align with brand and regulatory requirements. |
| Color Styling | Background, input surfaces, text color, focus state, CTA background and text color | Applied via design tokens. Must maintain accessibility contrast standards. |
| CTA Label | Primary button text (e.g., “Continue”) | Editable; action meaning must remain consistent with flow behavior. |
| Icons & Logo | Brand logo and informational/status icons | Visual style may follow brand guidelines; placement remains consistent. |
| Localization | All textual content | Supports full localization. Layout should accommodate text expansion. |
| Element | Why it is fixed |
|---|
| Validation logic | All required fields must pass system-defined validation rules before enabling submission. |
| CTA enabled behavior | The primary button activates only when all mandatory inputs are valid. |
| Form structure hierarchy | Field grouping and order are standardized for clarity and completion consistency. |
| Processing transition behavior | Submission triggers a controlled transition to the processing state. |
| Error handling logic | Defined by backend validation and compliance rules. |
| Component spacing & safe areas | Ensures cross-device consistency and accessibility. |
| Text hierarchy | Maintains clear task communication and visual structure. |
| WCAG contrast requirements | Mandatory for accessibility compliance. |
| UI Element | Token | Raw Value |
|---|
| Title text (eKYC Verification) | text-body-800-primary | #262831 |
| Section title (Driver’s License details) | text-body-800-primary | #262831 |
| Input label text | text-body-800-primary | #262831 |
| Input text | input-text-field-default | #262831 |
| Input border (idle) | input-border-default | #82879A |
| Input surface (idle) | input-surface-default | #FCFCFD |
| Input border (focused) | input-border-focused | #006AFF |
| Input surface (focused) | input-surface-focused | #FCFCFD |
| Dropdown border (idle) | dropdown-border-default | #82879A |
| Dropdown surface (idle) | dropdown-surface-default | #FCFCFD |
| Dropdown text | dropdown-text-input-default | #262831 |
| Button background (default) | button-primary-surface-default | #006AFF |
| Button text (default) | button-primary-text-default | #FFFFFF |
| Screen background | surface-neutral-0 | #FFFFFF |
- Keep the layout clear and vertically structured to reduce cognitive load.
- The “focused” token reference indicates an actively selected input field (user tap/click), providing visual feedback during data entry.
This state appears after form submission and indicates that identity verification is in progress. Inputs and the primary CTA are disabled while the system processes and validates the submitted data.
| Area | What can be customized | Notes |
|---|
| Text Elements | Title, input labels, helper messages, footer text | Fully localizable. Wording can align with brand tone and regulatory language. |
| Color Styling | Background, input surfaces (disabled state), text color, CTA color | Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Processing Indicator Style | Spinner style and accent color | Animation behavior remains fixed; color must meet accessibility standards. |
| Icons & Logo | Brand logo and footer trust indicator | Visual style may follow brand guidelines; placement remains consistent. |
| Localization | All text content | Supports full translation. Layout should account for text expansion. |
| Element | Why it is fixed |
|---|
| Submission lock behavior | Prevents duplicate submissions while verification is in progress. |
| Disabled input state | Inputs are non-editable during processing to ensure data consistency. |
| Processing flow logic | Controlled by backend verification services; cannot be modified at UI level. |
| Minimum processing duration | Prevents abrupt transitions and ensures proper system response handling. |
| CTA loading state behavior | Displays a loading indicator and blocks further interaction until resolution. |
| Error & success routing logic | System-defined transition to next state based on verification outcome. |
| Form structure hierarchy | Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements | Accessibility compliance is mandatory, including disabled and loading states. |
| Footer placement (“Verified by Incode”) | Standardized for trust signaling and product consistency. |
| UI Element | Token | Raw Value |
|---|
| Title text (eKYC Verification) | text-body-800-primary | #262831 |
| Section title (Driver’s License details) | text-body-800-primary | #262831 |
| Input label (enabled) | input-text-label-default | #262831 |
| Input label (disabled) | input-text-label-disabled | #82879A |
| Input text (disabled) | input-text-field-disabled | #82879A |
| Input border (disabled) | input-border-disabled | #E4E6EC |
| Input surface (disabled) | input-surface-disabled | #F4F5F7 |
| Dropdown text (disabled) | dropdown-text-field-disabled | #82879A |
| Dropdown border (disabled) | input-border-disabled | #E4E6EC |
| Dropdown surface (disabled) | input-surface-disabled | #F4F5F7 |
| Calendar icon (disabled) | icon-neutral-300 | #A3A8B8 |
| Dropdown icon (disabled) | icon-neutral-300 | #A3A8B8 |
| Button background (processing) | button-primary-surface-default | #006AFF |
| Spinner icon | icon-brand-500-static | #FFFFFF |
| Screen background | surface-neutral-0 | #FFFFFF |
- Disable inputs and CTA interaction during processing.
- Preserve layout stability when switching to loading state.
- Maintain accessible contrast for spinner and disabled elements.
The Form Error state appears when one or more fields contain invalid or non-compliant data. The system provides inline validation feedback, clearly highlighting the affected field and displaying an error message to guide correction.
The primary CTA remains disabled until all validation errors are resolved.
| Area | What can be customized | Notes |
|---|
| Text Elements | Title, field labels, error messages, helper text, button text | Fully localizable. Error tone can align with brand voice while remaining clear and compliant. |
| Color Styling | Background, input surfaces, text color, CTA color | Applied via design tokens. Error colors must preserve accessibility contrast. |
| Error Messaging Content | Inline validation copy | Messaging style may vary; validation logic cannot. |
| Icons | Error icon (if displayed) | Visual style may follow brand guidelines; semantic meaning must remain consistent. |
| Localization | All textual content | Supports translation; layout must accommodate text expansion. |
| Element | Why it is fixed |
|---|
| Validation logic | Defined by backend rules and compliance requirements. |
| Error state behavior | Field border, helper text, and status color change are system-controlled. |
| CTA disabled behavior | Prevents submission while invalid data exists. |
| Error placement (inline) | Ensures clear association between field and message. |
| Form hierarchy & layout | Maintains usability and scanning consistency. |
| WCAG contrast requirements | Error states must meet accessibility standards. |
| Status color semantics | Negative color usage is standardized across the system. |
| UI Element | Token | Raw Value |
|---|
| Input text | input-text-field-default | #262831 |
| Input border (error) | input-border-negative | #E71111 |
| Input surface (error) | input-surface-negative | #EBECEF |
| Error helper text | input-text-helper-negative | #E71111 |
| Error status color | surface-status-negative-600 | #E71111 |
| Error icon | input-icon-negative | #E71111 |
| Disabled button background | button-primary-surface-disabled | #EBECEF |
| Disabled button text | button-primary-text-disabled | #A3A8B8 |
| Screen background | surface-neutral-0 | #FFFFFF |
- Use negative status color only for validation failures to preserve semantic clarity.
- Maintain layout stability when helper text appears.
- Ensure error color contrast meets accessibility requirements.
The Processing Screen appears after form submission when eKYC verification is being completed by backend services. It communicates that validation is in progress and temporarily restricts user interaction until a result is returned.
| Area | What can be customized | Notes |
|---|
| Heading Text | “Processing…” message | Fully localizable. Wording can align with brand tone. |
| Color Styling | Background, logo color, text color | Applied via design tokens. Must maintain accessibility contrast. |
| Spinner Style | Spinner design and accent color | Animation behavior remains fixed; visual style may align with brand. |
| Brand Logo | Logo appearance | Must follow brand guidelines; placement remains consistent. |
| Localization | All textual content | Supports translation; layout must account for text expansion. |
| Element | Why it is fixed |
|---|
| Processing behavior logic | Controlled by backend verification services. |
| Interaction lock | Prevents navigation or modification during verification. |
| Minimum display duration | Avoids flicker and ensures perceived stability. |
| Spinner animation behavior | Standardized motion timing for consistency. |
| Screen layout hierarchy | Maintains vertical alignment and focus on status message. |
| WCAG contrast compliance | Required for accessibility across themes. |
| UI Element | Token | Raw Value |
|---|
| Spinner primary accent | spinner-surface-primary | #006AFF |
| Spinner secondary surface | spinner-surface-secondary | #E6F0FF |
| Processing text | spinner-text-title | #262831 |
| Screen background | surface-neutral-0 | #FFFFFF |
- The spinner must provide immediate feedback after submission.
- Maintain layout simplicity to reduce cognitive load during waiting states.
- Keep messaging concise to avoid uncertainty.
The Failure Screen appears when eKYC verification cannot be completed due to validation conflicts, backend errors, or system issues. It clearly communicates that the process was unsuccessful and provides the user with an option to retry.
| Area | What can be customized | Notes |
|---|
| Heading / Message Text | Title and supporting message (e.g., “Something went wrong”) | Fully localizable. Messaging tone may align with brand voice while remaining clear and neutral. |
| CTA Label | Button text (e.g., “Try again”) | Editable; action must preserve retry behavior. |
| Color Styling | Background, text color, CTA color | Applied via design tokens. Must maintain accessibility contrast. |
| Error Icon Style | Icon visual style | Must preserve negative semantic meaning. |
| Localization | All textual elements | Layout should support text expansion across languages. |
| Element | Why it is fixed |
|---|
| Failure routing logic | Determined by backend verification result. |
| Retry behavior | CTA triggers a controlled restart of the verification flow. |
| Negative status color usage | Standardized to maintain consistent semantic meaning. |
| Screen layout hierarchy | Centered status layout ensures clarity and focus. |
| WCAG contrast requirements | Error state must meet accessibility standards. |
| UI Element | Token | Raw Value |
|---|
| Error icon surface | icon-status-negative | #E71111 |
| Error icon container | surface-status-negative-600 | #E71111 |
| Failure message text | text-body-800-primary | #262831 |
| Button background (default) | button-primary-surface-default | #006AFF |
| Button text | button-primary-text-default | #FFFFFF |
| Screen background | surface-neutral-0 | #FFFFFF |
- The spinner must provide immediate feedback after submission.
- Maintain layout simplicity to reduce cognitive load during waiting states.
- Keep messaging concise to avoid uncertainty.
The Success Screen appears when eKYC verification has been successfully completed. It confirms that the user’s identity has been validated and indicates that the flow will proceed to the next step or module.
| Area | What can be customized | Notes |
|---|
| Heading Text | Confirmation message (e.g., “eKYC verified!”) | Fully localizable. Messaging tone may align with brand voice. |
| Color Styling | Background, text color, logo color | Applied via design tokens. Must maintain accessibility contrast. |
| Success Icon Style | Icon visual design | Must preserve positive semantic meaning. |
| Localization | All textual content | Layout should support text expansion across languages. |
| Text Alignment | Center alignment behavior | May be adjusted within layout guidelines. |
| Element | Why it is fixed |
|---|
| Success routing logic | Determined by backend verification result. |
| Positive status color usage | Standardized semantic mapping for success states. |
| Screen layout hierarchy | Centered status layout ensures clarity and focus. |
| Transition behavior | Automatically proceeds or triggers next configured step. |
| Navigation controls (close icon) | Placement standardized across modules. |
| WCAG contrast requirements | Mandatory for accessibility compliance. |
| UI Element | Token | Raw Value |
|---|
| Success icon (check) | icon-status-positive | #16A34A |
| Success icon container | surface-status-positive-500 | #16A34A |
| Success message text | text-body-800-primary | #262831 |
| Screen background | surface-neutral-0 | #FFFFFF |
- Keep confirmation messaging short and clear.
- Use positive status color exclusively for successful outcomes.
