Instories: AI Photo & Video

Colors

• #131317Background · screen background
• #7B6CE6Active Accent · step progress fill · active CTA button surface
• #FFFFFFPrimary Text · screen title · active CTA button text · card caption
• #9C9CA5Secondary Text · selection count description
• #FFFFFFCheckmark Circle · selection indicator badge background
• #212127Checkmark Icon · inner check symbol

Type

• TitleSF Pro Display · 54px · 700 · #FFFFFF
• SubtitleSF Pro Text · 34px · 400 · #9C9CA5
• Tile CaptionSF Pro Text · 32px · 500 · #FFFFFF
• CTA Button LabelSF Pro Text · 36px · 600 · #FFFFFF

Elements

• Selected Badge Indicator · badge

  Centered over the top-left card ('French Girl'), approx 100px x 100px circle · White circular pill background with dark charcoal checkmark icon

• Active Continue Button · cta_button

  Fixed near bottom, width approx 1062px, height approx 140px · Vibrant lilac/violet solid background fill with crisp centered white text

• Masonry Style Grid · grid

  Two asymmetrical columns containing photographic style options with category titles · Rounded rectangle photo containers with 40px corners

Layout

Vertical onboarding screen in active state: one item is selected with a prominent checkmark overlay, activating the bright purple primary CTA button at the bottom.

Notes

The image on the top right tile ('Minimalism') dynamically displays a flower being placed into the vase compared to the empty glass in Screen 1.