Instories: AI Photo & Video

Colors

• #131317Background · screen background
• #7B6CE6Progress Fill · active segment in top progress bar
• #292934Progress Track · inactive progress bar track
• #404049Dimmed Text · faded title · faded subtitle · card caption labels
• #212127Disabled Button Surface · inactive CTA button container
• #454551Disabled Button Text · inactive CTA text label

Type

• TitleSF Pro Display · 54px · 700 · #404049
• SubtitleSF Pro Text · 34px · 400 · #3B3B44
• Card CaptionSF Pro Text · 32px · 500 · #52525C
• Button LabelSF Pro Text · 36px · 600 · #454551

Elements

• Navigation Bar · app_header

  Fixed near top, containing left back arrow and centered horizontal progress indicator bar · Back arrow icon in dark muted tone, progress bar with rounded ends featuring partial violet fill

• Progress Bar · progress_indicator

  Centered horizontally below status bar, width approx 360px, height approx 10px · Two-tone pill track with violet active left segment and charcoal grey background track

• Visual Style Image Cards · grid_cell

  Two-column staggered vertical masonry layout with rounded corners and bottom centered text labels · Image thumbnails dimmed under a transitional or inactive dark overlay

• Continue Button · cta_button

  Full-width with approx 54px horizontal margins pinned near bottom edge, height approx 140px · Dark charcoal rounded rectangle container with disabled low-contrast text

Layout

Vertical onboarding survey layout displaying a header navigation bar, centered title and subtitle, two-column visual preference grid, and a bottom fixed action button. The entire screen appears darkened or transitioning.

Notes

The screen contents exhibit reduced brightness/contrast, indicating an initial loading state, page transition, or disabled interactive layer before asset rendering completes.