​

UI Specification: Onboarding Flow

​

Overview

• Welcoming: Warm, friendly tone that feels like a trusted friend
• Clear Value: Immediately communicate “AI + photo journaling = effortless memories”
• Low Friction: 3 screens max before users can start journaling
• Beautiful: Hero imagery and generous whitespace to inspire
• Accessible: WCAG 2.1 AA compliant, Dynamic Type support, VoiceOver ready

Welcome Screen → How It Works → Permissions Request → Timeline (Empty State with First Entry Guidance)

​

Screen 1: Welcome Screen

​

Purpose

​

User Journey

• Entry Point: App launch (first-time users only)
• Exit Point: Tap “Get Started” → How It Works screen
• Alternative Exit: Tap “Already have an account? Log in” → Login screen

​

Layout Structure (Light Mode)

┌────────────────────────────────────────┐
│                                        │ ← Safe Area (Status Bar, 44pt)
│                                        │
│                                        │
│          [Hero Illustration]           │ ← Hero Image (280×280pt)
│         Photo + Journal Icon           │
│            with Coral Glow             │
│                                        │
│                                        │
│    Your life, beautifully remembered   │ ← Headline (Large Title)
│                                        │
│  Capture moments, let AI help you      │ ← Subheadline (Body)
│  journal, and rediscover your          │
│  memories.                             │
│                                        │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │       Get Started                │ │ ← Primary CTA Button
│  └──────────────────────────────────┘ │
│                                        │
│  Already have an account? Log in      │ ← Text Link (Secondary Action)
│                                        │
│                                        │
│                                        │ ← Safe Area (Home Indicator, 34pt)
└────────────────────────────────────────┘

​

Components Used

​

1. Hero Illustration

• Component: Custom illustration (provided as asset)
• Dimensions: 280×280pt
• Position: Centered horizontally, 80pt from top Safe Area
• Content:
  • Abstract representation of a photo overlaid with journal lines
  • Coral and teal gradient accents
  • Soft glow/blur effect around edges
  • Warm, inviting aesthetic
• Light Mode: Full color with white/cream background
• Dark Mode: Adjusted colors for dark background, reduced brightness by 10%

