---
title: "Customization"
url: "https://developer.incode.com/design-and-ux/face-match-customization/"
section: "design-and-ux"
group: "Module Customization / Face Match Design"
version: "v1.1"
status: "live"
---
# Customization

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, brand colors, and buttons — and which elements remain fixed to ensure consistency, accessibility, and a trustworthy result presentation across platforms.

<Image align="center" src="https://developer.incode.com/assets/086dc156ebaf6637ba76a236cc192cda.gif" />

<br />

***

## Comparison Screen

The entry screen shows the selfie and ID portrait side by side under a clear heading. Header, text, and label styling can be branded, while the two source images and their layout stay fixed so users always understand what is being compared.

<Image align="center" src="https://developer.incode.com/assets/6efe1f2c4999e9df0729f3abc491a7e9.png" />

<br />

### Customizable Elements

| **Area** | **What can be customized** | **Notes** |
| -------- | -------------------------- | --------- |
| **Text** | Title (“Verifying identity”), Selfie/ID labels | Fully localizable |
| **Brand Colors** | Logo/header tint, label and text accents | Uses brand tokens |
| **Footer** | “Verified by Incode” line | Optional but recommended |

<br />

### Fixed Elements

| **Element** | **Why it is fixed** |
| ----------- | ------------------- |
| Side-by-side image layout | Ensures users understand which images are compared |
| Image crop & shape | Standardized circular crops for consistency |
| Text hierarchy | Optimized for readability |
| WCAG minimum contrast | Mandatory |

<br />

### Token Reference

<Image align="center" src="https://developer.incode.com/assets/a9706883ca4785db14e959441238b891.png" />

| **UI Element** | **Token** | **Value** |
| -------------- | --------- | --------- |
| Background | Surface/Neutral/0 | #FFFFFF |
| Logo / header | Brand/500 | #006AFF |
| Title text | Text/Body/800 (Primary) | #262831 |
| Label text | Text/Body/500 (Secondary) | #60667C |
| Footer text | Text/Body/500 (Secondary) | #60667C |

<br />

### Design Notes

* Keep the title short and reassuring.
* Maintain a clear visual distinction between the Selfie and ID labels.
* Ensure both images remain clearly visible and balanced.

<br />

***

## Checking Photos

The processing state reassures the user while the comparison runs. The loading indicator color and supporting text can be branded; the animation behavior and timing remain fixed.

<Image align="center" src="https://developer.incode.com/assets/abbeec41d2b9eb18857cbec3475f7102.png" />

<br />

### Customizable Elements

| **Area** | **What can be customized** | **Notes** |
| -------- | -------------------------- | --------- |
| **Text** | “Checking your photos”, supporting line | Fully localizable |
| **Brand Colors** | Spinner / progress indicator color | Control via tokens |
| **Footer** | “Verified by Incode” line | Optional |

<br />

### Fixed Elements

| **Element** | **Why it is fixed** |
| ----------- | ------------------- |
| Spinner behavior & timing | Ensures consistent feedback cadence across modules |
| Layout structure | Standardized for predictability |
| Minimum contrast | Required for WCAG AA |

<br />

### Token Reference

<Image align="center" src="https://developer.incode.com/assets/a76434a5c7ecd048b360747962d57e79.png" />

| **UI Element** | **Token** | **Value** |
| -------------- | --------- | --------- |
| Spinner (arc) | Spinner/Surface/Primary | #006AFF |
| Spinner (track) | Spinner/Surface/Secondary | #E5F0FF |
| Title text | Text/Body/800 (Primary) | #262831 |
| Supporting text | Text/Body/500 (Secondary) | #60667C |
| Background | Surface/Neutral/0 | #FFFFFF |

<br />

### Design Notes

* Keep messaging short and neutral so users feel reassured.
* Do not allow interaction during this step.
* Maintain consistent ring thickness to preserve visual rhythm across modules.

<br />

***

## Matched (Success)

The success state confirms a positive match. The confirmation icon accent, success text, and the primary CTA can be branded, while the result icon shape and layout stay fixed.

<Image align="center" src="https://developer.incode.com/assets/a1f240d678726970d18a1986b03236fe.png" />

<br />

### Customizable Elements

| **Area** | **What can be customized** | **Notes** |
| -------- | -------------------------- | --------- |
| **Text** | “Matched!”, body text, CTA label (“Continue”) | Fully localizable |
| **Buttons** | Label, color, radius | Must follow platform guidelines |
| **Brand Colors** | Success icon accent, CTA color | Uses brand tokens |
| **Footer** | “Verified by Incode” line | Optional |

<br />

### Fixed Elements

| **Element** | **Why it is fixed** |
| ----------- | ------------------- |
| Result icon shape | Ensures immediate recognition across modules |
| Success timing | Prevents premature transitions |
| Layout structure | Standardized for readability |
| Minimum contrast | Required for WCAG AA |

<br />

### Token Reference

<Image align="center" src="https://developer.incode.com/assets/489378fff341c36e8ab584ecfa2acfe5.png" />

| **UI Element** | **Token** | **Value** |
| -------------- | --------- | --------- |
| Success icon | Icon/Status/Positive | #189F60 |
| Title text | Text/Body/800 (Primary) | #262831 |
| CTA background | Button/Primary/Surface/Default | #006AFF |
| CTA text | Button/Primary/Text/Default | #FFFFFF |
| Background | Surface/Neutral/0 | #FFFFFF |

<br />

### Design Notes

* Keep the confirmation message short and positive.
* Ensure the success accent remains accessible and high-contrast.
* “Continue” should read as the clear primary action.

<br />

***

## Faces Do Not Match (Error)

The error state communicates a failed comparison. Text, the error icon color, and the CTA can be branded, while the error icon shape and the result behavior remain fixed.

<Image align="center" src="https://developer.incode.com/assets/93a4df1cf47c9b7a2131580b71f5cee9.png" />

<br />

### Customizable Elements

| **Area** | **What can be customized** | **Notes** |
| -------- | -------------------------- | --------- |
| **Text** | Error title (“Faces do not match”), description, CTA label | Fully localizable |
| **Buttons** | Label, color, radius | Keep primary hierarchy |
| **Brand Colors** | Header / text accents, CTA color | Follows brand token system |
| **Icons** | Icon color (error) | Only color, not shape |

<br />

### Fixed Elements

| **Element** | **Why it is fixed** |
| ----------- | ------------------- |
| Error icon shape | Ensures immediate recognition and consistency |
| Error screen layout | Preserves visual predictability |
| Result behavior | Must hand off to the application’s downstream logic |
| Accessibility contrast | Required to meet WCAG AA |

<br />

### Token Reference

<Image align="center" src="https://developer.incode.com/assets/12bc54a2d2d16dfd35aa74d93ce58caa.png" />

| **UI Element** | **Token** | **Value** |
| -------------- | --------- | --------- |
| Error icon (circle) | Icon/Status/Negative | #E71111 |
| Error icon (x-mark) | Icon/Neutral/0 | #FFFFFF |
| Title text | Text/Body/800 (Primary) | #262831 |
| Description text | Text/Body/500 (Secondary) | #60667C |
| CTA background | Button/Primary/Surface/Default | #006AFF |
| CTA text | Button/Primary/Text/Default | #FFFFFF |

<br />

### Design Notes

* Keep error messaging clear, direct, and non-technical.
* Use a meaningful error color (red) for the icon.
* Always provide a clear way to continue.

<br />