# 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://files.readme.io/152b4346c5e5cbe5f5df42c5e51c29ce96c8bd7b6ce73747a8fb7d83a65f253b-face-match-customization.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://files.readme.io/47778f0ffc4f45a8592d1c854787079d54f41c95c5936c5b6d50aad3d533ac03-customization-1.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://files.readme.io/1a49582a2eb86eb0088f6063221454961d6b634694d6699afa4b07be98d76da7-customization-2.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://files.readme.io/7086c2dacd1dfd74f6b1786386d0d9fde920c692a53db22f53db68b311b8926c-customization-3.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://files.readme.io/75745434a79d29ed018c7c347da17bcf32caac885260eb59b0230146aba15615-customization-4.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://files.readme.io/d62a3d22fef4b5b06321a088d5c23e373d172ecc45260b496dd1520d621a3add-customization-5.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://files.readme.io/bb5a318c7476ec1459a4fccef5397df38ee863beb37a8111538dabd50619bcee-customization-6.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://files.readme.io/6bb898365f683bcb172a2af784a39e3fc6626f973113ff7a582ca89734f017b2-customization-7.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://files.readme.io/63bfbe196e306885e5cc7c42cf26ed31cd949a6c5ca21e38643a953a4b48642b-customization-8.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 />