Platform Design Guidelines Reference

Mobile Design Fundamentals

Screen Sizes

Safe Areas

┌─────────────────────────────────┐
│ ▓▓▓▓▓▓▓ Status Bar ▓▓▓▓▓▓▓▓▓▓ │ 44-47px
├─────────────────────────────────┤
│                                 │
│      Safe Content Area          │
│                                 │
│                                 │
├─────────────────────────────────┤
│ ▓▓▓▓▓▓ Home Indicator ▓▓▓▓▓▓▓ │ 34px
└─────────────────────────────────┘

Touch Targets

• Minimum: 44×44pt (iOS) / 48×48dp (Android)
• Recommended: 48×48px for all platforms
• Spacing: Minimum 8px between targets

iOS Human Interface Guidelines (HIG)

Design Philosophy

• Clarity: Text is legible, icons precise, adornments subtle
• Deference: UI helps people understand content, never competes
• Depth: Distinct visual layers convey hierarchy

Navigation Patterns

Tab Bar Specifications

┌─────────────────────────────────┐
│  🏠    🔍    ➕    💬    👤    │
│ Home  Search Add  Chat  Profile │ 49pt height
└─────────────────────────────────┘

• Max 5 tabs
• Icons 25×25pt with 10pt labels
• Active tab uses fill/tint color
• Inactive tabs use gray

Navigation Bar

┌─────────────────────────────────┐
│ ‹ Back    Page Title    Action │ 44pt minimum
└─────────────────────────────────┘

• Left: Back button or cancel
• Center: Title
• Right: Primary action (text or icon)

Typography (SF Pro)

iOS Colors (System)

iOS-Specific Patterns

• Swipe gestures: Delete, archive, actions
• Pull to refresh: Standard list refresh
• Long press: Context menus
• Haptic feedback: Confirm actions
• Edge swipe: Back navigation

Android Material Design

Android Design Philosophy

• Material as metaphor: Physical properties, elevation
• Bold, graphic, intentional: Deliberate color, typography, space
• Motion provides meaning: Feedback and continuity

Android Navigation Patterns

Bottom Navigation

┌─────────────────────────────────┐
│  🏠    🔍    📷    💬    👤    │
│ Home  Search Camera Chat Account│ 80dp height
└─────────────────────────────────┘

• 3-5 destinations
• Icons 24dp with 12sp labels
• Active: filled icon + primary color
• Inactive: outlined icon + on-surface

App Bar

┌─────────────────────────────────┐
│ ≡  App Title                🔍 │ 64dp height
└─────────────────────────────────┘

• Left: Navigation icon (menu or back)
• Center: Title (can be left-aligned)
• Right: Action icons (max 3)

Floating Action Button (FAB)

• Size: 56dp standard, 40dp mini
• Position: Bottom right, 16dp from edges
• Purpose: Primary action only
• Behavior: Can hide on scroll

Typography (Roboto)

Material Colors

Elevation (Shadows)

Android-Specific Patterns

• Snackbar: Brief feedback at bottom
• Bottom sheet: Additional content/actions
• Chips: Filter, input, choice, action
• Speed dial FAB: Multiple related actions

Responsive Web Design

Breakpoints

Grid System

• Columns: 12-column grid standard
• Gutters: 16-24px between columns
• Margins: 16px (mobile) to 64px (desktop)
• Max content width: 1200-1440px

Responsive Typography

Mobile (base):
  Body: 16px
  H1: 28-32px
  H2: 22-24px
  
Tablet:
  Body: 16px
  H1: 32-40px
  H2: 24-28px
  
Desktop:
  Body: 16-18px
  H1: 40-56px
  H2: 28-36px

Mobile-First Approach

1. Design for smallest screen first
2. Add complexity for larger screens
3. Content priority: What's essential?
4. Performance: Minimize for mobile
5. Touch-first interactions

Responsive Patterns

Desktop Applications

Window Chrome

┌─────────────────────────────────────────┐
│ ● ● ●   App Title              ─ □ ×  │ Title bar
├────────┬────────────────────────────────┤
│ Sidebar│ Content Area                   │
│        │                                │
│        │                                │
│        │                                │
│        ├────────────────────────────────┤
│        │ Status Bar                     │
└────────┴────────────────────────────────┘

Keyboard-First Design

• All actions accessible via keyboard
• Visible keyboard shortcuts
• Focus management for tab order
• Search/command palette (Cmd/Ctrl+K)

Hover States

Desktop has hover (mobile doesn't):

• Show additional info on hover
• Preview actions before click
• Tooltips for icon-only buttons
• Dropdown menus on hover

Dense Information

Desktop allows for:

• Smaller touch targets (32px min)
• More visible information
• Complex tables and data grids
• Multi-column layouts
• Side-by-side comparisons

Cross-Platform Considerations

Shared Principles

• Consistent brand identity
• Same core user flows
• Synchronized data/state
• Familiar information architecture

Platform-Specific Adaptations

Design Tokens Across Platforms

Create platform-agnostic tokens:

// Spacing
spacing-sm: 8
spacing-md: 16
spacing-lg: 24

// These map to platform units
iOS: points (pt)
Android: density-independent pixels (dp)
Web: pixels (px) or rem