Specs & Guidelines
The Email Input 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.
Open Screens Specs in Figma (Link coming soon)
Responsiveness & Viewport Adaptation
The Email Input 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 elements, such as the input field and CTA button, remain visible, accessible, and consistently aligned across all platforms.
How the layout adapts across devices
| Breakpoint | Behavior |
|---|---|
| Small phones (e.g., iPhone SE) | Input field and button stack vertically; spacing compresses slightly for balance |
| Standard phones (iPhone 12–16) | Full layout displayed; consistent alignment between title, field, and CTA |
| Tall/narrow Android devices | Vertical rhythm adapts to keep the field and button comfortably in view |
| Foldables (e.g., Pixel Fold) | Content remains centered; additional margin creates visual balance |
| Tablets | Wider margins and proportional scaling of text and elements |
| Desktop web | Centered layout with max-width container and safe-area padding |
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Map / Illustration | Scales with viewport; adapts to portrait/landscape | Color and style only |
| Instruction text | Reflows to one or two lines depending on width | Yes, fully localizable |
| Buttons | Width adjusts to container, spacing adapts | Color & text |
| Footer / watermark | Pinned to bottom safe area | Optional |
| Background surfaces | Expand to full viewport | Yes |
| Header area | Adjusts padding per device safe insets | Limited (color only) |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| Input validation logic | Ensures consistent verification behavior |
| Minimum text size | Maintains readability and WCAG compliance |
| Tap target dimensions | Accessibility standard across mobile devices |
| Input-field proportions | Keeps layout balance across modules |
| Layout hierarchy | Ensures predictable user experience |
Design Notes
- The input field remains the focal point on all screen sizes — avoid introducing secondary visual elements.
- Maintain generous vertical spacing for clarity, especially on devices with on-screen keyboards.
- Ensure button and input alignment remain vertically stacked — never side-by-side.
- Avoid overlaying or crowding the layout with additional text (e.g., marketing or help tips).
- For localization, test long strings (especially in German, Spanish, or Portuguese) to prevent overflow and maintain rhythm.
Open Screens Responsiveness in Figma (Link coming soon)
Desktop & Tablet Guidelines
The Email Input 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.
Open Desktop & Tablet Guidelines in Figma (Link coming soon)
Prototype & Transitions
Email Input includes predefined transition rules and micro-interactions that ensure a smooth user experience. Animation guidelines are documented directly in Figma prototypes.
Open Prototype & Transitions in Figma (Link coming soon)
Localization
Email Input 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
- Incode supports a variety of languages.
- 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.
Open Screens Localization in Figma (Link coming soon)
Updated 2 days ago