Instories: AI Photo & Video

Colors

• #131317Background · screen background
• #FFFFFFPrimary Text · screen title · back button arrow · section header
• #9C9CA5Secondary Text · screen subtitle · select all button label · feature card label
• #7B6CE6Progress Active · progress fill indicator
• #292934Progress Track · progress background line
• #24252BCard Surface · feature card container background
• #212127Disabled Button Background · inactive Continue button background
• #4D4D58Disabled Button Label · inactive Continue button text

Type

• Screen TitleSF Pro Display · 52px · 700 · #FFFFFF
• Screen SubtitleSF Pro Text · 34px · 400 · #9C9CA5
• Section HeaderSF Pro Display · 44px · 700 · #FFFFFF
• Section ActionSF Pro Text · 28px · 500 · #FFFFFF
• Feature LabelSF Pro Text · 30px · 500 · #FFFFFF
• Bottom Action LabelSF Pro Text · 36px · 600 · #4D4D58

Elements

• Select All Button · pill_button

  Aligned right of section header 'Popular', pill shape approx 250px wide and 68px high · Dark grey fill with white text and trailing checkmark glyph

• Feature Thumbnail Cards · card

  3 columns evenly distributed, square cards approx 324px x 324px, 28px spacing · Dark charcoal rounded card hosting graphic or photo illustration inside

• Continue Button · cta_button

  Bottom pinned button, 140px tall, margins 54px · Disabled state with dark surface and dim grey text

Layout

Vertical scroll layout featuring header bar, title hierarchy, grouped sections with horizontal headers and 'Select all' actions, 3-column icon/preview grids, and fixed bottom CTA.

Notes

Zero features selected; Continue CTA remains in an inactive disabled state.