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.
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.
| 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 |
| 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 |
| 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 |
- 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.
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.
| 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 |
| 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 |
| 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 |
- 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.
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.
| 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 |
| 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 |
| 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 |
- Keep the confirmation message short and positive.
- Ensure the success accent remains accessible and high-contrast.
- “Continue” should read as the clear primary action.
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.
| 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 |
| 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 |
| 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 |
- Keep error messaging clear, direct, and non-technical.
- Use a meaningful error color (red) for the icon.
- Always provide a clear way to continue.
