Shots: Photo & Video Generator

Colors

• #000000background-black · bottom paywall backing · scrim
• #6C4DF6accent-purple · action button fill · popular badge fill · selected card outline
• #FFFFFFtext-primary · headings · plan titles · body labels
• #8E8E93text-secondary · legal links · sub-pricing details
• #4D4D54badge-gray · discount badge background
• #34C759indicator-green · checkmark confirmation icon

Type

• header-titleSF Pro Display · 62px · 800 · #FFFFFF
• card-titleSF Pro Display · 38px · 700 · #FFFFFF
• card-subtitleSF Pro Text · 28px · 400 · #8E8E93
• badge-labelSF Pro Text · 24px · 700 · #FFFFFF
• footer-guaranteeSF Pro Text · 30px · 500 · #FFFFFF
• legal-linkSF Pro Text · 24px · 400 · #8E8E93

Elements

• plan-card-popular · selectable-card

  Horizontal container, margins ~40px, rounded corners, height ~150px · Dark fill with high-contrast violet border, radio button on left, badge protruding at top right

• popular-badge · pill-badge

  Upper right corner of weekly card · Solid purple rounded pill with uppercase/capitalized white text

• plan-card-annual · selectable-card

  Stacked directly below weekly card with ~24px gap · Subtle border outline, unfilled radio button, light discount badge at top right

• loading-cta-button · primary-button

  Full-width pill below plan selector cards, height ~100px · Solid bright purple background displaying an activity/loading spinner icon in center

• legal-footer-links · link-list

  Bottom-most horizontal row with dot separators · Understated gray text with tap target spacing for Terms, Privacy Policy, Restore, and Contact

Layout

Paywall layout featuring an angled mosaic hero background in the upper half transitioning through a black gradient into pricing cards, primary CTA with loading state, guarantee line, and legal links at the base.

Notes

The CTA shows an active spinning indicator instead of text, indicating processing or network request.