1  # iOS Onboarding Flow
  2  
  3  ## Overview
  4  - **Type:** Mobile app (Onboarding screens)
  5  - **Style:** Professional + Excitement
  6  - **Primary color:** System blue or brand color
  7  - **Typography:** SF Pro (iOS system font)
  8  
  9  ## Why It Works
 10  
 11  1. **Progressive disclosure** — Shows one feature per screen. No overwhelming information dumps.
 12  2. **Visual + text balance** — Large illustration/icon (60% of screen), concise text (40%).
 13  3. **Clear progress indicator** — Dots or progress bar shows "3 of 5" so users know how long this takes.
 14  4. **Skip option** — Always provide a way to skip onboarding. Respect user time.
 15  
 16  ## Key Patterns
 17  
 18  ### Onboarding Screen Structure
 19  ```css
 20  .onboarding-screen {
 21    display: flex;
 22    flex-direction: column;
 23    height: 100vh;
 24    padding: 60px 32px 40px;
 25    background: white;
 26  }
 27  
 28  .onboarding-visual {
 29    flex: 1;
 30    display: flex;
 31    align-items: center;
 32    justify-content: center;
 33    margin-bottom: 40px;
 34  }
 35  
 36  .onboarding-visual img {
 37    max-width: 280px;
 38    max-height: 280px;
 39  }
 40  
 41  .onboarding-content {
 42    text-align: center;
 43  }
 44  
 45  .onboarding-content h1 {
 46    font-size: 28px;
 47    font-weight: 700;
 48    line-height: 1.2;
 49    margin-bottom: 12px;
 50    color: #000;
 51  }
 52  
 53  .onboarding-content p {
 54    font-size: 17px;
 55    line-height: 1.5;
 56    color: #666;
 57    margin-bottom: 32px;
 58  }
 59  
 60  .progress-dots {
 61    display: flex;
 62    gap: 8px;
 63    justify-content: center;
 64    margin-bottom: 24px;
 65  }
 66  
 67  .dot {
 68    width: 8px;
 69    height: 8px;
 70    border-radius: 50%;
 71    background: #ddd;
 72  }
 73  
 74  .dot.active {
 75    background: #007AFF;
 76  }
 77  
 78  .btn-primary {
 79    width: 100%;
 80    padding: 16px;
 81    font-size: 17px;
 82    font-weight: 600;
 83    color: white;
 84    background: #007AFF;
 85    border: none;
 86    border-radius: 12px;
 87    margin-bottom: 12px;
 88  }
 89  
 90  .btn-skip {
 91    width: 100%;
 92    padding: 16px;
 93    font-size: 17px;
 94    font-weight: 400;
 95    color: #007AFF;
 96    background: transparent;
 97    border: none;
 98  }
 99  ```
100  
101  ## iOS Design Guidelines
102  
103  - **Touch targets:** Minimum 44x44pt
104  - **Safe areas:** Respect top notch and bottom home indicator
105  - **Typography:** SF Pro Text (body), SF Pro Display (large text)
106  - **Corner radius:** 12-16pt for buttons, 8-12pt for cards
107  - **Shadows:** Subtle, iOS uses light shadows (0 2px 8px rgba(0,0,0,0.1))
108  
109  ## When to Use
110  First-time user experience, feature announcements, permission requests.
111  
112  ## Key Takeaway
113  Mobile onboarding should be fast (3-5 screens max), visual (show don't tell), and skippable (respect user agency).