Customization

This section outlines the elements you can customize within the ID Capture 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.

Tutorial Screen

The Tutorial Screen prepares the user for the ID Capture step. It introduces the action, provides the necessary context, and sets expectations before the camera is activated.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• 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).

Fake Permission Screen

The Fake Permission Screen is shown before the operating system displays its native camera permission modal. It prepares the user, explains why camera access is required, and significantly reduces the likelihood of users denying permission. This step increases trust and prevents interruptions during the ID Capture flow.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The pre-permission modal reduces drop-off by providing context before the OS permission.
• Maintain a clear hierarchy between primary (Allow) and secondary (Don’t allow) actions.
• Keep the dim overlay consistent to align with OS modal expectations.
• Ensure high contrast between modal, text, and background elements.
• Avoid adding extra steps or interaction on this screen.

Capture Screens

During capture, the user aligns their ID within the frame, and the system evaluates real-time conditions such as glare, blur, lighting, and edge visibility. When all conditions are met, the photo is taken automatically.

Colors and text on screen can be customized to match your brand, while the capture frame and auto-capture behavior remain fixed to preserve system accuracy.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The ID frame shape is fixed and cannot be altered, as it ensures correct alignment and document edge detection.
• The progress and countdown indicators must retain their default behavior and timing to maintain capture consistency.
• Apply brand colors subtly—use them for accents like borders or buttons, but avoid overpowering the document preview area.
• Keep instruction text short and direct, guiding users with clear, actionable phrases (e.g., “Fill the frame with your ID”).
• Maintain high contrast and accessible tap areas for key controls such as the help icon or retry button.

Manual Capture

Manual capture is triggered after a period of inactivity (default: 30 seconds) when automatic detection conditions are not met. In this mode, the user aligns their ID within the capture frame and presses the button manually.

This ensures users can complete verification even in low light, complex backgrounds, or edge-case scenarios where auto-capture cannot trigger.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The ID frame must remain fixed in shape to preserve detection accuracy.
• Manual capture should always appear as a fallback after auto-capture timeout, never as a default.
• Apply brand color accents sparingly (e.g., borders or buttons) to keep focus on the document.
• Keep instructional copy short and directive (e.g., “Fill the frame and tap capture”).
• Maintain clear tap areas and legible text for accessibility on all device sizes.

ID Capture Complete (Analyzing & Success)

Once the ID photo is captured — either automatically or manually — the user transitions to the Analyzing and Success screens. These stages reassure users that their ID is being securely processed and confirm when the image has passed all validation checks. Both the progress indicators and confirmation visuals can be adapted to match your brand identity.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The progress bar and success icon should use brand-positive tones but remain subtle to avoid visual clutter.
• The ID image always remains centered and visible throughout both stages — never obscured by overlays or text.
• Keep status text brief and affirmative (“Analyzing…”, “Success!”) for faster comprehension.
• Maintain high-contrast text against the background and avoid overlaid color effects on ID photos.
• Button CTAs should appear only on success (e.g., Scan the back or Continue), never during analysis.

Error Screens

Error screens appear when an issue occurs during ID capture, such as glare, blur, cut-off edges, or when all capture attempts have been exhausted. While text and visual styling can be customized, the error event types are system-defined and cannot be removed or altered.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Error messaging should remain clear, direct, and action-oriented.
• Maintain consistent spacing and visual hierarchy for readability.
• “Try again” should always feel like the primary action when applicable.
• Final error screens should not offer a retry, only a “Continue” action guiding users into manual review logic.
• Avoid long or overly technical messages; users should understand the issue at a glance.
• Include the ID image preview where possible — it helps users understand what went wrong.