Specs & Guidelines
of CURP module
The CURP 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 CURP 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) | Reduce vertical spacing; full-width input and buttons; |
| 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) | Centered form with max-width constrains |
| Tablets | Consistent input and button sizing; Fixed-width container centered on screen. |
| Desktop web | Centered content with max-width constraint and safe-area padding |
What is responsive (and customizable)
| Element | Responsive Behavior | Customizable |
|---|---|---|
| Form container | Maintains centered max-width on large screens | Fully localizable |
| Instruction / title text | Width adapts to container | Placeholder and helper text |
| 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 to safe-area insets | Limited (color only) |
What remains fixed across breakpoints
| Element | Reason |
|---|---|
| Location detection logic | Must remain consistent for accuracy |
| Single column layout | Preserves clarity and reduces cognitive load in form entry |
| Validation placement | Must remain inline for usability and accessibility |
| 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 form remains the visual focal point across all devices.
- The layout stays single-column to preserve clarity and reduce cognitive load.
- Vertical spacing follows fixed, safe thresholds; horizontal layout adapts fluidly within a max-width container.
- Avoid adding custom elements above or below the module to maintain structural alignment.
- Accessibility standards (minimum tap targets, readable type scale, contrast ratios) must be preserved across breakpoints.
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
CURP includes predefined transition rules and micro-interactions that ensure a smooth user experience. Animation guidelines are documented directly in Figma prototypes.
Localization
The CURP 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.
Updated about 2 hours ago