This section outlines the elements you can customize within the Forms and data entry 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.
Entry point of the data entry module. This screen presents the user with a form titled "Enter your information," containing four customizable required fields: ID number, Email, Country of residence, and Date of Birth. All fields are empty and the "Continue" button is disabled until the user provides valid input..
| Area | What can be customized | Notes |
|---|
| Text | Title ("Enter your information"), button text | Fully localizable; tone and terminology can be adapted to match brand voice. |
| Input fields | Field order, optional vs required fields, input types, validation messaging | Configurable depending on workflow requirements and supported data collection rules. |
| 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 |
|---|
| Processing flow behavior | Prevents duplicate submissions and manages loading states during signature capture. |
| Text hierarchy | Maintains clear task communication and visual clarity within the flow. |
| WCAG contrast requirements | Mandatory for accessibility compliance and inclusive user experience. |
| UI Element | Token | Raw Value |
|---|
| Title text (Enter your information) | text-body-primary | #262831 |
| Field label text | input-text-label-default | #262831 |
| Field placeholder text | input-text-field-placeholder | #82879A |
| Input field surface | input-surface-default | #FCFCFD |
| Input field border | input-border-default | #82879A |
| Dropdown label text | dropdown-text-label-default | #262831 |
| Dropdown placeholder text | dropdown-text-input-placeholder | #82879A |
| Dropdown surface | dropdown-surface-default | #FCFCFD |
| Dropdown border | dropdown-border-default | #82879A |
| Screen background | surface-neutral-0 | #FFFFFF |
| Primary button (disabled) background | button-primary-surface-disabled | #EBECEF |
| Primary button (disabled) text | button-primary-text-disabled | #60667C |
- 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).
This state confirms that the user has completed all required fields in the form. All four customizable fields — ID number, Email, Country of residence, and Date of Birth — contain valid input, and the "Continue" button is now enabled, allowing the user to proceed to the next step.
| Area | What can be customized | Notes |
|---|
| Text Elements | Title, button text, badge text | 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. |
| Localization | All textual content | Supports full localization. Layout should accommodate text expansion. |
| Element | Why it is fixed |
|---|
| CTA enabled behavior | "Continue" button is enabled only when all required fields contain valid input. |
| 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 (Enter your information) | text-body-primary | #262831 |
| Field label text | input-text-label-default | #262831 |
| Field input text | input-text-field-default | #262831 |
| Input field surface | input-surface-default | #FCFCFD |
| Input field border | input-border-default | #82879A |
| Dropdown label text | dropdown-text-label-default | #262831 |
| Dropdown input text | dropdown-text-input-default | #262831 |
| Dropdown surface | dropdown-surface-default | #FCFCFD |
| Dropdown border | dropdown-border-default | #82879A |
| Screen background | surface-neutral-0 | #FFFFFF |
| Primary button (enabled) background | button-primary-surface-default | #006AFF |
| Primary button (enabled) text | button-primary-text-default | #FFFFFF |
- Keep the layout clear and vertically structured to reduce cognitive load.
- The enabled "Continue" button signals readiness to submit, using a distinct color shift from its disabled state to reinforce interactivity.
Transitional state shown after the user taps "Continue." The screen retains the form layout with all filled fields visible, while a loading spinner appears on the primary button, providing visual feedback that the system is processing the request.
| Area | What can be customized | Notes |
|---|
| Color Styling | Background, text color, success icon color, CTA color | Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Localization | All text content | Supports full translation. Layout should account for text expansion. |
| Element | Why it is fixed |
|---|
| Processing flow logic | Controlled by backend verification services; cannot be modified at UI level. |
| Form structure hierarchy | Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements | Accessibility compliance is mandatory, including disabled and loading states. |
| UI Element | Token | Raw Value |
|---|
| Title text (Enter your information) | text-body-primary | #262831 |
| Field label text | input-text-label-default | #262831 |
| Field input text (disabled) | input-text-field-disabled | #82879A |
| Input field surface (disabled) | input-surface-disabled | #EBECEF |
| Input field border (disabled) | input-border-disabled | #EBECEF |
| Dropdown label text | dropdown-text-label-default | #262831 |
| Dropdown input text (disabled) | dropdown-text-input-disabled | #82879A |
| Dropdown surface (disabled) | dropdown-surface-disabled | #FCFCFD |
| Dropdown border (disabled) | dropdown-border-disabled | #EBECEF |
| Screen background | surface-neutral-0 | #FFFFFF |
| Primary button (loading) background | button-primary-surface-default | #006AFF |
| Primary button (loading) text | button-primary-text-default | #FFFFFF |
| Primary button (loading) spinner | surface-brand-400 | #3388FF |
- Preserve layout stability when switching to loading state.
- Maintain accessible contrast for spinner and disabled elements.
Final confirmation screen of the data entry module. After processing completes, the screen displays a green checkmark icon along with the message "Success!" confirming that the information has been submitted and the process is complete. No further user action is required.
| Area | What can be customized | Notes |
|---|
| Text Elements | Title, success message | Fully localizable. Wording can align with brand tone and regulatory language. |
| Color Styling | Background, text color, success icon color, CTA color | Applied via design tokens. Must maintain accessibility contrast, even in disabled states. |
| Localization | All text content | Supports full translation. Layout should account for text expansion. |
| Element | Why it is fixed |
|---|
| Processing flow logic | Controlled by backend verification services; cannot be modified at UI level. |
| Form structure hierarchy | Field order and grouping remain standardized for consistency. |
| WCAG contrast requirements | Accessibility compliance is mandatory, including disabled and loading states. |
| UI Element | Token | Raw Value |
|---|
| Screen background | surface-neutral-0 | #FFFFFF |
| Success icon background | icon-status-positive | #1E7F11 |
| Success icon (check) | icon-neutral-0 | #FFFFFF |
| Title text (“Success!”) | text-body-primary | #262831 |