• Illustration should feel hand-crafted, not corporate
• Use design system colors: Primary Coral (#FF6B6B), Deep Teal (#4ECDC4), Soft Peach (#FFB4A2)
• Export as vector PDF or Flutter-compatible SVG
• Assets: hero-illustration-light.svg, hero-illustration-dark.svg

​

2. Headline

• Component: Text (Large Title style from design system)
• Text: “Your life, beautifully remembered”
• Typography:
  • Font: SF Pro Display, 34pt Bold
  • Line Height: 41pt
  • Letter Spacing: 0.37pt
  • Alignment: Center
• Color:
  • Light Mode: Charcoal (#2D3436)
  • Dark Mode: Off-White (#F5F6FA)
• Position: 32pt below Hero Illustration
• Max Width: 320pt (allows multi-line on smaller devices)
• Accessibility:
  • VoiceOver: “Your life, beautifully remembered, heading”
  • Dynamic Type: Scales to .largeTitle (supports AX1-AX5)

​

3. Subheadline

• Component: Text (Body style from design system)
• Text: “Capture moments, let AI help you journal, and rediscover your memories.”
• Typography:
  • Font: SF Pro Text, 17pt Regular
  • Line Height: 22pt
  • Letter Spacing: -0.41pt
  • Alignment: Center
• Color:
  • Light Mode: Slate Gray (#636E72)
  • Dark Mode: Light Gray (#B2BEC3)
• Position: 16pt below Headline
• Max Width: 300pt
• Accessibility:
  • VoiceOver: Read after headline
  • Dynamic Type: Scales to .body

​

4. Primary CTA Button

• Component: Button (Primary style from design system)
• Text: “Get Started”
• Dimensions:
  • Height: 50pt
  • Width: Full-width minus 48pt horizontal margins (24pt each side)
  • Border Radius: 12pt
• Typography:
  • Font: SF Pro Text, 17pt Semibold
  • Color: White (#FFFFFF)
• Background:
  • Light Mode: Primary Coral (#FF6B6B)
  • Dark Mode: Primary Coral Adjusted (#FF8787)
• Shadow: Level 1 (subtle)
  • Light Mode: rgba(0, 0, 0, 0.08), offset (0, 1pt), blur 2pt
  • Dark Mode: rgba(0, 0, 0, 0.04), offset (0, 1pt), blur 2pt
• Position: 48pt below Subheadline
• States:
  • Default: Full coral background, shadow visible
  • Hover (iPad): 10% darker coral
  • Pressed: 20% darker coral, scale to 0.98 (100ms ease-in-out)
  • Focus: 2pt blue focus ring (accessibility)
• Accessibility:
  • VoiceOver: “Get Started, button”
  • Touch Target: Full 50pt height
  • Keyboard: Tab accessible, Enter to activate

​

5. Secondary Text Link

• Component: Text Button (Text style from design system)
• Text: “Already have an account? Log in”
• Typography:
  • Font: SF Pro Text, 16pt Regular
  • Color: Primary Coral (#FF6B6B in Light, #FF8787 in Dark)
  • Underline: None (iOS convention)
• Position: 24pt below Primary CTA
• Touch Target: Full width, 44pt height
• States:
  • Default: Coral text
  • Pressed: 20% darker coral, 0.8 opacity (100ms)
• Accessibility:
  • VoiceOver: “Already have an account? Log in, button”
  • Touch Target: Minimum 44×44pt

​

Responsive Behavior

• Hero Illustration: Scale to 240×240pt
• Headline: Max-width 280pt, may wrap to 2-3 lines
• Subheadline: Max-width 280pt
• CTA Button: Full-width minus 32pt margins (16pt each side)
• All vertical spacing reduced by 15%

• Layout as shown above

• Hero Illustration: 280×280pt (same)
• Text max-widths increase to 340pt
• CTA Button: Max-width 380pt (centered)
• More generous vertical spacing

• At AX5 (largest):
  • Headline scales to ~45pt
  • Subheadline scales to ~22pt
  • Button text scales to ~22pt
  • Increase vertical spacing by 20%
  • All content scrollable if exceeds screen height

​

Interactive States & Animations

​

Initial Load Animation

1. Hero Illustration: Fade in (0→1 opacity) + gentle scale (0.95→1.0)
2. Headline: Fade in + slide up 10pt (100ms delay)
3. Subheadline: Fade in + slide up 10pt (200ms delay)
4. CTA Button: Fade in + slide up 10pt (300ms delay)
5. Text Link: Fade in (400ms delay)

​

Button Press Animation

​

Page Transition (Get Started)

​

Accessibility

• ✅ Color Contrast:
  • Headline (Charcoal on White): 13.1:1 (AAA)
  • Subheadline (Slate Gray on White): 5.74:1 (AA)
  • Button (White on Coral): 4.8:1 (AA for large text)
• ✅ Touch Targets: All interactive elements 44×44pt minimum
• ✅ Focus Indicators: 2pt blue ring on button when focused
• ✅ Dynamic Type: All text uses iOS text styles (not fixed sizes)

1. “Your life, beautifully remembered, heading”
2. “Capture moments, let AI help you journal, and rediscover your memories”
3. “Get Started, button”
4. “Already have an account? Log in, button”

• Hero Illustration: “Illustration, decorative” (marked as decorative, skipped)
• Get Started: “Double-tap to begin onboarding”

​

Content Guidelines

• 40-60 characters
• Emotional, aspirational tone
• Focus on outcome, not feature (“remembered” not “journal”)

• 100-150 characters
• Clear explanation of core value: AI + photos + memories
• Avoid jargon (“AI” is familiar to target audience)

• Action-oriented, welcoming
• “Get Started” > “Sign Up” (less commitment)

• Friendly, helpful tone
• “Log in” not “Sign in” (consistency)

​

Edge Cases

• If headline exceeds 2 lines, reduce font size to 30pt
• Max 3 lines before text truncation

• No changes (onboarding is static, no API calls)
• Login link shows “No connection” error if tapped

• Enable scrolling for entire screen
• Maintain minimum spacing between elements
• Test that all content fits without truncation

​

Design Tokens Used

• colors.primary.coral.light (#FF6B6B)
• colors.primary.coral.dark (#FF8787)
• colors.neutral.text.primary.light (#2D3436)
• colors.neutral.text.primary.dark (#F5F6FA)
• colors.neutral.text.secondary.light (#636E72)
• colors.neutral.text.secondary.dark (#B2BEC3)
• colors.neutral.background.primary.light (#FFFFFF)
• colors.neutral.background.primary.dark (#1A1D1F)

• typography.largeTitle (34pt bold)
• typography.body (17pt regular)
• typography.headline (17pt semibold)

• spacing.lg (24pt)
• spacing.xl (32pt)
• spacing.xxl (48pt)
• spacing.xxxl (64pt)

• shadows.level1 (subtle)

• borderRadius.md (12pt)

​

Screen 2: How It Works

​

Purpose

​

User Journey

• Entry Point: Welcome Screen → Tap “Get Started”
• Exit Point: Tap “Next” → Permissions Request screen
• Alternative Exit: Swipe left → Permissions Request

​

Layout Structure (Light Mode)

┌────────────────────────────────────────┐
│                Skip                    │ ← Skip button (top-right)
│                                        │
│         How It Works                   │ ← Title (Title 1)
│                                        │
│                                        │
│  ┌─────────────┐                      │
│  │      1      │  Snap a photo         │ ← Step 1 Icon + Text
│  │   📷        │                       │
│  └─────────────┘  Use your camera or  │
│                   library              │
│                                        │
│                                        │
│  ┌─────────────┐                      │
│  │      2      │  AI suggests prompts  │ ← Step 2 Icon + Text
│  │   ✨        │                       │
│  └─────────────┘  Get thoughtful       │
│                   journal prompts      │
│                                        │
│                                        │
│  ┌─────────────┐                      │
│  │      3      │  Save your memory     │ ← Step 3 Icon + Text
│  │   💾        │                       │
│  └─────────────┘  Build your visual    │
│                   timeline             │
│                                        │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │           Next                   │ │ ← Primary CTA Button
│  └──────────────────────────────────┘ │
│                                        │
│              ● ● ○                     │ ← Page Indicators (page 2 of 3)
│                                        │
└────────────────────────────────────────┘

​

Components Used

​

1. Skip Button

• Component: Text Button (transparent)
• Text: “Skip”
• Position: Top-right, 16pt from trailing edge, 16pt from top Safe Area
• Typography: SF Pro Text, 16pt Regular, Primary Coral
• Touch Target: 60×44pt
• Action: Skip to Timeline (main app)
• Accessibility: VoiceOver “Skip onboarding, button”

​

2. Title

• Component: Text (Title 1 style)
• Text: “How It Works”
• Typography: SF Pro Display, 28pt Bold, Centered
• Color: Charcoal (Light) / Off-White (Dark)
• Position: 80pt from top Safe Area
• Accessibility: VoiceOver “How It Works, heading, page 2 of 3”

​

3. Step Cards (3 total)

• Number Badge (circular)
• Icon (emoji or custom)
• Step Title (Headline style)
• Step Description (Callout style)

• Dimensions: 56×56pt circle
• Background: Primary Coral (#FF6B6B)
• Border Radius: 28pt (circle)
• Text: “1”, SF Pro Display, 24pt Bold, White
• Position: Left-aligned, 24pt from leading edge

• Emoji: 📷 (camera)
• Size: 32×32pt
• Position: Centered inside number badge
• Alternative: SF Symbol camera.fill if emoji not Flutter-compatible

• Text: “Snap a photo”
• Typography: SF Pro Text, 17pt Semibold
• Color: Charcoal (Light) / Off-White (Dark)
• Position: 16pt to the right of number badge, vertically centered

• Text: “Use your camera or library”
• Typography: SF Pro Text, 16pt Regular
• Color: Slate Gray (Light) / Light Gray (Dark)
• Position: Below step title, 4pt gap
• Max Width: 200pt

• Number Badge: “2”, same styling
• Icon: ✨ (sparkles) or SF Symbol wand.and.stars
• Title: “AI suggests prompts”
• Description: “Get thoughtful journal prompts”

• Number Badge: “3”, same styling
• Icon: 💾 (floppy disk) or SF Symbol square.and.arrow.down.fill
• Title: “Save your memory”
• Description: “Build your visual timeline”

​

4. Next Button

• Component: Primary Button (same as Welcome Screen)
• Text: “Next”
• Position: 48pt below Step 3
• Full specs: Same as Welcome Screen Primary CTA

​

5. Page Indicators

• Component: Custom Page Indicator (UIPageControl style)
• Dots: 3 total (Welcome not counted, this is page 1 of 3 onboarding content screens)
• Active Dot: Primary Coral, 8pt diameter
• Inactive Dots: Light Gray, 6pt diameter
• Spacing: 8pt between dots
• Position: 16pt below Next Button, centered
• Accessibility: VoiceOver announces “Page 2 of 3” (combined with title)

​

Responsive Behavior

• Number badges: 48×48pt
• Reduce vertical spacing to 24pt between steps
• Step description max-width: 180pt

• Layout as shown

• Number badges: 56×56pt (same)
• Step description max-width: 240pt
• More generous horizontal margins (32pt)

​

Interactive States & Animations

​

Page Transition In (from Welcome)

​

Steps Appear Animation

1. Title fades in (0s)
2. Step 1: Fade + slide up 10pt (100ms delay)
3. Step 2: Fade + slide up 10pt (200ms delay)
4. Step 3: Fade + slide up 10pt (300ms delay)
5. Next Button: Fade + slide up 10pt (400ms delay)
6. Page Indicators: Fade in (500ms delay)

​

Swipe Gesture Support

• Swipe Left: Navigate to Permissions Request (same as “Next”)
• Swipe Right: Navigate back to Welcome Screen
• Animation: Slide transition (300ms ease-out)

​

Accessibility

• ✅ Color Contrast: All text meets 4.5:1 minimum
• ✅ Touch Targets: Skip button (60×44pt), Next button (full width × 50pt)
• ✅ VoiceOver: Logical reading order (Title → Step 1 → Step 2 → Step 3 → Next → Page Indicators)

1. “Skip onboarding, button”
2. “How It Works, heading, page 2 of 3”
3. “Step 1: Snap a photo. Use your camera or library”
4. “Step 2: AI suggests prompts. Get thoughtful journal prompts”
5. “Step 3: Save your memory. Build your visual timeline”
6. “Next, button”

• Group each step (badge + title + description) for smoother VoiceOver navigation

​

Content Guidelines

• Short, clear (2-4 words)
• Explains purpose of screen

• 20-30 characters
• Action-oriented (verb + noun)
• “Snap” not “Take”, “Save” not “Store” (warmer language)

• 80-120 characters
• Benefit-focused, not feature-focused
• “Get thoughtful prompts” not “AI analyzes photo”

​

Edge Cases

• If step title exceeds 1 line, wrap to 2 lines max
• If step description exceeds 2 lines, reduce font size to 15pt

• Show all 3 steps side-by-side in horizontal layout
• Page indicators not needed (single screen)

​

Design Tokens Used

• colors.primary.coral (#FF6B6B)
• colors.neutral.text.primary (Charcoal / Off-White)
• colors.neutral.text.secondary (Slate Gray / Light Gray)

• typography.title1 (28pt bold)
• typography.headline (17pt semibold)
• typography.callout (16pt regular)

• spacing.md (16pt)
• spacing.lg (24pt)
• spacing.xl (32pt)

• components.button.primary (Next button)
• Custom: Number badges, Page indicators

​

Screen 3: Permissions Request

​

Purpose

​

User Journey

• Entry Point: How It Works → Tap “Next”
• Exit Point: Grant permissions → Timeline (First Entry Guidance)
• Alternative Exit: Skip → Timeline

​

Layout Structure (Light Mode)

┌────────────────────────────────────────┐
│                Skip                    │ ← Skip button (top-right)
│                                        │
│      We need a few permissions         │ ← Title (Title 2)
│                                        │
│                                        │
│   ┌──────────────────────────────────┐│
│   │                                  ││
│   │  📷  Camera                      ││ ← Permission 1 Card
│   │                                  ││
│   │  To capture photos for your      ││
│   │  journal                         ││
│   │                                  ││
│   │  ┌────────────────────────────┐ ││
│   │  │  Allow Camera Access       │ ││ ← CTA Button
│   │  └────────────────────────────┘ ││
│   │                                  ││
│   └──────────────────────────────────┘│
│                                        │
│   ┌──────────────────────────────────┐│
│   │                                  ││
│   │  🖼️  Photo Library              ││ ← Permission 2 Card
│   │                                  ││
│   │  To select existing photos       ││
│   │  from your library               ││
│   │                                  ││
│   │  ┌────────────────────────────┐ ││
│   │  │  Allow Photo Access        │ ││ ← CTA Button
│   │  └────────────────────────────┘ ││
│   │                                  ││
│   └──────────────────────────────────┘│
│                                        │
│   ┌──────────────────────────────────┐│
│   │                                  ││
│   │  🔔  Notifications (Optional)    ││ ← Permission 3 Card
│   │                                  ││
│   │  Daily reminders to journal      ││
│   │                                  ││
│   │  ┌────────────────────────────┐ ││
│   │  │  Allow Notifications       │ ││ ← CTA Button
│   │  └────────────────────────────┘ ││
│   │                                  ││
│   └──────────────────────────────────┘│
│                                        │
│     I'll do this later                 │ ← Skip link
│                                        │
│              ● ● ●                     │ ← Page Indicators (page 3 of 3)
│                                        │
└────────────────────────────────────────┘

​

Components Used

​

1. Skip Button

• Same as Screen 2 (top-right)
• Action: Skip to Timeline without granting permissions

​

2. Title

• Component: Text (Title 2 style)
• Text: “We need a few permissions”
• Typography: SF Pro Display, 22pt Bold, Centered
• Color: Charcoal (Light) / Off-White (Dark)
• Position: 80pt from top Safe Area
• Accessibility: VoiceOver “We need a few permissions, heading, page 3 of 3”

​

3. Permission Cards (3 total)

• Card Container (elevated surface)
• Icon (emoji)
• Permission Title (Headline + Optional badge)
• Permission Description (Callout)
• CTA Button (Secondary button style)

• Dimensions: Full-width minus 32pt margins (16pt each side)
• Height: Variable (content + padding)
• Padding: 20pt internal padding
• Border Radius: 16pt (large)
• Background:
  • Light Mode: Off-White (#F9FAFB)
  • Dark Mode: Elevated Surface (#2C3135)
• Shadow: Level 1 (subtle)
• Spacing Between Cards: 16pt vertical gap

• Emoji: 📷 or SF Symbol camera.fill
• Size: 48×48pt
• Color: Primary Coral
• Position: Top-left, inside card

• Text: “Camera”
• Typography: SF Pro Text, 17pt Semibold
• Color: Charcoal (Light) / Off-White (Dark)
• Position: 16pt to the right of icon, vertically centered with icon

• Text: “To capture photos for your journal”
• Typography: SF Pro Text, 16pt Regular
• Color: Slate Gray (Light) / Light Gray (Dark)
• Position: Below title, 8pt gap
• Max Width: Full card width minus padding

• Component: Secondary Button (from design system)
• Text: “Allow Camera Access”
• Dimensions: Full-width within card (no additional margins)
• Height: 50pt
• Typography: SF Pro Text, 17pt Semibold
• Background:
  • Light Mode: Primary Coral (#FF6B6B)
  • Dark Mode: Primary Coral Adjusted (#FF8787)
• Text Color: White
• Border Radius: 12pt
• Position: 16pt below description
• Action: Triggers iOS camera permission dialog

• Before Request: “Allow Camera Access”
• After Grant: ”✓ Camera Allowed” (green checkmark, disabled state, background: Success Green)
• After Deny: “Camera Denied - Open Settings” (red text, opens Settings app)

​

4. Skip Link

• Component: Text Button
• Text: “I’ll do this later”
• Typography: SF Pro Text, 16pt Regular, Primary Coral
• Position: 24pt below Permission 3 card, centered
• Touch Target: Full width, 44pt height
• Action: Complete onboarding, go to Timeline
• Accessibility: VoiceOver “I’ll do this later, button, skips permission requests”

​

5. Page Indicators

• Same as Screen 2
• Active: Dot 3 (page 3 of 3)
• Position: 16pt below Skip Link

​

Responsive Behavior

• Cards: Full-width minus 24pt margins (12pt each side)
• Icon size: 40×40pt
• Button text: 16pt

• Layout as shown

• Cards: Max-width 400pt (centered)
• More generous padding (24pt internal)

• If all 3 cards exceed screen height, enable scrolling
• Scroll indicators visible
• Page indicators remain sticky at bottom

​

Interactive States & Animations

​

Page Transition In

​

Cards Appear Animation

1. Title fades in (0s)
2. Card 1: Fade + slide up 10pt (100ms delay)
3. Card 2: Fade + slide up 10pt (200ms delay)
4. Card 3: Fade + slide up 10pt (300ms delay)
5. Skip Link: Fade in (400ms delay)

​

Permission Request Flow

1. User taps “Allow Camera Access”
2. Button animates to pressed state (scale 0.98)
3. iOS native permission dialog appears
4. If Granted:
   • Button text changes to ”✓ Camera Allowed”
   • Button background changes to Success Green (#00B894)
   • Button disabled (no further interaction)
   • Celebration micro-animation (optional: confetti burst)
5. If Denied:
   • Button text changes to “Camera Denied - Open Settings”
   • Button background changes to Error Red (#D63031)
   • Tapping button opens iOS Settings app

​

Completion Logic

• When Camera AND Photo Library permissions are granted → Automatically advance to Timeline after 1s delay
• If user denies one or both → Show Toast: “You can enable permissions later in Settings”
• Notifications permission does not block auto-advance

• Skipping does not show error/warning (permission requests are non-blocking)
• User lands on Timeline with empty state

​

Accessibility

• ✅ Color Contrast: All text meets minimum ratios
• ✅ Touch Targets: All buttons 50pt height
• ✅ VoiceOver: Clear explanations for each permission

1. “Skip, button”
2. “We need a few permissions, heading, page 3 of 3”
3. “Camera. To capture photos for your journal. Allow Camera Access, button”
4. “Photo Library. To select existing photos from your library. Allow Photo Access, button”
5. “Notifications, Optional. Daily reminders to journal. Allow Notifications, button”
6. “I’ll do this later, button”

• Apple requires clear explanations in permission dialogs
• Description text appears in iOS system dialog (set in Info.plist)
• Example: “Camera - To capture photos for your journal”

​

Content Guidelines

• Friendly, non-demanding tone
• “We need” not “You must” (collaborative, not authoritarian)

• Clear, benefit-focused
• “To [action] for [benefit]” format
• No jargon or technical terms

• Action-oriented: “Allow [Permission]”
• Not “Grant Permission” or “Enable Camera” (too formal)

​

Edge Cases

• User can still use app with limited functionality
• Show Toast: “You can enable permissions later in Settings to unlock full features”
• Timeline shows empty state with “Add your first photo” CTA
• If user tries to take photo → Show alert “Camera permission required. Open Settings?”

• Camera only: User can take photos, can’t select from library
• Photo Library only: User can select photos, can’t take new ones
• Neither: User can create text-only entries (Phase 2 feature)

• If user selects “Limited Photos” → App adapts to show only selected photos
• Show hint: “You’ve selected limited photo access. Tap here to add more photos.”

​

Design Tokens Used

• colors.primary.coral (#FF6B6B)
• colors.system.success (#00B894)
• colors.system.error (#D63031)
• colors.neutral.background.surface (Off-White / Elevated Surface)

• typography.title2 (22pt bold)
• typography.headline (17pt semibold)
• typography.callout (16pt regular)

• spacing.md (16pt)
• spacing.lg (24pt)
• Card padding: 20pt

• shadows.level1 (subtle)

• borderRadius.lg (16pt) for cards
• borderRadius.md (12pt) for buttons

​

Screen 4: First Entry Guidance (Timeline Empty State)

​

Purpose

​

User Journey

• Entry Point: Permissions Request → Tap “Allow” or “Skip”
• Exit Point: Tap “Create Your First Memory” → Entry Creation Flow

​

Layout Structure (Light Mode)

┌────────────────────────────────────────┐
│  Timeline                        [⚙️]  │ ← Navigation Bar
├────────────────────────────────────────┤
│                                        │
│                                        │
│                                        │
│        [Hero Illustration]             │ ← Empty State Illustration (200×200pt)
│       Camera + Journal Icon            │
│                                        │
│                                        │
│      Your story starts here            │ ← Headline (Title 2)
│                                        │
│  Capture a moment and let AI help you  │ ← Body Text (Body)
│  remember it forever.                  │
│                                        │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │  + Create Your First Memory      │ │ ← Primary CTA Button
│  └──────────────────────────────────┘ │
│                                        │
│                                        │
│                                        │
│                                        │
│  [🏠]  [🔍]    [+]    [👤]            │ ← Tab Bar (Bottom Navigation)
└────────────────────────────────────────┘

​

Components Used

​

1. Navigation Bar

• Component: NavigationBar (from design system)
• Title: “Timeline”
• Title Style: Large Title (34pt bold), collapses on scroll
• Height: 96pt (expanded), 44pt (collapsed)
• Trailing Icon: Settings (SF Symbol gearshape.fill, 24×24pt)
• Background: Transparent with iOS native blur effect
• Accessibility: VoiceOver “Timeline, heading”

​

2. Empty State Illustration

• Component: Custom illustration (same as Welcome Screen, smaller size)
• Dimensions: 200×200pt
• Position: Centered horizontally and vertically
• Content: Photo + journal icon with warm gradient
• Accessibility: VoiceOver “Illustration, decorative” (marked as decorative)

​

3. Headline

• Component: Text (Title 2 style)
• Text: “Your story starts here”
• Typography: SF Pro Display, 22pt Bold, Centered
• Color: Charcoal (Light) / Off-White (Dark)
• Position: 32pt below illustration
• Max Width: 280pt
• Accessibility: VoiceOver “Your story starts here, heading”

​

4. Body Text

• Component: Text (Body style)
• Text: “Capture a moment and let AI help you remember it forever.”
• Typography: SF Pro Text, 17pt Regular, Centered
• Color: Slate Gray (Light) / Light Gray (Dark)
• Position: 16pt below headline
• Max Width: 300pt
• Accessibility: VoiceOver reads after headline

​

5. Primary CTA Button

• Component: Primary Button (large variant)
• Text: ”+ Create Your First Memory”
• Dimensions:
  • Height: 56pt (slightly taller for emphasis)
  • Width: Full-width minus 48pt horizontal margins
  • Border Radius: 12pt
• Typography: SF Pro Text, 17pt Semibold
• Icon: Plus symbol (+), 20×20pt, leading icon
• Background: Primary Coral (#FF6B6B / #FF8787)
• Text Color: White
• Shadow: Level 2 (raised, for prominence)
• Position: 32pt below body text
• Action: Opens Entry Creation Flow (camera or photo picker choice)
• Accessibility: VoiceOver “Create Your First Memory, button”

• Default: Full coral background, shadow visible
• Hover: 10% darker coral (iPad)
• Pressed: 20% darker coral, scale 0.98 (100ms)
• Focus: 2pt blue focus ring

​

6. Tab Bar (Bottom Navigation)

• Component: TabBar (from design system)
• Height: 49pt + Safe Area bottom inset
• Tabs (left to right):
  1. Timeline (active): SF Symbol house.fill, “Timeline” label, Primary Coral
  2. Search: SF Symbol magnifyingglass, “Search” label, Secondary Gray
  3. Create Entry (center, emphasized): SF Symbol plus.circle.fill, no label, Primary Coral, 32×32pt
  4. Profile: SF Symbol person.circle.fill, “Profile” label, Secondary Gray
• Background: Off-White (Light) / Elevated Surface (Dark)
• Top Border: 0.5pt Light Gray divider
• Accessibility: Each tab has VoiceOver label “Timeline, tab, 1 of 4, selected”

​

Responsive Behavior

• Illustration: 160×160pt
• Headline max-width: 260pt
• Body text max-width: 280pt
• CTA button margins: 32pt horizontal

• Layout as shown

• Illustration: 220×220pt
• Headline max-width: 320pt
• Body text max-width: 340pt
• More generous vertical spacing

• Portrait: Empty state vertically centered
• Landscape: Empty state shifted up slightly (account for tab bar and navigation bar)

​

Interactive States & Animations

​

Initial Load Animation

1. Navigation bar slides down from top (0s)
2. Illustration: Fade in + gentle scale (0.95→1.0) (100ms delay)
3. Headline: Fade in + slide up 10pt (200ms delay)
4. Body text: Fade in + slide up 10pt (300ms delay)
5. CTA button: Fade in + slide up 10pt (400ms delay)
6. Tab bar slides up from bottom (100ms delay)

​

CTA Button Press

​

Entry Creation Flow (Bottom Sheet)

┌────────────────────────────────────────┐
│               [—]                      │ ← Handle (drag to dismiss)
│                                        │
│        Add a Photo                     │ ← Title
│                                        │
│  ┌──────────────────────────────────┐ │
│  │  📷  Take Photo                  │ │ ← Option 1
│  └──────────────────────────────────┘ │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │  🖼️  Choose from Library         │ │ ← Option 2
│  └──────────────────────────────────┘ │
│                                        │
│          Cancel                        │ ← Cancel link
│                                        │
└────────────────────────────────────────┘

• Component: iOS native bottom sheet (UIModalPresentationFormSheet style)
• Height: Auto (content + padding)
• Background: Off-White (Light) / Elevated Surface (Dark)
• Border Radius: 16pt (top corners only)
• Shadow: Level 2
• Padding: 24pt internal

• Each option is a tappable card (Secondary button style)
• Icon (48×48pt) + Text (17pt semibold)
• Full-width, 60pt height
• 16pt gap between options

• “Take Photo” → Open in-app camera
• “Choose from Library” → Open photo picker
• “Cancel” or swipe down → Dismiss sheet

​

Accessibility

• ✅ Color Contrast: All text meets minimum ratios
• ✅ Touch Targets: CTA button 56pt height, tab bar items 49pt
• ✅ VoiceOver: Clear reading order, grouped elements

1. “Timeline, heading”
2. “Settings, button”
3. “Your story starts here, heading”
4. “Capture a moment and let AI help you remember it forever”
5. “Create Your First Memory, button”
6. “Timeline, tab, 1 of 4, selected”
7. “Search, tab, 2 of 4”
8. “Create entry, tab, 3 of 4”
9. “Profile, tab, 4 of 4”

• Headline scales to 28pt at AX5
• Body text scales to 22pt at AX5
• CTA button height increases to 64pt
• All content scrollable if exceeds screen height

​

Content Guidelines

• Short, inspirational (3-5 words)
• Emotional, personal tone
• Focus on beginning, not absence
• “Your story starts here” > “No entries yet”

• 100-150 characters
• Clear call to action embedded in text
• “AI help” is part of value prop
• Avoid negative language (“empty”, “nothing”)

• Celebratory tone (“First Memory” not “First Entry”)
• Plus icon emphasizes creation
• “Your” makes it personal

​

Edge Cases

• Empty state is replaced by timeline grid with 1 entry
• No animation (standard app launch)

• Tapping CTA button shows alert: “Camera and Photo Library access required. Open Settings?”
• Alert has 2 buttons: “Open Settings”, “Cancel”
• If user opens Settings → app backgrounds

• Empty state still shows (no API calls)
• Creating entry works (queued for upload later)

• First Entry Guidance is the same
• No difference in experience

​

Design Tokens Used

• colors.primary.coral (#FF6B6B / #FF8787)
• colors.neutral.text.primary (Charcoal / Off-White)
• colors.neutral.text.secondary (Slate Gray / Light Gray)
• colors.neutral.background.primary (White / Black)
• colors.neutral.background.surface (Off-White / Elevated Surface)

• typography.largeTitle (34pt bold) - Navigation title
• typography.title2 (22pt bold) - Headline
• typography.body (17pt regular) - Body text
• typography.headline (17pt semibold) - Button text

• spacing.md (16pt)
• spacing.xl (32pt)
• spacing.xxl (48pt)

• shadows.level2 (raised) - CTA button

• components.navigationBar.largeTitleHeight (96pt)
• components.tabBar.height (49pt)
• components.button.primary (CTA button)

​

Dark Mode Specifications

​

Color Adjustments

• Light Mode: White (#FFFFFF) / Off-White (#F9FAFB)
• Dark Mode: Background Black (#1A1D1F) / Elevated Surface (#2C3135)

• Primary Text: Charcoal (#2D3436) → Off-White (#F5F6FA)
• Secondary Text: Slate Gray (#636E72) → Light Gray (#B2BEC3)

• Light Mode: #FF6B6B
• Dark Mode: #FF8787 (slightly brighter for legibility on dark background)

• Light Mode: Light Gray (#DFE6E9)
• Dark Mode: Dark Gray (#3C4347)

• Light Mode: Full opacity (rgba(0,0,0,0.08))
• Dark Mode: 50% reduced opacity (rgba(0,0,0,0.04))

​

Illustrations

• Dark Mode variants provided as separate assets
• Reduced brightness by 10%
• Adjusted contrast for dark background
• Example: hero-illustration-dark.svg, empty-state-dark.svg

​

iOS Automatic Dark Mode

• Use @Environment(\.colorScheme) in SwiftUI or UITraitCollection.userInterfaceStyle in UIKit
• Flutter: Theme.of(context).brightness
• All colors auto-switch based on system setting

​

Animation Specifications Summary

​

Global Animation Principles

• Respect Reduce Motion: All animations have fade-only fallbacks
• Timing: Use iOS-standard spring curves for organic feel
• Performance: 60fps minimum (120fps on ProMotion devices)
• Purpose: Delight, not decoration - every animation guides or informs

​

Spring Curve (Default)

// SwiftUI
.animation(.spring(response: 0.3, dampingFraction: 0.7))

// Flutter
Curves.easeOutCubic (closest equivalent)

​

Durations

• Instant: 100ms (button press)
• Fast: 200ms (micro-interactions)
• Standard: 300ms (page transitions)
• Deliberate: 500ms (onboarding screens appear)

​

Common Animations

• Opacity: 0 → 1
• Duration: 200-300ms
• Curve: ease-out

• TranslateY: +10pt → 0
• Opacity: 0 → 1
• Duration: 300ms
• Curve: spring

• Scale: 1.0 → 0.98 → 1.0
• Duration: 100ms
• Curve: ease-in-out

• TranslateX: +100% → 0 (slide in from right)
• Duration: 300ms
• Curve: ease-out

​

Flutter Implementation Notes

​

Design System Compatibility

• Use CupertinoButton, CupertinoNavigationBar, CupertinoTabBar for iOS-native feel
• Avoid Material Design widgets (RaisedButton, AppBar) - they don’t match iOS aesthetics

• CupertinoButton: Primary/Secondary buttons
• CupertinoNavigationBar: Navigation bar (large title support)
• CupertinoTabBar: Bottom tab navigation
• PageView: For swiping between onboarding screens
• CupertinoPageScaffold: Screen container with Safe Area
• AnimatedOpacity: Fade animations
• SlideTransition: Slide animations
• ScaleTransition: Scale animations

• Emotion Tags: Custom Flutter widgets (circular badges)
• Permission Cards: Custom Container with BoxDecoration
• Page Indicators: Custom Row of Containers (circles)

​

Design Tokens in Flutter/Dart

// lib/theme/colors.dart
class AppColors {
  // Primary
  static const primaryCoralLight = Color(0xFFFF6B6B);
  static const primaryCoralDark = Color(0xFFFF8787);

  // Neutral Text
  static const textPrimaryLight = Color(0xFF2D3436);
  static const textPrimaryDark = Color(0xFFF5F6FA);

  // ... (all colors from design-tokens.json)
}

// lib/theme/typography.dart
class AppTypography {
  static const largeTitle = TextStyle(
    fontFamily: 'SF Pro Display',
    fontSize: 34,
    fontWeight: FontWeight.bold,
    letterSpacing: 0.37,
  );

  // ... (all text styles)
}

// lib/theme/spacing.dart
class AppSpacing {
  static const xxs = 4.0;
  static const xs = 8.0;
  static const sm = 12.0;
  static const md = 16.0;
  static const lg = 24.0;
  static const xl = 32.0;
  static const xxl = 48.0;
  static const xxxl = 64.0;
}

​

Responsive Layout in Flutter

// Use MediaQuery for responsive breakpoints
final width = MediaQuery.of(context).size.width;

// iPhone SE: 320pt
// iPhone 15: 390pt
// iPhone 15 Pro Max: 430pt

if (width < 360) {
  // Compact layout (iPhone SE)
} else if (width > 410) {
  // Spacious layout (Pro Max)
} else {
  // Default layout
}

​

Dark Mode in Flutter

// Automatic dark mode switching
final brightness = Theme.of(context).brightness;
final backgroundColor = brightness == Brightness.dark
    ? AppColors.backgroundPrimaryDark
    : AppColors.backgroundPrimaryLight;

​

Asset Export Requirements

​

For @frontend-developer

• Format: SVG (vector) or Flutter-compatible format
• Files needed:
  • hero-illustration-light.svg (280×280pt)
  • hero-illustration-dark.svg (280×280pt)
  • empty-state-light.svg (200×200pt)
  • empty-state-dark.svg (200×200pt)
• Export at: @1x (base size)
• Flutter will handle scaling for @2x, @3x (Retina displays)

• Use SF Symbols where possible (native iOS, Flutter plugin available)
• Custom icons: Export as SVG or icon font
• Sizes needed: 24×24pt, 32×32pt, 48×48pt

• Format: SVG or icon font
• Sizes: 20×20pt, 24×24pt, 32×32pt
• Export in color (each emotion has unique color)
• Files: emotion-happy.svg, emotion-grateful.svg, etc.

• Can be built with Flutter widgets (Container with circular border radius)
• No assets needed

• Use SF Symbols: house.fill, magnifyingglass, plus.circle.fill, person.circle.fill
• Flutter plugin: sf_symbols package

​

Design Handoff Checklist

​

Deliverables for Approval

• ✅ This document: Complete UI specifications for 4 onboarding screens
• Figma file: High-fidelity mockups (8 artboards: 4 screens × Light/Dark)
• Interactive prototype: Clickable flow (Figma Prototype mode)
• Exported assets: All illustrations, icons, and images
• Flutter design tokens: Dart file with colors, typography, spacing
• Animation specs: Detailed timing and easing curves

​

Review Checklist

• All screens designed for iPhone 15/16/17 (390-430pt width)
• Light and Dark mode variants for all screens
• iOS-native feel maintained (SF Pro, iOS patterns, Cupertino widgets)
• Accessibility: VoiceOver labels, Dynamic Type support, color contrast AA
• Responsive behavior documented for all breakpoints
• Edge cases handled (permissions denied, long text, etc.)
• Animations specified with timing and easing curves
• Flutter implementation notes provided
• Design tokens exported in Dart format

​

Next Steps After Approval

​

Phase 2: Photo Capture & Entry Creation Flow

1. Entry Creation (Choose Photo Source) - Bottom sheet
2. In-App Camera - Full-screen camera with controls
3. Photo Review - Preview with “Use Photo” or “Retake”
4. Photo Picker (Library) - Native photo picker UI
5. Photo Edit - Crop and rotate tools
6. Journal Entry Screen - Photo + AI Prompts + Emotions + Text Field
7. Entry Saved Confirmation - Success toast + Timeline

​

Appendix: Design System Cross-Reference

• 1.2 Navigation Bar (Top Bar) - Screen 4
• 1.1 Tab Bar (Bottom Navigation) - Screen 4

• 3.1 Primary Button - All screens
• 3.3 Text Button (Link) - Welcome, How It Works

• 7.1 Welcome Screen - Screen 1
• 7.2 How It Works - Screen 2
• 7.3 Permission Request - Screen 3

• 4.5 Empty State - Screen 4 (First Entry Guidance)

• 5.1 Toast Notification - (used after permissions granted)

​

Approval

• Product Designer (self) - Design completeness, quality
• UX Designer - Style guide adherence, accessibility
• Senior Product Manager - PRD alignment, user stories coverage
• Frontend Developer (iOS/Flutter) - Technical feasibility, implementability
• Chief Product Officer - Brand alignment, strategic fit

​

Revision History

• Style Guide
• Design System
• Design Tokens
• PRD: MVP Q1 2025