Specs & Guidelines
The ID Capture module includes complete Figma specifications detailing spacing, layout rules, typography tokens, and language variants for ID Capture flows. These specifications ensure consistent behavior and appearance across all platforms, while allowing localized versions of the UI to scale correctly without breaking alignment or interfering with the document frame.
They also define how the capture frame, overlay, and instruction text behave in both light and dark modes, ensuring visual clarity and compliance with accessibility and performance standards.
Open Screens Specs in Figma
Responsiveness & Viewport Adaptation
The ID Capture module is fully responsive and adapts seamlessly to a wide range of device sizes and aspect ratios. The layout is designed to remain consistent and predictable whether the user is on a small phone, large phone, foldable device, or tablet.
This ensures that key interactive areas—such as the capture frame, document preview, instructions, and action buttons—remain visible, accessible, and properly aligned across all platforms. The capture overlay automatically scales to preserve the correct document proportions and maintain edge detection accuracy, regardless of screen dimensions or orientation.
How the layout adapts across devices
| Breakpoint | Behavior |
|---|---|
| Small phones (e.g., iPhone SE) | UI elements stack vertically; the ID frame scales down to maintain visibility and safe padding. |
| Standard phones (iPhone 12–16) | Full layout shown; spacing and hierarchy remain consistent between tutorial text, frame, and CTAs. |
| Tall/narrow Android devices | Vertical spacing redistributes; capture instructions stay pinned above the frame and button area. |
| Foldables (e.g., Pixel Fold) | The ID frame enlarges with balanced white space; document preview remains centered. |
| Tablets | Increased layout margins; the ID frame scales proportionally without exceeding the 4:3 aspect ratio. |
| Desktop web | Centered layout with controlled max-width and added safe-area padding; content stays proportionally aligned. |
What is responsive (and customizable)
| Responsive Behavior | Element | Customizable |
|---|---|---|
| Scales proportionally with viewport height while maintaining a fixed 4:3 ratio | ID frame area | Color only (size/shape are fixed) |
| Reflows to one or two lines depending on device width | Instruction text | Yes, text is fully localizable |
| Width adjusts to container; vertical spacing adapts by breakpoint | Buttons | Color and label |
| Pinned to bottom safe-area across screen sizes | Footer / watermark | Optional |
| Expand to fill the full viewport; maintain contrast against ID image | Background surfaces | Yes |
| Adjusts padding according to device safe-area insets | Header area | Limited (color only) |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| Capture logic & detection | Must remain consistent for accurate glare, blur, and edge validation across devices. |
| Frame proportions | The 4:3 ratio is fixed to ensure correct document alignment and authenticity analysis. |
| Minimum text size | Required for readability and WCAG AA accessibility compliance. |
| Minimum tap target sizes | Ensures accessibility for manual capture and retry actions. |
| Overall hierarchy | Maintains a predictable layout and cognitive flow across screen sizes. |
Design Notes
- The ID frame always remains the primary focal element, scaling proportionally across devices.
- Horizontal spacing is fluid, while vertical spacing follows safe thresholds to avoid overlapping elements.
- Avoid adding custom UI above or below the capture area, as it may disrupt detection accuracy or alignment.
- Multiline instructional text is supported, but extremely long localized strings should be avoided to prevent overflow.
Open Screens Responsiveness in Figma
Desktop & Tablet Guidelines
The ID Capture module is fully responsive and adapts gracefully to larger viewports. The Figma file includes guidelines for layout adjustments, safe areas, proportion scaling, and interaction differences between touch and pointer-based devices.
In desktop and tablet environments, the ID frame automatically scales to preserve the document’s proportions and maintain detection accuracy. Spacing, typography, and button placement adjust to wider layouts, ensuring all key elements—such as the instruction text, capture button, and document preview—remain accessible and visually balanced.
Open Desktop & Tablet Guidelines in Figma
Prototype & Transitions
ID Capture includes predefined transition rules and micro-interactions that ensure a smooth user experience across tutorial, capture, analyzing, and error flows. Timing, easing, and animation guidelines—such as frame scaling, progress transitions, and feedback states—are documented directly within the Figma prototypes.
Open Prototype & Transitions in Figma
Localization
The ID Capture module supports full localization and is designed to adapt seamlessly to languages with different lengths, line breaks, and reading patterns. The Figma file includes examples for long, short, and multi-line translations to ensure that layouts remain stable across all regions and scripts.
This ensures that user instructions, document type names, and error messages (such as “Glare present” or “ID scan failed”) remain readable and correctly positioned across languages.
Key considerations:
- All user-facing text is fully localizable.
- UI adjusts to prevent truncation and maintain readability.
- Spacing and vertical rhythm adapt to accommodate longer languages.
- Buttons and CTAs automatically expand to fit translated labels.
- Ensure localized strings preserve clarity and follow regulatory requirements when applicable.
- Incode supports a variety of languages
Open Screens Localization in Figma
Updated about 3 hours ago