The Document Capture module includes complete Figma specifications documenting spacing, layout rules, typography tokens, and language variants. These specs ensure consistency across platforms and allow localized versions of the UI to scale without breaking the layout.
Responsiveness & Viewport Adaptation
The Document 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 silhouette, capture instructions, and CTAs. remain visible, accessible, and properly aligned across platforms.
How the layout adapts across devices
| Breakpoint | Behavior |
|---|---|
| Small phones (e.g., iPhone SE) | UI elements adjust vertically; illustration scales down to maintain visibility |
| Standard phones (iPhone 12–16) | Full layout shown; spacing and hierarchy remain consistent |
| Tall/narrow Android devices | Vertical spacing is redistributed; instructions remain pinned above CTA |
| Foldables (e.g., Pixel Fold) | Larger visual and more balanced white space; content remains centered |
| Tablets | Increased layout margins; visual scales proportionally |
| Desktop web | Centered layout with controlled max-width; additional safe area padding |
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Document frame / guidance area | Scales proportionally by viewport height and document aspect ratio | Color only (size and detection logic are fixed) |
| Instruction text | Reflows to one or two lines depending on width | Text is fully localizable |
| Buttons | Width adjusts to container, vertical spacing adapts | Color & text |
| Footer / watermark | Pinned to bottom safe area | Optional |
| Background surfaces | Expand to full viewport | Yes |
| Header area | Scales padding according to device safe insets | Limited (color only) |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| Capture logic & detection | Must remain consistent for accuracy |
| Capture frame proportions | Crucial for document alignment guidance |
| Minimum text size | Required for readability & WCAG compliance |
| Minimum tap target sizes | Ensures accessibility on mobile |
| Overall hierarchy | Prevents cognitive load at different sizes |
Design Notes
- The document guidance frame always remains the dominant visual element, regardless of screen size or document type.
- Horizontal spacing is fluid; vertical spacing uses fixed-safe thresholds.
- Avoid adding custom UI above or below the module, it may break alignment.
- Multiline text is handled gracefully, but avoid extremely long localized strings.
Desktop & Tablet Guidelines
The 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.
Prototype & Transitions
Document Capture includes predefined transition rules and micro-interactions that ensure a smooth user experience across tutorial, capture, uploading, and error flows. Timing, easing, and animation guidelines are documented directly in Figma prototypes.
Localization
The Document Capture module supports full localization and is designed to adapt to languages with different lengths, line breaks, and reading patterns. The Figma file includes examples for long, short, and multi-line translations to ensure layouts remain stable across regions.
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