Mobile UI Design

Mobile UI Design

Pre-Flight: Check Design Context

Before generating mobile UI code:

1. Use get_design_context to check for existing design tokens, platform guidelines, or component libraries.
2. If a Figma URL is provided, pull screenshots and metadata to match the design.
3. Determine: Is this a native app (React Native/Flutter), a PWA, or a responsive website?

1. Touch Target Sizes

Every interactive element must be large enough to tap reliably.

Minimum Sizes

Implementation

/* Ensure tap targets even on small visual elements */
.icon-button {
  width: 24px;
  height: 24px;
  /* Expand tap target with padding or pseudo-element */
  position: relative;
}
.icon-button::after {
  content: '';
  position: absolute;
  inset: -12px; /* extends tap area to 48x48 */
}

Spacing Between Targets

Minimum 8px gap between tappable elements. 12px+ is preferred. This prevents accidental taps.

2. Bottom Navigation

The thumb reaches the bottom of the screen most easily. Put primary navigation there.

Standard Bottom Tab Bar

<nav class="fixed bottom-0 inset-x-0 bg-white border-t border-gray-200
  safe-area-bottom z-50">
  <div class="flex items-center justify-around h-16">
    <!-- Active tab -->
    <a href="#" class="flex flex-col items-center gap-0.5 text-indigo-600 min-w-[64px]">
      <svg class="w-6 h-6" fill="currentColor"><!-- home icon --></svg>
      <span class="text-[10px] font-medium">Home</span>
    </a>
    <!-- Inactive tab -->
    <a href="#" class="flex flex-col items-center gap-0.5 text-gray-400 min-w-[64px]">
      <svg class="w-6 h-6" fill="none" stroke="currentColor"><!-- search icon --></svg>
      <span class="text-[10px] font-medium">Search</span>
    </a>
    <!-- ... 3-5 tabs total -->
  </div>
</nav>

Rules

• Maximum 5 tabs. 3–4 is ideal.
• Active tab: filled icon + primary color. Inactive: outline icon + gray.
• Labels are required. Icon-only tabs have poor discoverability.
• Never use a hamburger menu as a tab bar replacement.
• Account for bottom safe area on notched devices.

Safe Area CSS

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

3. Gesture-Friendly Interactions

Swipe Actions

<!-- Swipe-to-reveal pattern (conceptual structure) -->
<div class="relative overflow-hidden">
  <!-- Background action (revealed on swipe) -->
  <div class="absolute inset-y-0 right-0 flex items-center bg-red-500 px-6">
    <span class="text-white font-medium">Delete</span>
  </div>
  <!-- Foreground content (swipeable) -->
  <div class="bg-white px-4 py-3 transform transition-transform touch-pan-y">
    <div class="font-medium text-gray-900">List Item</div>
    <div class="text-sm text-gray-500">Swipe left for actions</div>
  </div>
</div>

Pull-to-Refresh

• Indicator appears at top as user pulls down.
• Use a spinner or custom animation.
• Trigger refresh at ~80px pull distance.
• Provide haptic feedback if possible (native only).

Common Mobile Gestures

4. iOS vs Android Design Language

Key Differences

Cross-Platform Approach

When building for both, lean toward iOS patterns for polish and Material patterns for interaction feedback. Use system fonts:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

5. Safe Areas

Device Considerations

/* Status bar area */
.top-safe {
  padding-top: env(safe-area-inset-top);
}

