Specs & Guidelines

The Geolocation 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 Geolocation 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 CTAs, remain visible, accessible, and consistently aligned across platforms.

How the layout adapts across devices

Breakpoint	Behavior
Small phones (e.g., iPhone SE)	Content stacks vertically; map or location icon scales down for visibility
Standard phones (iPhone 12–16)	Full layout shown; spacing and hierarchy remain consistent
Tall/narrow Android devices	Vertical spacing adapts to maintain balance
Foldables (e.g., Pixel Fold)	Map illustration expands; centered layout with even white space
Tablets	Wider margins and proportional scaling of map and text
Desktop web	Centered content with max-width constraint 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
Location detection logic	Must remain consistent for accuracy
Icon proportions	Maintain visual clarity and recognition
Minimum text size	Ensures readability & WCAG compliance
Minimum tap target sizes	Accessibility requirement on mobile
Layout hierarchy	Keeps experience consistent across devices

Design Notes

The location icon or map remains the visual focal point across all devices.
Vertical spacing uses fixed-safe thresholds; horizontal layout is fluid.
Avoid adding custom elements above or below the module to maintain alignment.
Text reflows smoothly for localization, but long strings should be avoided for clarity.

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

Geolocation 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 Geolocation 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

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)