Instories: AI Photo & Video

Colors

• #131317Background · screen background
• #FFFFFFPrimary Text · headline title · option item text · back arrow
• #9C9CA5Secondary Text · subtitle instruction
• #7B6CE6Progress Accent · top progress bar active fill
• #292934Progress Base · top progress bar track
• #1C1C22Option Card Background · vertical option item container
• #1D1D23Disabled Button Background · inactive CTA container
• #4D4D58Disabled Button Label · inactive CTA text label

Type

• TitleSF Pro Display · 56px · 700 · #FFFFFF
• SubtitleSF Pro Text · 34px · 400 · #9C9CA5
• Option LabelSF Pro Text · 38px · 500 · #FFFFFF
• CTA Button LabelSF Pro Text · 36px · 600 · #4D4D58

Elements

• Progress Bar · progress_indicator

  Centered at top below URL bar, approx 360px wide, progress fill extended past halfway · Violet rounded bar on dark grey track

• Single-Choice Option Row · list_item

  Vertical stack of 4 full-width rounded rows, each approx 150px high, 24px vertical gap · Dark charcoal pill container with leading emoji/icon and left-aligned white label text

• Continue Button · cta_button

  Bottom pinned full-width button, 140px tall · Subdued disabled container fill and muted grey text

Layout

Single-select question layout: header progress bar, centered question title and subtitle, vertical stacked option rows with icons, disabled action button anchored at bottom.

Notes

Progress bar fill indicates an advanced step in the onboarding funnel (approx 65-70% completed).