This section outlines the elements you can customize within the Face Match 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 Face Comparison Screen introduces the Face Match step, explains that the user’s selfie will be compared with their ID photo, and sets clear expectations for the verification process.
| Area | What can be customized | Notes |
|---|
| Text | Title, subtitle, descriptive line (“Checking your photos”) | Fully localizable; tone can be adapted depending on your brand voice. |
| Comparison Mode | Default layout (selfie + ID photos) or Compact Mode (loader only) | Determines how much visual context the user sees during comparison. |
| Background Color | Screen background | Must maintain strong contrast with text and indicators. |
| Tooltip Labels | “Selfie”, “ID” labels in Default Mode | Optional; can be customized, hidden, or reworded. |
| Footer | “Verified by Incode” line | Optional but recommended for trust and product consistency. |
| Brand Colors | Header text, accent color, status indicator | Uses brand tokens; avoid reducing clarity in this verification step. |
| Element | Why it is fixed |
|---|
| Two-photo comparison structure (Default Mode) | Required for clarity when visualizing source images; ensures consistent guidance across modules. |
| Comparison logic and timing | Biometric processing is standardized and cannot be altered. |
| Component spacing & safe areas | Required for device compatibility and visual stability across devices. |
| Text hierarchy | Optimized to communicate progress clearly. |
| Close icon position | Standardized across all modules for consistent navigation. |
| Minimum display duration (processing) | Ensures backend has enough time to verify; prevents accidental skips. |
| WCAG contrast requirements | Mandatory for accessibility and regulatory compliance. |
| UI Element | Token | Value |
|---|
| Brand name | surface-brand-500-static | #006AFF |
| Title text | text-body-primary | #262831 |
| Subtitle text | text-body-secondary | #60667C |
| Tooltip background | surface-neutral-50 | #FCFCFD |
| Tooltip border | border-neutral-100 | #EBECEF |
| Tooltip text | text-body-primary | #262831 |
| Close icon | icon-neutral-500 | #60667C |
| Footer text (“verified by incode”) | text-body-secondary | #60667C |
| Footer brand dot | surface-brand-500-static | #006AFF |
| Background | surface-neutral-0 | #FFFFFF |
- Keep copy short to minimize cognitive load.
- The illustration uses brand 50 and brand 500 to reinforce brand identity without overwhelming the UI.
- Ensure tap targets meet accessibility guidelines.
- Maintain clear focus states for keyboard and screen reader users (Web).
The Compact Mode Face Comparison Screen provides a clean, minimal view while the user’s selfie is compared with their ID photo. It keeps the user informed, reduces distraction, and maintains trust during the verification step.
| What can be customized | Area | Notes |
|---|
| Main status message (“Checking your photos”) | Title text | Fully localizable; should remain concise. |
| Additional guidance (“This may take a few seconds”) | Subtitle text | Tone can match your brand voice; optional. |
| Primary spinner stroke | Spinner accent color | Uses brand tokens; must remain visually clear. |
| Secondary spinner stroke | Spinner background color | Should maintain contrast with accent. |
| “verified by incode” | Footer | Optional but recommended. |
| Header logo color | Brand color usage | Uses surface-brand-500-static. |
| Screen background | Background color | Must preserve readability and contrast. |
| Element | Why it is fixed |
|---|
| Screen layout | Ensures consistent loading experience across modules. |
| Spinner animation style | Standardized across SDK for performance and recognizability. |
| Processing flow timing | Linked to backend processing; cannot be shortened or skipped. |
| Close icon position | Unified across SDK for expected behavior. |
| Minimum contrast | Required for accessibility and compliance. |
| Spacing & safe areas | Required for device consistency |
| WCAG minimum contrast | Mandatory |
| UI Element | Token | Value |
|---|
| Brand name | surface-brand-500-static | #006AFF |
| Spinner accent | surface-brand-500-static | #006AFF |
| Spinner background | surface-brand-50 | #E5F0FF |
| Title text | spinner-text-title / text-body-primary | #262831 |
| Subtitle text | spinner-text-subtitle / text-body-secondary | #60667C |
| Background | surface-neutral-0 | #FFFFFF |
| Footer text (“verified by incode”) | text-body-secondary | #60667C |
| Footer brand dot | surface-brand-500-static | #006AFF |
- Keep copy short to minimize cognitive load.
- Use subtitle text to set user expectations about duration.
- The spinner uses brand 50 and brand 500 to reinforce brand identity without overwhelming the UI.
- Avoid adding imagery or additional UI elements that may distract from the verification process.
- Ensure tap targets meet accessibility guidelines.
- Maintain clear focus states for keyboard and screen reader users (Web).
If the face comparison is successful, the user moves directly into the Success state. This screen provides a clear confirmation of the match, with success colors and messaging customizable to fit your brand.
| Area | What can be customized | Notes |
|---|
| Title text | Success message (“Matched!”) | Fully localizable. |
| Status icon | Green checkmark | Can replace with custom success icon; must remain clear. |
| Button | Label, color, radius | Must follow platform guidelines. |
| Footer | “verified by incode” | Optional but recommended. |
| Background color | Full-screen background | Keep high contrast with icon + text. |
| Branding | Header logo color | Uses brand 500. |
| Element | Why it is fixed |
|---|
| Success logic | Must reflect actual backend validation; not customizable. |
| Status color mapping | Green = positive; required for consistent semantics. |
| Icon placement | Ensures clarity and recognition. |
| Button placement | Standardized across modules. |
| Closing behavior | Close icon position cannot be changed. |
| UI Element | Token | Value |
|---|
| Brand name | surface-brand-500-static | #006AFF |
| Title text | text-body-primary | #262831 |
| Status icon | icon-status-positive | #189F60 |
| Background | surface-neutral-0 | #FFFFFF |
| Button background | surface-brand-500-static / button-primary-surface-default | #006AFF |
| Button text | button-primary-text-default | #FFFFFF |
| Close icon | icon-neutral-500 | #60667C |
| Footer text (“verified by incode”) | text-body-secondary | #60667C |
| Footer brand dot | surface-brand-500-static | #006AFF |
- Keep messaging short and neutral, users should feel reassured, not overwhelmed.
- The green icon color communicates a positive state; ensure it remains accessible and high-contrast.
- Background should remain clean and unobtrusive to keep focus on the processing state.
- Ensure the button uses the brand 500 color to provide a clear next step with strong visual prominence.
Error screens appear when the system cannot confirm that the selfie matches the ID photo. This screen informs the user that the comparison was unsuccessful and prompts them to continue with the next step in the flow. While text and styling can be branded, the error itself is fixed, as it reflects the outcome of the biometric comparison and cannot be altered or removed.
| Area | What can be customized | Notes |
|---|
| Title text | Error message (“Faces do not match”) | Fully localizable; tone should be neutral/non-blaming. |
| Status icon | Error indicator | Can be replaced; must remain clearly negative. |
| Button | Label, color, radius | Supports Retry or Continue depending on flow. |
| Footer | “verified by incode” | Optional but recommended. |
| Background color | Full screen | Must support strong contrast. |
| Branding | Header logo color | Uses brand 500. |
| Element | Why it is fixed |
|---|
| Error logic | Must accurately reflect backend mismatch result. |
| Status color mapping | Red = negative; required for clarity + consistency. |
| Title hierarchy | Emphasizes the issue clearly. |
| Button placement | Consistent across modules. |
| Close icon placement | Standardized for familiarity. |
| UI Element | Token | Value |
|---|
| Brand name | surface-brand-500-static | #006AFF |
| Title text | text-body-primary | #262831 |
| Status icon | icon-status-negative | #E71111 |
| Background | surface-neutral-0 | #FFFFFF |
| Button background | surface-brand-500-static / button-primary-surface-default | #006AFF |
| Button text | button-primary-text-default | #FFFFFF |
| Close icon | icon-neutral-500 | #60667C |
| Footer text (“verified by incode”) | text-body-secondary | #60667C |
| Footer brand dot | surface-brand-500-static | #006AFF |
- Error messaging should remain clear, direct, and action-oriented.
- Use meaningful icon colors (red for errors).
- Maintain consistent spacing and visual hierarchy for readability.
- Avoid long or overly technical messages; users should understand the issue at a glance.
