Specs & Guidelines

The Phone Number 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 Phone Number 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 areas, such as the input area, country selector, and primary CTA always remain visible and reachable without requiring scrolling or zooming.

How the layout adapts across devices

Breakpoint	Behavior
Small phones (e.g., iPhone SE)	Components stack vertically; country selector and input field scale slightly
Standard phones (iPhone 12–16)	Full layout displayed with consistent spacing and button hierarchy
Tall/narrow Android devices	Vertical spacing adjusts dynamically to maintain visual balance
Foldables (e.g., Pixel Fold)	Input group stays centered; margins expand symmetrically
Tablets	Wider margins with proportional input scaling; buttons stay centered
Desktop web	Content is centered with fixed max-width and extended safe padding

What is responsive (and customizable)

Element	Responsive Behavior	Customizable
Input field & label	Scale and align based on viewport width	Border, color, placeholder
Country selector	Expands in width proportionally to maintain spacing	Icon, surface, border color
Buttons	Width adjusts; spacing below inputs adapts	Color & text
Countdown text	Reflows beneath inputs; stays visible on all devices	Yes, fully localizable
Footer / watermark	Pinned to bottom safe area	Optional
Background surfaces	Fill full viewport; safe padding adjusts per device	Yes
Header area	Padding and alignment scale with safe insets	Limited (color only)

What remains fixed across breakpoints

Element	Reason
OTP verification logic	Core function — must stay consistent
Input field proportions	Ensures usability and recognition consistency
Minimum text size	Maintains WCAG readability standards
Minimum tap target sizes	Accessibility requirement across devices
Layout hierarchy	Preserves visual predictability and rhythm

Design Notes

Input grouping (country code + phone field) should always be treated as a single logical component.
Button placement remains consistent across states (focused, disabled, success) to maintain predictability.
The module is built for fast entry — avoid introducing animations or long transitions between states.
Keep vertical spacing consistent with other verification steps (e.g., OTP entry) to support modular flow design.
Typography tokens ensure clear contrast and legibility even in dark mode; test brand overrides for sufficient color ratios.

Open Screens Responsiveness in Figma (Link coming soon)

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.

Open Desktop & Tablet Guidelines in Figma (Link coming soon)

Prototype & Transitions

Phone Number 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

The Phone Number Input 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 (titles, labels, placeholders, buttons, countdowns) is fully localizable.
Text element's width and padding flex to accommodate longer translations (e.g., German, Portuguese).
Spacing tokens adjust dynamically to preserve vertical rhythm in longer translations.

Open Screens Localization in Figma (Link coming soon)