/* Home indicator / gesture bar */
.bottom-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Notch / Dynamic Island on landscape */
.side-safe {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Full-bleed safe wrapper */
.safe-area {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

Viewport Meta

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

The viewport-fit=cover is required for env(safe-area-inset-*) to work.

6. Mobile Typography Scale

Recommended Scale

Rules

• Body text minimum 16px on mobile (prevents iOS zoom on input focus).
• Line length: 35–50 characters max for comfortable mobile reading.
• Use rem units based on 16px root.

7. Thumb Zone Optimization

The Thumb Zone Map

+-----------------------------+
|     Hard to reach           |  <- Top 25%: Put secondary actions, titles
|                             |
|-----------------------------|
|     Comfortable stretch     |  <- Middle 50%: Content, scrollable lists
|                             |
|-----------------------------|
|     Easy / Natural          |  <- Bottom 25%: Primary actions, nav, FAB
+-----------------------------+

Practical Rules

• Primary actions at bottom: CTA buttons, submit buttons, navigation.
• Search bars: Consider bottom placement (like iOS Safari).
• FAB (Floating Action Button): Bottom-right corner, 56px, with shadow.
• Destructive actions at top: Harder to reach = harder to accidentally trigger.

<!-- Bottom-anchored CTA -->
<div class="fixed bottom-0 inset-x-0 p-4 bg-gradient-to-t from-white via-white
  to-transparent pt-12 safe-area-bottom">
  <button class="w-full bg-indigo-600 text-white py-4 rounded-2xl font-semibold
    text-lg active:bg-indigo-700 transition-colors">
    Continue
  </button>
</div>

8. Sheet / Bottom Drawer Patterns

Bottom Sheet Structure

<div class="fixed inset-0 z-50">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>

  <!-- Sheet -->
  <div class="absolute bottom-0 inset-x-0 bg-white rounded-t-3xl
    max-h-[85vh] overflow-y-auto safe-area-bottom">
    <!-- Drag handle -->
    <div class="flex justify-center pt-3 pb-2">
      <div class="w-10 h-1 rounded-full bg-gray-300"></div>
    </div>

    <!-- Content -->
    <div class="px-4 pb-6">
      <h2 class="text-xl font-bold text-gray-900 mb-4">Sheet Title</h2>
      <!-- Sheet content -->
    </div>
  </div>
</div>

Sheet Variants

• Peek sheet: Shows 30% of content, drag to expand.
• Action sheet: List of options (iOS-style).
• Full-screen sheet: Slides up to cover entire screen with close button.
• Map sheet: Persistent bottom sheet over a map (Google Maps style).

Sheet Rules

• Always include a drag handle (40px wide, 4px tall, centered, rounded).
• Max height: 85% of viewport. Let it scroll internally.
• Dismiss: swipe down, tap backdrop, or explicit close button.
• Snap points: collapsed, half, expanded.

9. Mobile Form Design

Rules

1. Large inputs: Minimum 48px height, 16px+ font (avoids iOS zoom).
2. Full-width inputs: Edge-to-edge within the container.
3. Smart keyboard types: Use inputmode attribute.
4. Sticky submit button: Fixed at bottom of screen.
5. Single column only: Never side-by-side fields on mobile.

Input Mode Attribute

<!-- Phone number: numeric keyboard -->
<input type="tel" inputmode="tel" />

<!-- Email: keyboard with @ and . -->
<input type="email" inputmode="email" />

<!-- Number: numeric keypad -->
<input type="text" inputmode="numeric" pattern="[0-9]*" />

<!-- URL: keyboard with / and .com -->
<input type="url" inputmode="url" />

<!-- Search: keyboard with search/go button -->
<input type="search" inputmode="search" />

Mobile-Optimized Input

<div class="space-y-1.5">
  <label for="phone" class="block text-sm font-medium text-gray-700">
    Phone number
  </label>
  <input
    type="tel"
    id="phone"
    inputmode="tel"
    autocomplete="tel"
    class="block w-full h-12 rounded-xl border border-gray-300 px-4
      text-base text-gray-900 placeholder:text-gray-400
      focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
    placeholder="+1 (555) 000-0000"
  />
</div>

10. Native-Feeling Animations

Timing Functions

/* iOS-like spring curve */
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

/* Quick in, slow out (for entering elements) */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

/* Slow in, quick out (for exiting elements) */
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);

Common Transitions

/* Page transition: slide from right */
.page-enter {
  transform: translateX(100%);
  animation: slide-in 350ms var(--ease-out) forwards;
}
@keyframes slide-in {
  to { transform: translateX(0); }
}

/* Sheet reveal: slide up */
.sheet-enter {
  transform: translateY(100%);
  animation: sheet-up 400ms var(--ease-out) forwards;
}
@keyframes sheet-up {
  to { transform: translateY(0); }
}

/* Tap feedback */
.tap-feedback:active {
  transform: scale(0.97);
  opacity: 0.8;
  transition: all 50ms ease;
}

Animation Rules for Mobile

1. Keep animations under 400ms. 200–300ms feels snappy.
2. Use transform and opacity only for 60fps performance.
3. Add will-change: transform sparingly for animated elements.
4. Respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

5. Provide haptic feedback for important actions (native only).

Mobile Design Checklist

• All tap targets are 44px+ minimum
• Bottom navigation with 3–5 tabs and labels
• Safe areas respected (top, bottom, sides)
• Body text is 16px+ (no iOS zoom on focus)
• Primary actions are in the thumb zone (bottom)
• Forms use correct inputmode attributes
• Sheets have drag handles and dismiss gestures
• Animations are under 400ms and use GPU-friendly properties
• viewport-fit=cover meta tag is set
• prefers-reduced-motion is respected
• Content is readable at 320px width
• No horizontal scroll on any screen